HarmonyOS鸿蒙Next中如何解决使用linearGradient设置颜色渐变效果错误问题

【问题现象】

问题描述：

使用linearGradient设置颜色渐变效果时，预期是设置颜色0x00990000达到全透明效果，但是实际情况是会出现颜色不透明的现象，而用0x01990000能近似达到全透明效果。如图：

Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
  })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0x01990000, 0.0], [0x80000000, 1.0]]
  })

【背景知识】

1. linearGradient颜色渐变属性可参考颜色渐变。

2. 十六进制色值(如0x80FFFF00)，其中前两位代表透明度(alpha)，后面每两位分别代表(red)(green)(blue)，透明度分为256个等级，即0-255，0就是全透明，255就是不透明，对应着16进制(透明)00->FF(不透明)。

【定位思路】

对问题现象进行复现（这里使用了红色渐变方便看清区别）。由于问题涉及颜色完全透明和完全不透明，因此用两种写法（0x和#的方式）测试完全透明和完全不透明的情况。当透明度为完全透明时，0x00990000和#00990000的颜色显示不一致，0x00990000显示为不透明，#00990000显示为全透明。

进而分析两种写法的区别，可以发现，0x00990000表现为完全不透明，这是因为Harmony OS的规格如此：OHOS中0x格式既支持8位格式，也支持6位格式。所以在处理透明度为0时，0x00其实被视为没有设置透明度，被当成6位数处理，即等价于0x990000。

Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
  })
  .margin({ top: 50 })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0xff990000, 0.0], [0x80000000, 1.0]]
  })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [['# 00990000', 0.0], [0x80000000, 1.0]]
  })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [['# ff990000', 0.0], [0x80000000, 1.0]]
  })

【解决方案】

透明度为完全透明时，0x00990000的写法不支持，将前面的0x改为字符串#，写作#00990000才能正常生效。

当透明度不是完全透明的时候（如0x03），两种写法（0x03990000和#03990000）都可以达到预期效果。

【总结】

OHOS中0x格式既支持8位格式，也支持6位格式，所以在处理透明度为0时，0x00其实被视为没有设置透明度，被当成6位数处理。透明度为完全透明时，0x00的写法需要将前面的0x改为字符串#，写作#00才能正常生效；当透明度不是完全透明的时候（如0x03），两种写法都可以达到预期效果。在需要设置颜色透明度的时候，如果透明度是全透明(0x00)，需要将0x00改为#00的写法。