HarmonyOS 鸿蒙Next如何修改颜色透明度

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何修改颜色透明度

请问在arkTs中如何设置颜色的透明度呢？

Harmonyos Next教程
9 回复 
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Second {
  build() {
    Column() {
      Text('测试1').backgroundColor('rgba(0, 0, 0, 0.5)') //0.5指半透明
      Text('测试2').backgroundColor('#80000000') //最前面的 80 表示十六进制的半透明，如果是00就是不透明，ff就是完全透明后面的颜色也就没用了
    }
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

00 才是完全透明吧，ff就是完全不透明

你是对的，我打错了。不过影响不大，一般开发过程中自己就试出来了。

rgba(r, g, b, 0.5)
static alpha(color: Resource, opacity: number): ResourceColor {
    let colorValue = getContext().resourceManager.getColorSync(color.id)
    // 将透明度限制在0到1之间
    const clampedOpacity = Math.max(0, Math.min(1, opacity));

<span class="hljs-comment"><span class="hljs-comment">// 将颜色值转换为RGBA格式</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> red = (colorValue &gt;&gt; <span class="hljs-number"><span class="hljs-number">16</span></span>) &amp; <span class="hljs-number"><span class="hljs-number">0xff</span></span>;
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> green = (colorValue &gt;&gt; <span class="hljs-number"><span class="hljs-number">8</span></span>) &amp; <span class="hljs-number"><span class="hljs-number">0xff</span></span>;
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> blue = colorValue &amp; <span class="hljs-number"><span class="hljs-number">0xff</span></span>;

<span class="hljs-comment"><span class="hljs-comment">// 计算带透明度的颜色值</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> alpha = <span class="hljs-built_in"><span class="hljs-built_in">Math</span></span>.round(clampedOpacity * <span class="hljs-number"><span class="hljs-number">255</span></span>);
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> rgbaColor = ((alpha &amp; <span class="hljs-number"><span class="hljs-number">0xff</span></span>) &lt;&lt; <span class="hljs-number"><span class="hljs-number">24</span></span>) | (red &lt;&lt; <span class="hljs-number"><span class="hljs-number">16</span></span>) | (green &lt;&lt; <span class="hljs-number"><span class="hljs-number">8</span></span>) | blue;

<span class="hljs-comment"><span class="hljs-comment">// 使用 &gt;&gt;&gt; 0 确保返回无符号整数</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> rgbaColor &gt;&gt;&gt; <span class="hljs-number"><span class="hljs-number">0</span></span>;

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

调用方式：ColorUtils.alpha($r(‘app.color.n_10’), 0.6)

你这个alpha = 0 的时候，不太行啊。我用let color = rgba(255, 255, 255, ${alpha})就是可以的

颜色值："#00123456"，前两位00就是透明度，后面6位是颜色。

在HarmonyOS鸿蒙Next中，修改颜色透明度可以通过ArkTS的opacity属性实现。从API Version 7开始，支持在组件中设置不透明度，参数值范围从0（完全透明）到1（完全不透明）。例如，opacity(0.5)将组件设置为半透明状态。如果需要在页面或窗口级别设置透明度，可以通过调整窗口或页面的背景色，使用带有透明度通道的颜色代码（如#RRGGBBAA）来实现。如果问题依旧没法解决，请加我微信，我的微信是itying888。

回到顶部