linear-gradient设置颜色的起止位置

属性linearGradient暂无法支持以下属性:

1. start和end

2. angleCenter

HarmonyOS
2024-05-26 11:49:20
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
okmwq

使用的核心API

颜色渐变

核心代码解释

在设置渐变的时候,一段是同一个颜色可以设这一段两个端点的颜色相同,比如0.3-0.6的颜色相同。如下代码所示:

Row() 
  .width('90%') 
  .height(50) 
  .linearGradient({ 
    angle: 90, 
    colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0x0000ff, 0.6], [0xffff00, 1.0]] 
  })

但是这样虽然可以实现直线设置颜色的起止位置,但是复杂的场景实现还是不能满足。

一些复杂的场景例如不是直线的渐变有的角度渐变的时候我们可以使用如下方式实现

Row() 
  .width(100) 
  .height(100) 
  .linearGradient({ 
    angle: 135, 
    colors: [[0xff0000, 0.2], [0x0000ff, 0.35], [0xffff00, 0.5]] 
  })

可以通过设置angle角度的方式结合[0x0000ff, 0.3], [0x0000ff, 0.6]这种两个端点的颜色相同的方式来实现一些复杂效果。

Grid() { 
  GridItem() { 
    Text("red:[0.0],yellow:[1.0],angle:90").fontSize(16) 
  }.linearGradient({ 
    angle: 90, 
    colors: [[0xff0000, 0.0], [0xffff00, 1.0]] 
  }) 
 
  GridItem() { 
    Text("yellow:[0.0],red:[1.0],angle:90").fontSize(16) 
  }.linearGradient({ 
    angle: 90, 
    colors: [[0xffff00, 0.0], [0xff0000, 1.0]] 
  }) 
 
  GridItem() { 
    Text("red:[0.0],yellow:[1.0],angle:180").fontSize(16) 
  }.linearGradient({ 
    angle: 180, 
    colors: [[0xff0000, 0.0], [0xffff00, 1.0]] 
  }) 
 
  GridItem() { 
    Text("red:[0.0],yellow:[1.0],angle:0").fontSize(16) 
  }.linearGradient({ 
    angle: 0, 
    colors: [[0xff0000, 0.0], [0xffff00, 1.0]] 
  }) 
 
  GridItem() { 
    Text("red:[0.0],yellow:[1.0],angle:135").fontSize(16) 
  }.linearGradient({ 
    angle: 135, 
    colors: [[0xff0000, 0.0], [0xffff00, 1.0]] 
  }) 
 
  GridItem() { 
    Text("red:[0.0],yellow:[1.0],angle:225").fontSize(16) 
  }.linearGradient({ 
    angle: 225, 
    colors: [[0xff0000, 0.0], [0xffff00, 1.0]] 
  }) 
 
  GridItem() { 
    Text("red:[0.0],yellow:[1.0],angle:45").fontSize(16) 
  }.linearGradient({ 
    angle: 45, 
    colors: [[0xff0000, 0.0], [0xffff00, 1.0]] 
  }) 
 
  GridItem() { 
    Text("red:[0.0],yellow:[1.0],angle:315").fontSize(16) 
  }.linearGradient({ 
    angle: 315, 
    colors: [[0xff0000, 0.0], [0xffff00, 1.0]] 
  }) 
 
  GridItem() { 
    Text("start:[0.0],end:[1.0]").fontSize(16) 
  }.linearGradient({ 
    angle: 135, 
    colors: [[0xff0000, 0.0], [0xff0000, 0.5], [0xffff00, 1.0]] 
  }) 
} 
.width(300) 
.height(300) 
.margin({ top: 20 }) 
.columnsGap(8) 
.rowsGap(8) 
.rowsTemplate("1fr 1fr 1fr") 
.columnsTemplate("1fr 1fr 1fr")

注明适配的版本信息

IDE:DevEco    Studio 4.0.3.600

SDK:HarmoneyOS    4.0.10.15

分享
微博
QQ
微信
回复
2024-05-27 15:39:13
相关问题
linear-gradient不支持start,end属性
378浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
922浏览 • 1回复 待解决
java中如何设置CommonDialog位置?
4137浏览 • 1回复 待解决
如何设置状态栏和导航栏颜色
1197浏览 • 1回复 待解决
TextField怎么给某段文字设置颜色
7789浏览 • 2回复 待解决
如何将背景颜色设置为透明
1023浏览 • 1回复 待解决
如何设置自定义弹窗位置
775浏览 • 1回复 待解决
Swiper组件如何设置导航点位置
623浏览 • 1回复 待解决
冷启动性能指标起止点查找方法
412浏览 • 1回复 待解决
设置状态栏颜色不起作用怎么回事?
991浏览 • 1回复 待解决
状态栏设置颜色失效该怎么办啊?
695浏览 • 1回复 待解决