HarmonyOS鸿蒙Next中渐变效果的实现与应用

HarmonyOS鸿蒙Next中渐变效果的实现与应用

Android代码:

<gradient 
    android:angle="90" 
    android:endColor="#00F8F8F8" 
    android:startColor="#99000000" 
/>

.linearGradient({
    angle: 0,
    direction: GradientDirection.Top,
    colors: [
        ["#00F8F8F8", 0.0],
        ["#99000000", 1.0]
    ]
});

我发现鸿蒙实现效果达不到Android 的这个效果，应该如何优化？


更多关于HarmonyOS鸿蒙Next中渐变效果的实现与应用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该属性是可以实现渐变的,您这边colors的层级嵌套错位了：

.linearGradient({
    // angle: 0,
    direction: GradientDirection.Top,
    colors: [
        ["#00F8F8F8", 0.0],
        ["#99000000", 1.0],
    ]
})

direction属性设置线性渐变的方向，设置angle后不生效，相关参数参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-gradient-color-0000001815767728#ZH-CN_TOPIC_0000001815767728__lineargradient

更多关于HarmonyOS鸿蒙Next中渐变效果的实现与应用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，渐变效果可以通过ArkUI框架中的LinearGradient和RadialGradient组件实现。LinearGradient用于创建线性渐变，而RadialGradient用于创建径向渐变。

线性渐变（LinearGradient）：

  • LinearGradient通过指定起始点和结束点来定义渐变方向。可以设置多个颜色停靠点（color stops）来控制渐变的颜色过渡。
  • 示例代码：
@Entry
@Component
struct LinearGradientExample {
  build() {
    Column() {
      Text('线性渐变')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .linearGradient({
          angle: 90,
          colors: [['#FF0000', 0], ['#00FF00', 0.5], ['#0000FF', 1]]
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

径向渐变（RadialGradient）：

  • RadialGradient通过指定圆心和半径来定义渐变范围。同样可以设置多个颜色停靠点来控制颜色过渡。
  • 示例代码：
@Entry
@Component
struct RadialGradientExample {
  build() {
    Column() {
      Text('径向渐变')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .radialGradient({
          center: [0.5, 0.5],
          radius: 0.5,
          colors: [['#FF0000', 0], ['#00FF00', 0.5], ['#0000FF', 1]]
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

这些渐变效果可以应用于文本、背景、边框等UI元素，以增强界面的视觉效果。通过调整颜色停靠点和渐变参数，可以实现多样化的渐变效果。

在HarmonyOS鸿蒙Next中，渐变效果可以通过ShapeDrawable或GradientDrawable实现。使用GradientDrawable时，可以通过setGradientType设置渐变类型（线性、径向、扫描），并通过setColors定义渐变色。例如，线性渐变可通过setOrientation设置方向。在UI布局中，将GradientDrawable应用于View的背景属性即可实现渐变效果。渐变效果常用于按钮、背景等元素，提升视觉体验。

回到顶部