开天辟地 HarmonyOS(鸿蒙) - UI: 颜色相关

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - UI: 颜色相关

示例如下:

pages\ui\ColorDemo.ets

/*
 * 颜色相关
 */

import { TitleBar } from '../TitleBar';

@Entry
@Component
struct ColorDemo {

  build() {
    Column({ space: 10 }) {
      TitleBar()

      // Color 类型的枚举(White, Black, Blue, Brown, Gray, Green, Grey, Orange, Pink, Red, Yellow, Transparent)
      Column().width(200).height(50)
        .backgroundColor(Color.Blue)

      // number 类型的 rgb
      Column().width(200).height(50)
        .backgroundColor(0x0000ff)

      // number 类型的 argb
      Column().width(200).height(50)
        .backgroundColor(0xff0000ff)

      // string 类型的 rgb
      // string 类型的 argb
      // string 类型的 ‘rgb(0, 0, 255)’
      // string 类型的 ‘rgba(0, 0, 255, 255)’
      Column().width(200).height(50)
        .backgroundColor('#ff0000ff')

      // Resource 类型的颜色资源
      // 先在 /entry/src/main/resources/base/element/color.json 配置如下
      // {
      //   "color": [
      //     {
      //       "name": "color_demo",
      //       "value": "#0000FF"
      //     }
      //   ]
      // }
      // 然后通过 $r("app.color.color_demo") 引用此颜色资源
      Column().width(200).height(50)
        .backgroundColor($r("app.color.color_demo"))

      // opacity() - 不透明度(0 - 1 之间)
      Column().width(200).height(50)
        .backgroundColor(Color.Blue)
        .opacity(0.1)
    }
  }
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @ 2025-02-06 08:55  webabcd  阅读(152)  评论(0)    收藏  举报