HarmonyOS Next开发学习手册——添加组件(切换按钮 (Toggle))

Toggle组件提供状态按钮样式、勾选框样式和开关样式,一般用于两种状态之间的切换。

创建切换按钮

Toggle通过调用接口来创建,接口调用形式如下:

Toggle(options: { type: ToggleType, isOn?: boolean })

其中,ToggleType为开关类型,包括Button、Checkbox和Switch,isOn为切换按钮的状态。

API version 11开始,Checkbox默认样式由圆角方形变为圆形。

接口调用有以下两种形式:

  • 创建不包含子组件的Toggle。

当ToggleType为Checkbox或者Switch时,用于创建不包含子组件的Toggle:

Toggle({ type: ToggleType.Checkbox, isOn: false })
Toggle({ type: ToggleType.Checkbox, isOn: true })

Toggle({ type: ToggleType.Switch, isOn: false })
Toggle({ type: ToggleType.Switch, isOn: true })

  • 创建包含子组件的Toggle。

    当ToggleType为Button时,只能包含一个子组件,如果子组件有文本设置,则相应的文本内容会显示在按钮上。

Toggle({ type: ToggleType.Button, isOn: false }) {
  Text('status button')
    .fontColor('#182431')
    .fontSize(12)
}.width(100)
Toggle({ type: ToggleType.Button, isOn: true }) {
  Text('status button')
    .fontColor('#182431')
    .fontSize(12)
}.width(100)

自定义样式

  • 通过selectedColor属性设置Toggle打开选中后的背景颜色。
Toggle({ type: ToggleType.Button, isOn: true }) {
  Text('status button')
  .fontColor('#182431')
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值