在本章中，我们将学习Gradient渐变色的使用场景。

纯色

在上一章节中，我们了解到实现一个简单的纯色（单色）按钮或者色块，只需要为视图添加背景填充色即可。如下代码所示：

Row()
  .width('90%')
  .height(80)
  .backgroundColor('#409EFF')
  .margin(20)
  .borderRadius(8)

上述代码中，我们使用了一个Row横向布局容器作为色块的主体，然后通过设置修饰器（backgroundColor背景颜色、borderRadius圆角）来完善色块样式部份。如此，我们得到了一个纯色的色块。

backgroundColor背景颜色修饰器可接收的参数类型有很多，大体罗列如下：

// 十六进制
.backgroundColor('#409EFF')

// 系统颜色
.backgroundColor(Color.Blue)

// 十六进制数字
.backgroundColor(0x409EFF)

// RGB颜色
.backgroundColor('rgb(88, 224, 133)')

在实际开发场景中，可以根据当前你所熟悉的方式选择一种设置颜色的方式，都可以的。

单一的颜色了解之后，我们再来看渐变色。

渐变色

简单的渐变色效果是从一个颜色线性过渡到另一个颜色，可以适用于2个颜色，也可以适用于多个颜色的过渡渐变。首先，我们先声明2个颜色数组，如下代码所示：

@State color_one: [string,number] = ['#FBAB7E', 0.1]
@State color_two: [string,number] = ["#F7CE68", 0.6]

由于在渐变色修饰器中，colors参数仅接收[string,number]类型的元组，即指定某百分比位置处的渐变色颜色。所以我们声明颜色时，需要声明string、number类型的元组。

接下来，我们就可以适用linearGradient修饰器来实现渐变色效果，如下代码所示：

.linearGradient({
  angle: 62,
  colors: [this.color_one,this.color_two]
})

上述代码中，linearGradient修饰器中有2个参数，angle来决定线性渐变色的渐变角度，colors接收多个渐变色颜色值。

我们再尝试多个颜色的效果，如下代码所示：

// 颜色声明
@State color_one: [string,number] = ['#4158D0', 0.1]
@State color_two: [string,number] = ["#C850C0", 0.6]
@State color_three: [string,number] = ["#FFCC70", 0.9]

// 颜色使用
.linearGradient({
  angle: 43,
  colors: [this.color_one,this.color_two,this.color_three]
})

除了linearGradient线性渐变外，ArkUI还提供sweepGradient角度渐变、radialGradient径向渐变，使用方法也类似。

应用场景

了解了渐变色的基础用法之后，在实际应用中，我们会如何使用Gradient渐变色来构建精致的页面呢？

以页面本身来说，通过可以将渐变色填充整个页面，作为页面的背景色进行使用，如下代码所示：

// 颜色声明
@State color_one: [string,number] = ['#ff9a9e', 0.3]
@State color_two: [string,number] = ["#fad0c4", 0.8]

// 视图
// 堆叠容器
Stack() {

  // 页面背景
  Column() {
  }
  .height('100%')
  .width('100%')
  .linearGradient({
    angle: 43,
    colors: [this.color_one, this.color_two]
  })

  // 页面内容
  Text('渐变色背景')
    .fontSize(23)
    .fontColor('#FFFFFF')

}

上述代码中，我们使用Stack堆叠布局容器作为父级视图，在其闭包中，我们创建了一个页面背景代码块和页面额内容代码块。页面背景代码块部份，使用Column垂直布局容器作为组件，设置尺寸为100%来铺满全屏，再设置linearGradient修饰器来填充渐变色。

页面内容部份就比较简单了，我们显示了一个文字样式，当然我们也可以替换成我们复杂的页面内容。比如我们替换成一个渐变色的按钮，如下代码所示：

// 页面内容
Button() {
  Text('立即使用')
    .fontSize(17)
    .fontColor('#FFFFFF')
    .padding({left:32,right:32,top:15,bottom:15})
}
.clickEffect({level:ClickEffectLevel.LIGHT})
.linearGradient({
  direction: GradientDirection.LeftBottom,
  repeating: false,
  colors: [['#d299c2',0.2],['#a18cd1',0.6]]
})

上述代码中，我们创建了一个“立即使用”按钮的代码块，颜色部份，使用linearGradient渐变色修饰器，但这里我们使用了另外一种参数设置方式。

当我们只需要到固定渐变方向时，我们可以使用direction方向参数，设置参数值为从某一固定方向向另一个方向渐变，比如LeftBottom左下方->右上方。

另外，repeating参数控制颜色重复渐变，如果设置为true，则在渐变方向上，将会多层渐变，大家可以修改参数看看效果。

当然渐变色还可以应用到“色块”上，作为某一个区域的自定义背景。你还想到哪些使用场景，欢迎在评论区留言。

ArkUI极简教程09：Gradient渐变色的使用

纯色

渐变色

应用场景