HarmonyOS鸿蒙Next中如何禁用Radio、checkbox等组件?

HarmonyOS鸿蒙Next中如何禁用Radio、checkbox等组件?

4 回复

尊敬的开发者你好：

【背景知识】

Checkbox 提供多选框组件，通常用于某选项的打开或关闭，官方已提供API enabled 设置为 false 就可以实现禁用效果。

enabled 禁用控制，设置组件是否可交互。可在交互状态下响应点击事件、触摸事件、拖拽事件、按键事件、焦点事件、鼠标事件、悬浮事件、无障碍悬浮事件、手势事件和焦点轴事件。

【解决方案】

将 enabled 属性设置为 false 即可禁用 Checkbox。

代码示例请参考：示例3 自定义多选框样式。

【常见FAQ】

Q：enabled 属性常用的组件。

A：Radio 组件、Button 组件、TextArea 组件等。

更多关于HarmonyOS鸿蒙Next中如何禁用Radio、checkbox等组件?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


通用属性enabled即可。

Radio().enabled(false)

在HarmonyOS鸿蒙Next中，禁用Radio、Checkbox等组件可以通过设置enabled属性为false来实现。在ArkUI框架中，直接修改组件的enabled属性即可禁用该组件。例如，对于Radio组件，可以在布局文件中设置Radio({ enabled: false })；对于Checkbox组件，同样可以通过Checkbox({ enabled: false })来禁用。禁用后，用户将无法与这些组件进行交互。

在HarmonyOS Next中禁用Radio/Checkbox等组件的方法如下：

  1. 对于ArkUI声明式开发范式：
  • 使用enabled属性控制禁用状态
Radio({ value: 'option1' }).enabled(false)
Checkbox({ name: 'check1' }).enabled(false)
  1. 对于类Web开发范式：
  • 使用disabled属性
<input type="radio" disabled>
<input type="checkbox" disabled>
  1. 通过状态变量控制：
@State isDisabled: boolean = true

Radio({ value: 'option1' }).enabled(!this.isDisabled)

禁用后组件会呈现灰色不可点击状态，同时会阻止用户交互事件。

回到顶部