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

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

1. start和end

2. angleCenter

HarmonyOS

liqi399

2024-05-26 11:49:20

浏览

回答 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]] 
  })1.
2.
3.
4.
5.
6.
7.

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

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

Row() 
  .width(100) 
  .height(100) 
  .linearGradient({ 
    angle: 135, 
    colors: [[0xff0000, 0.2], [0x0000ff, 0.35], [0xffff00, 0.5]] 
  })1.
2.
3.
4.
5.
6.
7.

可以通过设置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")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.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.