鸿蒙UI开发——渐变色效果

1、概 述

ArkTs可以通过颜色渐变接口，设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。

目前提供三种渐变类型：线性渐变、角度渐变、径向渐变。

我们在鸿蒙UI布局实战 —— 个人中心页面开发中，默认头像部分，使用到了线性渐变，效果如下：

在项目中合理的使用渐变色，有助于让我们的APP更加灵动，下面对三种渐变效果做讨论。

2、接口定义

三种渐变方式对应的接口如下：

• 线性渐变

linearGradient(value: {angle?: number | string; direction?: GradientDirection; colors: Array<[ResourceColor, number]>; repeating?: boolean;})

参数说明如下：

• • angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值：180，角度为字符串时仅支持类型deg，grad，rad，trun。

  • direction: 线性渐变的方向，设置angle后不生效。默认值：GradientDirection.Bottom

  • colors: 指定某百分比位置处的渐变色颜色,设置非法颜色直接跳过。

  • repeating: 为渐变的颜色重复着色。默认值：false

线性渐变的示例效果如下：

• 角度渐变

sweepGradient(value: {center: [Length, Length]; start?: number | string; end?: number | string; rotation?: number | string; colors: Array<[ResourceColor, number]>; repeating?: boolean;})

仅绘制0-360度范围内的角度，超出时不绘制渐变色，只绘制纯色。参数说明如下：

• • center：为角度渐变的中心点，即相对于当前组件左上角的坐标。

  • start：角度渐变的起点。默认值：0，角度为字符串时仅支持类型deg，grad，rad，trun。

  • end：角度渐变的终点。默认值：0，角度为字符串时仅支持类型deg，grad，rad，trun。

  • rotation: 角度渐变的旋转角度。默认值：0，角度为字符串时仅支持类型deg，grad，rad，trun。

  • colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。

  • repeating: 为渐变的颜色重复着色。默认值：false

说明：

设置为小于0的值时，按值为0处理，设置为大于360的值时，按值为360处理。

当start、end、rotation的数据类型为string，合法的取值为纯数字或纯数字后带"deg"(度)、"rad"(弧度)、"grad"(梯度)、"turn"(圈)单位，例如："90"、 "90deg"、"1.57rad"。

角度渐变的示例效果如下：

• 径向渐变

radialGradient(value: { center: [Length, Length]; radius: number | string; colors: Array<[ResourceColor, number]>; repeating?: boolean })

参数说明如下：

• • center：径向渐变的中心点，即相对于当前组件左上角的坐标。

  • radius：径向渐变的半径。取值范围：[0,+∞)，设置为小于的0值时，按值为0处理。

  • colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。

  • repeating: 为渐变的颜色重复着色。默认值：false

径向渐变的示例效果如下：

3、代码示例

👉🏻 线性渐变代码示例

效果如下：

代码如下（使用了网格布局，一行展示两个效果）：

@Entry@Componentstruct LinearGradientDemo {  build() {    Grid() {      GridItem() {        Column() {          Text('angle: 180')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .linearGradient({          // 0点方向顺时针旋转为正向角度，线性渐变起始角度的默认值为180°          colors: [            [0xf56c6c, 0.0], // 颜色断点1的颜色和比重，对应组件在180°方向上的起始位置            [0xffffff, 1.0], // 颜色断点2的颜色和比重，对应组件在180°方向上的终点位置          ]        })      }      GridItem() {        Column() {          Text('angle: 45')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .linearGradient({          angle: 45, // 设置颜色渐变起始角度为顺时针方向45°          colors: [            [0xf56c6c, 0.0],            [0xffffff, 1.0],          ]        })      }      GridItem() {        Column() {          Text('repeat: true')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .linearGradient({          repeating: true, // 在当前组件内0.3到1.0区域内重复0到0.3区域的颜色渐变效果          colors: [            [0xf56c6c, 0.0],            [0xE6A23C, .3],          ]        })      }      GridItem() {        Column() {          Text('repeat: false')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .linearGradient({          colors: [            [0xf56c6c, 0.0], // repeating默认为false，此时组件内只有0到0.3区域内存在颜色渐变效果            [0xE6A23C, .3],          ]        })      }    }    .columnsGap(10)    .rowsGap(10)    .columnsTemplate('1fr 1fr')    .rowsTemplate('1fr 1fr 1fr')    .width('100%')    .height('100%')  }}

👉🏻 角度渐变代码示例

效果如下：

代码如下：

@Entry@Componentstruct SweepGradientDemo {  build() {    Grid() {      GridItem() {        Column() {          Text('center: 50')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .sweepGradient({          center: [50, 50], // 角度渐变中心点          start: 0, // 角度渐变的起点          end: 360, // 角度渐变的终点。          repeating: true, // 渐变效果在重复          colors: [          // 当前组件中，按照中心点和渐变的起点和终点值,          // 角度区域为0-0.125的范围，从颜色断点1的颜色渐变到颜色断点2的颜色,          // 角度区域0.125到0.25的范围，从颜色断点2的颜色渐变到颜色断点3的颜色,          // 因为repeating设置为true，角度区域0.25到1的范围，重复区域0到0.25的颜色渐变效果            [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应角度为0*360°=0°，角点为中心点            [0xffffff, 0.125], // 颜色断点2的颜色和比重            [0x409EFF, 0.25] // 颜色断点3的颜色和比重          ]        })      }      GridItem() {        Column() {          Text('center: 0')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .sweepGradient({          center: [0, 0], // 角度渐变中心点，当前为组件的左上角坐标          start: 0,          end: 360,          repeating: true,          colors: [          // 当前组件中，因为角度渐变中心是组件的左上角，所以从颜色断点1到颜色断点3的角度范围，恰好可以覆盖整个组件            [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应角度为0*360°=0°            [0xffffff, 0.125], // 色断点2的颜色和比重，对应角度为0.125*360°=45°            [0x409EFF, 0.25] // 色断点3的颜色和比重，对应角度为0.25*360°=90°          ]        })      }      GridItem() {        Column() {          Text('repeat: true')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .sweepGradient({          center: [50, 50],          start: 0,          end: 360,          repeating: true,          colors: [            [0xf56c6c, 0],            [0xffffff, 0.125],            [0x409EFF, 0.25]          ]        })      }      GridItem() {        Column() {          Text('repeat: false')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .sweepGradient({          center: [50, 50],          start: 0,          end: 360,          repeating: false, //只在颜色断点角度覆盖范围内产生颜色渐变效果，其余范围内不重复          colors: [            [0xf56c6c, 0],            [0xffffff, 0.125],            [0x409EFF, 0.25]          ]        })      }    }    .columnsGap(10)    .rowsGap(10)    .columnsTemplate('1fr 1fr')    .rowsTemplate('1fr 1fr 1fr')    .width('100%')    .height(437)  }}

👉🏻 径向渐变代码示例

效果如下：

代码如下：

@Entry@Componentstruct radialGradientDemo {  build() {    Grid() {      GridItem() {        Column() {          Text('center: 50')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .radialGradient({          center: [50, 50], // 径向渐变中心点          radius: 100, // 径向渐变半径          repeating: true, // 允许在组件内渐变范围外重复按照渐变范围内效果着色          colors: [            // 组件内以[50，50]为中心点，在半径为0到12.5的范围内从颜色断点1的颜色渐变到颜色断点2的颜色,            // 在半径为12.5到25的范围内从颜色断点2的颜色渐变到颜色断点3的颜色,            // 组件外其他半径范围内按照半径为0到25的渐变效果重复着色            [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应半径为0*100=0            [0xffffff, 0.125], // 颜色断点2的颜色和比重，对应半径为0.125*100=12.5            [0x409EFF, 0.25] // 颜色断点3的颜色和比重，对应半径为0.25*100=25          ]        })      }      GridItem() {        Column() {          Text('center: 0')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .radialGradient({          center: [0, 0], // 径向渐变中心点，当前为组件左上角坐标          radius: 100,          repeating: true,          colors: [            [0xf56c6c, 0],            [0xffffff, 0.125],            [0x409EFF, 0.25]          ]        })      }      GridItem() {        Column() {          Text('repeat: true')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .radialGradient({          center: [50, 50],          radius: 100,          repeating: true,          colors: [            [0xf56c6c, 0],            [0xffffff, 0.125],            [0x409EFF, 0.25]          ]        })      }      GridItem() {        Column() {          Text('repeat: false')            .fontSize(15)        }        .width(100)        .height(100)        .justifyContent(FlexAlign.Center)        .borderRadius(10)        .radialGradient({          center: [50, 50],          radius: 100,          repeating: false, // 在组件内渐变范围外不重复按照渐变范围内效果着色          colors: [            [0xf56c6c, 0],            [0xffffff, 0.125],            [0x409EFF, 0.25]          ]        })      }    }    .columnsGap(10)    .rowsGap(10)    .columnsTemplate('1fr 1fr')    .rowsTemplate('1fr 1fr 1fr')    .width('100%')    .height('100%')  }}

4、one more thing

一般情况下，除非我们是设计师，否则很难找到一些比较好的渐变色搭配，如果你想找一些合适的渐变色，可以来这里找找 http://www.gradientsguru.com/ （注意，这不是在打广告）

如果你也有其他的好的设计资源网站，欢迎留言~