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属性
780浏览 • 1回复 待解决
HarmonyOS NODE_LINEAR_GRADIENT设置问题
207浏览 • 1回复 待解决
java中如何设置CommonDialog位置?
5253浏览 • 1回复 待解决
如何设置子窗口背景颜色
327浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
2093浏览 • 1回复 待解决
HarmonyOS bindPopup如何设置箭头颜色
215浏览 • 1回复 待解决
Canvas画时候,怎么设置画笔颜色
333浏览 • 1回复 待解决
冷启动性能指标起止点查找方法
780浏览 • 1回复 待解决
HarmonyOS Badge文本颜色设置不生效
194浏览 • 1回复 待解决
如何设置状态栏和导航栏颜色
2840浏览 • 1回复 待解决
如何设置边框颜色为渐变色?
446浏览 • 1回复 待解决
Swiper组件如何设置导航点位置
2277浏览 • 1回复 待解决
如何设置自定义弹窗位置
2007浏览 • 1回复 待解决
设置TextInput组件光标位置在起点
445浏览 • 1回复 待解决
HarmonyOS 如何设置全局Text默认颜色
308浏览 • 1回复 待解决
HarmonyOS 如何设置颜色透明度
611浏览 • 1回复 待解决
如何将背景颜色设置为透明
2570浏览 • 1回复 待解决
TextField怎么给某段文字设置颜色
8922浏览 • 2回复 待解决