ArkUI 学习之阴影接口/颜色渐变接口
一、阴影接口
阴影接口shadow可以为当前组件添加阴影效果，该接口支持两种类型参数，开发者可配置ShadowOptions自定义阴影效果。
！！！注意：ShadowOptions模式下，当radius = 0 或者 color 的透明度为0时，无阴影效果。
1. ShadowOptions
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
@Entry @Component struct TabsIndex { build() { Row() { Column() { /** 样式一 */ Column() { Text('shadowOption').fontSize(12) } .width(100) .aspectRatio(1) .margin(10) .justifyContent(FlexAlign.Center) .backgroundColor(Color.White) .borderRadius(20) .shadow({ radius: 10, color: Color.Gray }) //指定模糊半径，阴影的颜色 /** 样式二 */ Column() { Text('shadowOption').fontSize(12) } .width(100) .aspectRatio(1) .margin(10) .justifyContent(FlexAlign.Center) .backgroundColor('#a8a888') .borderRadius(20) .shadow({ radius: 10, color: Color.Gray, offsetX: 20, offsetY: 20 }) //指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。 } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } .height('100%') } }
2. ShadowStyle
入参类型为ShadowStyle时，可指定不同阴影样式。
@Entry @Component struct TabsIndex { build() { Row() { Column() { /** 样式一 */ Column() { Text('shadowOption').fontSize(12) } .width(100) .aspectRatio(1) .margin(10) .justifyContent(FlexAlign.Center) .backgroundColor(Color.White) .borderRadius(20) .shadow(ShadowStyle.OUTER_DEFAULT_MD) //指定中阴影 /** 样式二 */ Column() { Text('shadowOption').fontSize(12) } .width(100) .aspectRatio(1) .margin(10) .justifyContent(FlexAlign.Center) .backgroundColor('#a8a888') .borderRadius(20) .shadow(ShadowStyle.OUTER_FLOATING_MD) //指定浮动中阴影 } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } .height('100%') } }
二、颜色渐变接口
通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。
1. linearGradient
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
linearGradient 为当前组件添加线性渐变的颜色渐变效果。
@Entry @Component struct TabsIndex { 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: fasle').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%') } }
2. sweepGradient
sweepGradient 为当前组件添加角度渐变的颜色渐变效果。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"。
@Entry @Component struct TabsIndex { 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) } }
3. radialGradient
radialGradient 为当前组件添加径向渐变的颜色渐变效果。
radialGradient(value: { center: [Length, Length]; radius: number | string; colors: Array<[ResourceColor, number]>; repeating?: boolean })
- center：径向渐变的中心点，即相对于当前组件左上角的坐标。
- radius：径向渐变的半径。取值范围：[0,+∞)
❗️说明：
设置为小于的0值时，按值为0处理。
- colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。
- repeating: 为渐变的颜色重复着色。默认值：false
@Entry @Component struct TabsIndex { 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%') } }
浙公网安备 33010602011771号