鸿蒙5.0版开发：ArkTS基础组件（Toggle）

最新推荐文章于 2024-10-06 15:36:13 发布
最新推荐文章于 2024-10-06 15:36:13 发布
阅读量935 收藏 17
点赞数 23
分类专栏： ArkUI 鸿蒙5.0 ArkTS 文章标签： harmonyos 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142444841
版权
ArkUI 同时被 3 个专栏收录
99 篇文章 0 订阅
订阅专栏
鸿蒙5.0
99 篇文章 0 订阅
订阅专栏
ArkTS
95 篇文章 0 订阅
订阅专栏

往期鸿蒙全套实战文章必看：

Toggle

组件提供勾选框样式、状态按钮样式及开关样式。

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

仅当ToggleType为Button时可包含子组件。

接口

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

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数:

参数名参数类型必填参数描述
typeToggleType是开关的样式。
默认值：ToggleType.Switch。
isOnboolean否开关是否打开，true：打开，false：关闭。
默认值：false
从API version 10开始，该参数支持$$双向绑定变量。

ToggleType枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称描述
Checkbox提供单选框样式。
说明：
API version 11开始，Checkbox默认样式由圆角方形变为圆形。
通用属性margin的默认值为：
{
 top: ‘14px’,
 right: ‘14px’,
 bottom: ‘14px’,
 left: ‘14px’
}。
默认尺寸为:
{width:‘20vp’, height:‘20vp’}。
Button提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
默认尺寸为:高为28vp，宽无默认值。
Switch提供开关样式。
说明：
通用属性margin默认值为：
{
 top: ‘6px’,
 right: ‘14px’,
 bottom: ‘6px’,
 left: ‘14px’
}。
默认尺寸为:
{width:‘36vp’, height:‘20vp’}。

属性

除支持通用属性外，还支持以下属性：

selectedColor

selectedColor(value: ResourceColor)

设置组件打开状态的背景颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是组件打开状态的背景颜色。
默认值：‘#ff007dff’

switchPointColor

switchPointColor(color: ResourceColor)

设置Switch类型的圆形滑块颜色。仅对type为ToggleType.Switch生效。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是Switch类型的圆形滑块颜色。
默认值：‘#ffffffff’

switchStyle12+

switchStyle(value: SwitchStyle)

设置Switch类型的样式。仅对type为ToggleType.Switch生效。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueSwitchStyle12+是Switch样式风格。

contentModifier12+

contentModifier(modifier: ContentModifier<ToggleConfiguration>)

定制Toggle内容区的方法。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
modifierContentModifier<ToggleConfiguration>是在Toggle组件上，定制内容区的方法。
modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

SwitchStyle12+对象说明

名称类型必填说明
pointRadiusnumber | Resource否设置Switch类型的圆形滑块半径。
说明：
不支持百分比，设定值小于0时按照默认算法设置，设定值大于等于0时按照设定值设置。
未设定此属性时，圆形滑块半径根据默认算法设置。
默认算法：（组件高度（单位：vp） / 2） - （2vp * 组件高度（单位：vp） / 20vp）。
unselectedColorResourceColor否设置Switch类型关闭状态的背景颜色。
默认值：0x337F7F7F。
pointColorResourceColor否设置Switch类型的圆形滑块颜色。
默认值：‘#FFFFFFFF’。
trackBorderRadiusnumber | Resource否设置Switch类型的滑轨的圆角。
说明：
不支持百分比，设定值小于0时按照默认算法设置，设定值大于组件高度一半时按照组件高度一半设置，其他场合按照设定值设置。
未设定此属性时，滑轨圆角根据默认算法设置。
默认算法：组件高度（单位：vp） / 2。

事件

除支持通用事件外，还支持以下事件：

onChange

onChange(callback: (isOn: boolean) => void)

开关状态切换时触发该事件。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
isOnboolean是为true时，代表状态从关切换为开。false时，代表状态从开切换为关。

ToggleConfiguration12+对象说明

开发者需要自定义class实现ContentModifier接口。

参数名类型默认值说明
isOnbooleanfalse
triggerChangeCallback<boolean>-触发switch选中状态变化。

示例

示例1

// xxx.ets
@Entry
@Component
struct ToggleExample {
  build() {
    Column({ space: 10 }) {
      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Checkbox, isOn: true })
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Button, isOn: true }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn)
        })
      }
    }.width('100%').padding(24)
  }
}

示例2

该示例实现了自定义设置Toggle组件Switch样式的圆形滑块半径、关闭状态的背景颜色、圆形滑块颜色、滑轨的圆角。

// xxx.ets
@Entry
@Component
struct ToggleExample {
  build() {
    Column({ space: 10 }) {
      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
          .selectedColor('#007DFF')
          .switchStyle({
            pointRadius: 15,
            trackBorderRadius: 10,
            pointColor: '#D2B48C',
            unselectedColor: Color.Pink })
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor('#007DFF')
          .switchStyle({
            pointRadius: 15,
            trackBorderRadius: 10,
            pointColor: '#D2B48C',
            unselectedColor: Color.Pink })
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
      }
    }.width('100%').padding(24)
  }
}

示例3

该示例实现了自定义Toggle样式的功能。自定义样式实现了通过按钮切换圆形颜色的功能：点击蓝圆按钮，圆形背景变蓝色，点击黄圆按钮，圆形背景变黄色。

// xxx.ets
class MySwitchStyle implements ContentModifier<ToggleConfiguration> {
  selectedColor: Color = Color.White
  lamp: string = 'string';
  constructor(selectedColor: Color, lamp: string) {
    this.selectedColor = selectedColor
    this.lamp = lamp;
  }
  applyContent() : WrappedBuilder<[ToggleConfiguration]>
  {
    return wrapBuilder(buildSwitch)
  }
}
@Builder function buildSwitch(config: ToggleConfiguration) {
  Column({ space: 50 }) {
    Circle({ width: 150, height: 150 })
      .fill(config.isOn ? (config.contentModifier as MySwitchStyle).selectedColor : Color.Blue)
    Row() {
      Button('蓝'+ JSON.stringify((config.contentModifier as MySwitchStyle).lamp))
        .onClick(() => {
          config.triggerChange(false);
        })
      Button('黄'+ JSON.stringify((config.contentModifier as MySwitchStyle).lamp))
        .onClick(() => {
          config.triggerChange(true);
        })
    }
  }
}

@Entry
@Component
struct Index {
  build() {
    Column({ space: 50 }) {
      Toggle({ type: ToggleType.Switch})
        .enabled(true)
        .contentModifier(new MySwitchStyle(Color.Yellow, '灯'))
        .onChange((isOn: boolean) => {
          console.info('Switch Log:' + isOn)
        })
    }.height('100%').width('100%')
  }
}

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者，不定期分享原创知识。
  • 同时可以期待后续文章ing🚀。 
星星不闪包退1
关注
专栏目录
react-toggle-images:Javascript-React Toggle图像简单页面
05-09
以开发模式安装该应用。\ 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm start 在开发模式下运行该应用。\ 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒...
【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle
m0_62599305的博客
10-22 4006
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。其中对于Toggle独特的属性是，他是当Toggle选中后，所呈现的颜色以上就是今天要讲的内容，本文介绍了单选框Radio和切换按钮Toggle的使用，使用这些组件可以帮助我们快速构建ArkTS的界面。
鸿蒙ArkTS绘制组件：【Circle】
2401_82772199的博客
07-15 317
用于绘制圆形的组件。
CircleProgressView 鸿蒙ArkTS自定义View实现圆形进度条
肤浅失眠中
09-12 394
CircleProgressView 鸿蒙ArkTS自定义View实现圆形进度条
ionic实现带字的toggle滑动组件
09-01
在本文中，我们将深入探讨如何使用Ionic框架来创建一个带文字的Toggle滑动组件。这个组件在实际项目中经常被需求，特别是在需要用户选择两种状态（例如：日/月、开/关）的应用中。传统的Ionic Toggle组件并不直接...
toggle-button：切换按钮ui组件
02-12
开启，关闭기능（toggle기능）을가지는리스트컴포넌트를。 기능요구사항 。이선택이되었는지안되었는지를다안되었는다。 버튼만切换버튼만다。 기능이미지 방법/방법제풀이방법 npm install运行npm install npm...
Toggle组件踩坑学习笔记.7z
11-22
在Unity引擎中，Toggle组件是UI系统的一部分，用于创建用户界面中的开关或复选框功能。Toggle组件在很多场合都非常实用，例如设置选项、选择开关等。本学习笔记将深入探讨Toggle组件及其相关组件ToggleGroup的一些...
react-slide-toggle:React组件对jQuery.slideToggle功能的重新实现
05-14
关于React版本的jQuery.slideToggle。 在每个requestAnimationFrame上设置高度JavaScript动画。 在移动过程中，拨动方向可以反转。 如果您正在寻找基于CSS过渡的替代方法，请改用此方法支持的React版本React版本16.0...
2024年10月HarmonyOS应用开发者高级认证全新题库
qq_56760790的博客
09-30 2747
2024年10月HarmonyOS应用开发者高级认证全新题库，注意事项：切记在考试之外的设备上打开题库进行搜索，防止切屏三次考试自动结束，题目是乱序，每次考试，选项的顺序都不同新版题库：单选题40题 多选题20题 注意选项答案顺序不一样，大家记得看选项后面的值是否一样。
【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自定义组件
Bew1tch的博客
10-06 1014
由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。@Component//状态变量build() {//描述UIColumn(){Text('我是一个自定义组件')Button('我是按钮')@Entry@Componentbuild() {Column(){比如说我们在一个界面上划分为上中下三部分，如头部、身体和腿，我们就可以定义三个组件来分别表示。@Component//状态变量build() {//描述UIColumn(){Text('我是一个自定义组件')
HarmonyOS鸿蒙 Next 实现协调布局效果
肤浅失眠中
10-01 1509
我们前面介绍的三要素当中，可滚动的头部区域 以及粘性头部区域 直接使用普通组件即可，关于可滚动的内容区域 ，下面要着重做一下讲解，因为这块的滑动和CoordinatorLayout在外层的滑动存在着滑动冲突，所以我们在以下情况需要特殊处理:当外部容器未完全展开/收起时,优先处理外部容器的滚动。当外部容器已完全展开/收起时,内部列表可以正常滚动。在滚动过程中,可以平滑地过渡between外部容器和内部列表的滚动。@BuilderText(`${"测试"}${item}`)})
OpenHarmony（鸿蒙南向开发）——小型系统芯片移植指南（一）
鸿蒙开发知识记录
09-30 1245
本文详细介绍如何将OpenHarmony小型系统的linux和LiteOS-A内核移植到新的开发板上，要求读者具有一定的嵌入式系统开发经验。建议先查看 入门指导 ，以了解OpenHarmony软件架构、目录结构、内核子系统和驱动子系统相关知识。当前小型系统已适配的开发板如下表所示
HarmonyOs 查看官方文档使用弹窗
制定持续可量化的目标，不断坚持。
09-29 1053
HarmonyOS跟上网上的视频学习一段时间后，基本也就入门了，但是有一些操作网上没有找到合适教学的视频，这时，大家就需要养成参考官方文档的习惯了，因为官方的开发文档是我们学习深度任何一门语言或框架的途径，官网的开发文档写的足够全面，可以在其中学到一些网上视频所没有的内容。官网文档ArkUI链接：ArkUI简介-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)
鸿蒙星河Next系统从入门到精通：开启智能设备新纪元
进击的码农
10-04 1099
鸿蒙星河Next系统是华为自主研发的分布式操作系统，旨在为各种智能设备提供统一的操作系统解决方案。它具有跨设备协同、分布式软总线、统一UI框架等特点。鸿蒙星河Next系统为开发者提供了广阔的发展空间。通过不断学习和实践，您将能够充分利用鸿蒙星河Next系统的强大功能，开发出更加创新和高效的应用。让我们一起在鸿蒙生态中探索无限可能！欢迎在评论区分享您的学习经验和问题，我们一起讨论鸿蒙星河Next系统的开发技巧！关注微信号：海豹工匠，并回复鸿蒙课程，可以获得最新的视频教程哦。
HarmonyOS第一课 04 应用程序框架基础-习题分析
最新发布
10-06 303
这一节内容比较多，也比较重要，主要讲了UIAbility组件和页面之间的关系,以及他们的声明周期.
鸿蒙harmonyos next flutter通信之EventChannel获取ohos系统时间
我的博客
10-01 649
鸿蒙harmonyos next flutter通信之EventChannel获取ohos系统时间。
关于鸿蒙next 调用系统权限麦克风
qq_41505689的博客
10-02 1181
是获取权限的函数是需要等待的返回值是Promis看见这种返回值的都是需要等待的，如果不想写await 函数名前加async也可以（.then）然后写回调函数，就是请求后返回一个结果，至于你怎么处理根据你的需求来。使用app的时候都清楚，想使用麦克风、摄像头，存储照片等，都需要调用系统的权限，没有手机操作系统权限你也使用不了app所提供的功能，虽然app可以正常打开，但是你需要的功能是没办法使用的。今天把自己在鸿蒙学习中遇到的问题打算记录下来，并整理成自己的学习之路，今天来说一下麦克风的权限的开启。
HarmonyOS NEXT：实现电影列表功能展示界面
ztK63LrD的博客
10-01 1753
时至今日HarmonyOS NEXT早已发布运行了，等其正式推出并大规模商用后，HarmonyOS的历史使命就完成并将退出历史舞台，为用户提供丰富的应用选择。但是Harmony NEXT是在HarmonyOS基础上剔除安卓（AOSP）后的产品，属于全新的手机系统。今天实现一个简单的小案例，从零开始讲解如何通过鸿蒙开发实现一个电影列表功能的案例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值