当前位置: 首页 > news >正文

鸿蒙应用开发从入门到实战(十二):ArkUI组件ButtonToggle

大家好,我是潘Sir,持续分享IT技术,帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!

ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。

一、按钮Button

1.1 概述

Button为按钮组件,通常用于响应用户的点击操作。

1.2 参数

Button组件有两种使用方式,分别是不包含子组件包含子组件,两种方式下,Button 组件所需的参数有所不同,下面分别介绍

1.2.1 不包含子组件

不包含子组件时,Button组件所需的参数如下

Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
  • label

label为按钮上显示的文字内容。

  • options.type

options.type为按钮形状,该属性的类型ButtonType,可选的枚举值有

名称 描述 效果
ButtonType.Capsule 胶囊形状 1胶囊形状
ButtonType.Circle 圆形 2圆形
)
ButtonType.Normal 普通形状 3普通形状
  • options.stateEffect

options.stateEffect表示是否开启点击效果,点击效果如下

4点击效果

1.2.2 包含子组件

子组件会作为按钮上显示的内容,可以是图片、文字等。这种方式下,Button组件就不在需要label参数了,具体如下

Button(options?: {type?: ButtonType, stateEffect?: boolean})

示例代码:

拷贝icon_new_folder.png到resources/base/media目录下

在component目录下新建button目录,新建ButtonParameter.ets文件

@Entry
@Component
// Button按钮参数
struct ButtonParameter {build() {Column({ space: 50 }) {//1、不包含子组件Button('按钮', { type: ButtonType.Capsule, stateEffect: false }).fontSize(25).width(150).height(60)//2、包含子组件Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 5 }) {Image($r('app.media.icon_new_folder')).width(30).height(30)Text('新建').fontColor(Color.White).fontSize(25).fontWeight(500)}}.height(60).width(150)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

1.3 常用属性

1.3.1 背景颜色

按钮的颜色可使用backgroundColor()方法进行设置,例如

Button('绿色按钮').backgroundColor(Color.Green)

1.3.2 边框圆角

按钮的边框圆角大小可使用borderRadius()方法进行设置,例如

Button('圆角按钮', { type: ButtonType.Normal }).borderRadius(10)

示例代码:

button目录下新建ButtonAttributePage.ets文件

@Entry
@Component
// Button按钮属性
struct ButtonAttributePage {build() {Row() {// 1、背景颜色 backgroundColorColumn({ space: 50 }) {Button('绿色按钮').fontSize(25).width(150).height(60).backgroundColor(Color.Green)// 2、边框圆角 borderRadiusButton('圆角按钮', { type: ButtonType.Normal }).fontSize(25).width(150).height(60).borderRadius(20)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}
}

1.4 常用事件

对于Button组件而言,最为常用的就是点击事件,可以通过onClick()方法为按钮绑定点击事件,该方法的参数为一个回调函数,当按钮被点击时,就会触发该回调函数,例如

Button('点击事件').onClick(() => {console.log('我被点击了')
})

示例代码:

在button目录下新建ButtonEventPage.ets文件

@Entry
@Component
// Button按钮事件
struct ButtonEventPage {build() {Row() {// 1、点击事件Column({ space: 50 }) {Button('点击事件').fontSize(25).width(150).height(60).onClick(() => {console.log('我被点击了')})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}
}

二、切换按钮Toggle

2.1 概述

Toggle为切换按钮组件,一般用于两种状态之间的切换,例如下图中的蓝牙开关。

4toggle

2.2 参数

Toggle组件的参数定义如下

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

type属性用于设置Toggle组件的类型,可通过ToggleType枚举类型进行设置,可选的枚举值如下

名称 描述 效果
ToggleType.Switch 开关 5switch
ToggleType.Checkbox 复选框 6checkbox
ToggleType.Button 按钮 7button
|
  • isOn

isOn属性用于设置Toggle组件的状态,例如

8开关状态

示例代码

在component目录下新建toggle目录,新建ToggleParameter.ets 文件

@Entry
@Component
// 切换按钮Toggle参数
struct ToggleParameter {build() {// type参数设置类型;ToggleType值:开关ToggleType.Switch 复选框ToggleType.Checkbox 按钮ToggleType.Button// isON设置组件状态Column({ space: 20 }) {Row({ space: 20 }) {Toggle({ type: ToggleType.Switch, isOn: false })Toggle({ type: ToggleType.Switch, isOn: true })}Row({ space: 20 }) {Toggle({ type: ToggleType.Checkbox, isOn: false })Toggle({ type: ToggleType.Checkbox, isOn: true })}Row({ space: 20 }) {Toggle({ type: ToggleType.Button, isOn: false }) {Text('button')}Toggle({ type: ToggleType.Button, isOn: true }) {Text('button')}}}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

2.3 常用属性

2.3.1 选中状态背景色

可使用selectedColor()方法设置Toggle组件在选中(或打开)状态下的背景色,例如

9选中颜色

2.3.2 Switch滑块颜色

可使用设置switchPointColor()方法设置Switch类型的Toggle组件中的圆形滑块颜色,例如

10滑块颜色

示例代码:

在toggle目录下新建ToggleAttributePage.ets文件

@Entry
@Component
// 切换按钮Toggle常用属性
struct ToggleAttributePage {build() {Row() {Column({ space: 50 }) {//1.选中状态背景色 selectedColorRow({ space: 20 }) {Toggle({ type: ToggleType.Switch, isOn: true }).selectedColor(Color.Green)Toggle({ type: ToggleType.Checkbox, isOn: true }).selectedColor(Color.Green)Toggle({ type: ToggleType.Button, isOn: true }) {Text('button')}.selectedColor('#66008000')}//2.Switch圆形滑块颜色 switchPointColorToggle({ type: ToggleType.Switch, isOn: true }).selectedColor(Color.Green).switchPointColor(Color.Orange)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}
}

2.4 常用事件

Toggle组件常用的事件为change事件,每当Toggle组件的状态发生变化,就会触发change事件。开发者可通过onChange()方法为Toggle组件绑定change事件,该方法参数为一个回调函数,具体定义如下

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

Toggle组件的状态由关闭切换为打开时,isOntrue,从打开切换为关闭时,isOnfalse

示例代码:

拷贝素材到resources/base/media目录下,img_light.png、img_dark.png

在toggle目录下新建LightPage.ets

@Entry
@Component
struct LightPage {@State isOn: boolean = false;build() {Column({ space: 20 }) {if (this.isOn) {Image($r('app.media.img_light')).height(300).width(300).borderRadius(20)} else {Image($r('app.media.img_dark')).height(300).width(300).borderRadius(20)}Toggle({ type: ToggleType.Switch, isOn: this.isOn }).width(60).height(30).onChange((isOn) => {this.isOn = isOn;})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容,防止迷路,欢迎关注!

http://www.hskmm.com/?act=detail&tid=14351

相关文章:

  • Spring框架中的注解主要有哪些
  • 从视觉、文案到交互:三步彻底去除产品AI味
  • 理解WPF Stylet中Command={s:Action 方法名}的设计与实现
  • 帆软报表下拉框高度(JS添加css样式方式)调整
  • 探索 12 种 3D 文件格式:综合指南
  • 剑指offer-32、把数组排成最⼩的数
  • WPF 一个Label标签中的文字 Binding两个值
  • Session和Cookie的定义是什么?他们之间有什么区别?
  • 使用C++编写的一款射击五彩敌人的游戏 - 详解
  • CG-65 剖面细管式温度传感器 可实时监测不同土层温度动态
  • list集合根据某字段获取某个对象
  • .NET STS 版本支持 24 个月
  • 后缀数组基础 Suffix Array
  • @Param的作用
  • 后端应该对前端数据来源渠道进行验证
  • 思念比爱更深刻
  • 数据库操作的方法签名
  • 完整教程:第33章 AI在教育领域的应用
  • 易软通openWMS - 功能齐全的开源WMS
  • C# 中的 ReferenceEquals 方法 - 教程
  • 遇到一件循环导入事件
  • flask实现后端接口的封装和开发部分
  • 上海这样的地段简直是逆天
  • 【GitHub每日速递 250923】 Google 又放大招!TimesFM 2.5 参数减半,预测更准更快
  • 具身智能机器人架构:人形机器人系统架构深度拆解
  • 卓驭,欧洲无绝境
  • 下周审核4家IPO,2家再融资。其中两家IPO企业于在审期间调减募资规模
  • 280亿国产AI独角兽,惹怒“地表最强法务部”
  • 读人形机器人20财富再分配
  • Java 与人工智能的深度融合:从数据到推理服务