HarmonyOS 鸿蒙Next 如何自定义 Toggle 样式

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何自定义 Toggle 样式

Toggle({ type: ToggleType.Switch, isOn: this.data.data == “open” })// .switchPointColor("#767577")
.width(30)
.height(14)
.borderColor("#767577")
.selectedColor("#8c7fee")
.switchStyle({
pointRadius: 10,
trackBorderRadius: 50,
pointColor: ‘#F4F3F4’,
unselectedColor: “#767577”
})
.margin({ right: 10 })
.onChange((isOn: boolean) => {
this.data.data = isOn ? “open” : “close”
})

目前的表现，近似UI的设计，但圆形的切换img，纯色的，能否对其进行更多属性的设置，如增加立体感的边框或阴影


更多关于HarmonyOS 鸿蒙Next 如何自定义 Toggle 样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 如何自定义 Toggle 样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，自定义Toggle样式可以通过修改XML布局文件以及对应的资源文件来实现。以下是一个基本的步骤：

  1. 定义Toggle布局： 在res/layout目录下创建一个新的XML布局文件，定义Toggle的外观。可以使用Toggle控件，并通过设置其ohos:background_element等属性来指定背景图片或颜色。

  2. 设置Toggle状态资源： 在res/drawable目录下创建Toggle在不同状态下的资源文件，例如toggle_on.xml和toggle_off.xml，通过定义shape、color等属性来设定Toggle的显示样式。

  3. 绑定资源到Toggle： 在Toggle的布局文件中，通过ohos:selected_drawable和ohos:normal_drawable等属性，将之前定义的资源文件绑定到Toggle的选中与未选中状态。

  4. 在代码中控制Toggle： 在JavaScript（JS）或ETS（Extensible TypeScript）代码中，可以通过设置Toggle的checked属性来控制其开关状态，同时监听其change事件来执行相应的逻辑。

  5. 应用主题与样式： 如果需要，可以在config.json中定义全局或局部的样式与主题，确保Toggle的自定义样式在整个应用中一致。

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

回到顶部