HarmonyOS鸿蒙Next中怎么自定义复选框的颜色

HarmonyOS鸿蒙Next中怎么自定义复选框的颜色 怎么自定义复选框的颜色，适配应用的主题色？

6 回复

  • Checkbox.selectedColor(value: ResourceColor)

    设置多选框选中状态颜色。
  • Checkbox.unselectedColor(value: ResourceColor) 设置多选框非选中状态的边框颜色。

文档：Checkbox-按钮与选择-ArkTS组件-ArkUI（方舟UI框架）

更多关于HarmonyOS鸿蒙Next中怎么自定义复选框的颜色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


学习了

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17，

使用 CSS 变量（CSS Variables）实现动态主题切换

在HarmonyOS Next中，自定义复选框颜色可直接在Checkbox组件上通过markColor（勾选标记颜色）和fillColor（填充背景色）属性设置，例如：Checkbox().markColor('#FF0000').fillColor('#00FF00')。也可使用@Styles提取公共样式或自定义组件。

在HarmonyOS Next中，自定义复选框颜色可通过 Checkbox 组件的 selectedColor、unselectedColor 和 mark 属性实现。适配应用主题色通常使用资源引用或动态绑定主题色变量。

@Entry
@Component
struct Demo {
  @State isChecked: boolean = false
  // 主题色变量（可从AppStorage或状态管理获取）
  @State themeColor: string = '#007AFF'

  build() {
    Column() {
      Checkbox()
        .select(this.isChecked)
        .selectedColor(this.themeColor)          // 选中背景色
        .unselectedColor(Color.Gray)            // 未选中边框色
        .mark({ strokeColor: Color.White })     // 勾选标记颜色
        .onChange((value: boolean) => {
          this.isChecked = value
        })
    }
  }
}

若需全局统一样式，可在自定义组件中封装并引用主题资源文件（$r('app.color.theme_primary')），或在 @Styles 中定义共享属性。通过切换主题色变量即可实时适配不同主题。

回到顶部