鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toggle开关组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toggle开关组件

一、操作环境

操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Toggle开关组件

接口

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

参数
参数名 参数类型 必填 默认值 参数描述
type ToggleType - 开关类型。
isOn boolean false 开关是否打开,true:打开,false:关闭。
Toggle({type: ToggleType.Switch})
Toggle({type: ToggleType.Checkbox})
属性
名称 参数 默认值 参数描述
selectedColor ResourceColor - 设置组件打开状态的背景颜色。
switchPointColor ResourceColor - 设置Switch类型的圆形滑块颜色。 说明: 仅对type为ToggleType.Switch生效。
事件
名称 功能描述
onChange(callback: (isOn: boolean) => void) 开关状态切换时触发该事件。

三、示例

@Entry
@Component
struct Index {
  // @ts-ignore
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor(0x39a2db)
          .switchPointColor(0xe5ffffff)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
        Toggle({type: ToggleType.Checkbox, isOn: true })
        Toggle({type: ToggleType.Button}) {
          Text('按钮样式')// 添加一个子组件
            .fontSize(20)
        }
        .size({width: 120, height: 60})
      }
      .width('100%')
    }
    .height('100%')
  }
}
相关推荐
sanzk3 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna8 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析9 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6689 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人9 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人9 小时前
使用 Flutter 绘制一个棋盘
harmonyos
lqj_本人12 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
青瓷看世界14 小时前
华为HarmonyOS打造开放、合规的广告生态 - 插屏广告
华为·harmonyos·广告投放
青瓷看世界14 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力2-管理AR会话
华为·ar·harmonyos·虚拟现实
2301_7955586414 小时前
鸿蒙的进化史
华为·harmonyos