List组件如何设置两端的渐变效果

List组件如何设置两端的渐变效果

HarmonyOS
2024-01-21 12:26:25
2669浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
ssschangyu

List组件本身不支持设置两端渐变,但是可以结合LinearGradient对象实现效果。

代码示例

@Entry 
@Component 
struct ListExample { 
  @State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9] 
  private scroller: Scroller = new Scroller() 
 
  build() { 
    Stack() { 
      List({ space: 10 }) { 
        ForEach(this.arr, (item: string) => { 
          ListItem() { 
            Text("中国潮色") 
              .width(100) 
              .height(64) 
              .fontColor(Color.White) 
              .backgroundColor(Color.Black) 
              .textAlign(TextAlign.Center) 
          } 
        }, (item: string) => item) 
      } 
      .listDirection(Axis.Horizontal) 
      .scrollBar(BarState.Off) 
      .padding({ top: 20, bottom: 20 }) 
      .width("80%") 
      .height("100%") 
 
      Stack() { 
 
      } 
      .linearGradient({ 
        angle: 90, 
        colors: [[0x000000, 0.0], ['rgba(0,0,0,0)', 0.1], ['rgba(0,0,0,0)', 0.9], [0x000000, 1.0]] 
      }) 
      .width("80%") 
      .height("100%") 
      .hitTestBehavior(HitTestMode.None) 
    }.height(100).width('100%').backgroundColor(Color.Black) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.

参考链接

颜色渐变

分享
微博
QQ
微信
回复
2024-01-22 14:56:55


相关问题
如何list组件中实现两端渐变
1045浏览 • 1回复 待解决
Text如何实现文本段落两端对齐?
944浏览 • 1回复 待解决
HarmonyOS Text两端对齐未实现
916浏览 • 1回复 待解决
HarmonyOS web与H5两端数据交互
2092浏览 • 1回复 待解决
HarmonyOS Canvas设置渐变色没有效果
821浏览 • 1回复 待解决
Button组件如何设置渐变背景色
3745浏览 • 1回复 待解决
List组件如何实现多列效果
2938浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
1148浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果
1062浏览 • 1回复 待解决
组件如何设置模糊效果
2554浏览 • 1回复 待解决
如何设置组件透明效果
2835浏览 • 1回复 待解决
List组件如何设置多列
2790浏览 • 1回复 待解决
HarmonyOS 渐变遮罩效果如何实现?
961浏览 • 1回复 待解决