HarmonyOS 鸿蒙Next Toggle空间的勾颜色怎么修改

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

HarmonyOS 鸿蒙Next Toggle空间的勾颜色怎么修改

深色代码主题
复制
Toggle({ type: ToggleType.Checkbox, isOn: false })
.width(14)
.height(14)
.selectedColor("#5BA151")

可以修改选择后的背景颜色，把白色的勾改成黑色的，怎么改呢？


更多关于HarmonyOS 鸿蒙Next Toggle空间的勾颜色怎么修改的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以通过创建包含子组件的Toggle的方式来实现把白色的勾改成黑色的，demo 如下：

深色代码主题
复制
@State isOn :boolean = false
Toggle({ type: ToggleType.Button, isOn: this.isOn }) {
  Image(this.isOn? $r('app.media.icon'):$r('app.media.ic_home_focus')).width(30).height(30)
}.width(30)
.height(30)
.onChange(()=>{
  this.isOn = !this.isOn
})
$r('app.media.icon')：未选择状态的按钮图片，白色背景，黑色边框。
$r('app.media.ic_home_focus')：选择状态的按钮图片，白色的背景，黑色的勾。

以上图片需要美工提供

更多关于HarmonyOS 鸿蒙Next Toggle空间的勾颜色怎么修改的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，修改Next Toggle空间（假设这里指的是ToggleButton的选中状态指示器颜色）的勾颜色，可以通过自定义样式和主题来实现。具体操作步骤如下：

  1. 定义资源文件：在resources/base/xml目录下创建一个新的XML资源文件，比如colors.xml，在其中定义所需的颜色资源。
<resources>
    <color name="toggle_check_color">#FF00FF00</color> <!-- 绿色勾选 -->
</resources>
  1. 自定义样式：在resources/base/values目录下找到或创建一个styles.xml文件，为ToggleButton定义一个新的样式。
<style name="CustomToggleButtonStyle">
    <item name="checkMarkDrawable">@drawable/custom_check_mark</item> <!-- 引用自定义drawable -->
    <!-- 或者直接设置颜色（如果系统支持） -->
    <!-- <item name="checkMarkTint">@color/toggle_check_color</item> -->
</style>

注意：若checkMarkTint属性不支持，则需创建custom_check_mark.xml drawable文件，在其中使用vector定义带颜色的勾选图标。

  1. 应用样式：在布局文件中应用该样式到ToggleButton。
<ToggleButton
    style="@style/CustomToggleButtonStyle"
    ... />

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部