HarmonyOS 鸿蒙Next中Circle如何设置渐变色

HarmonyOS 鸿蒙Next中Circle如何设置渐变色 如何给Circle组件设置渐变色

5 回复

楼主你试试这个：

@Entry
@Component
struct CircleTest {
  build() {
    Column() {
      Circle({width:100, height: 100})

        .fillOpacity(0)
        .strokeWidth(3)
        .stroke(Color.Red)
        .strokeDashArray([1, 2])

    }.borderRadius(50).linearGradient({
      direction: GradientDirection.Left, // 渐变方向
      repeating: true, // 渐变颜色是否重复
      colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
    })
  }
}

更多关于HarmonyOS 鸿蒙Next中Circle如何设置渐变色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


搜一下，有个 liner 开头的属性

设置了,无效…lingradient，

在HarmonyOS Next中，为Circle组件设置渐变色需使用ArkTS声明式语法。通过定义LinearGradient对象，指定渐变方向、颜色数组和位置参数，将其作为Circle的fill属性值。例如：fill: { LinearGradient: { angle: 0, direction: GradientDirection.EndToStart, colors: ['#FF0000', '#0000FF'] } }。这种方式直接实现圆形填充的渐变效果，无需借助其他图形库。

在HarmonyOS Next中，可以通过设置paint属性为LinearGradient或RadialGradient来为Circle组件实现渐变色效果。以下是具体示例：

// 线性渐变
Circle({ width: 100, height: 100 })
  .fill(
    new LinearGradient({
      angle: 0, // 渐变角度
      colors: [['#FF0000', 0.0], ['#00FF00', 1.0]] // 颜色及位置
    })
  )

// 径向渐变
Circle({ width: 100, height: 100 })
  .fill(
    new RadialGradient({
      center: [50, 50], // 渐变中心点
      radius: 50,       // 渐变半径
      colors: [['#0000FF', 0.0], ['#FFFFFF', 1.0]]
    })
  )

关键参数说明：

  • LinearGradient：通过angle控制渐变方向，colors定义颜色变化
  • RadialGradient：通过center和radius控制渐变范围
  • colors数组格式为[颜色值, 位置]，位置范围0.0-1.0

可根据实际需求调整渐变参数，实现不同的视觉效果。

回到顶部