wordpress网站分享微信群,wordpress 文库插件,o2o网站设计方案,移动版网站模板文章目录 前言一、Radio单选框1.1 创建单选框1.2 添加Radio事件1.3 场景示例二、切换按钮Toggle2.1 创建切换按钮2.2 创建有子组件的Toggle2.3 自定义样式selectedColor属性switchPointColor属性 2.4 添加事件2.5 示例代码 总结 前言
Radio是单选框组件#xff0c;通常用于提… 文章目录 前言一、Radio单选框1.1 创建单选框1.2 添加Radio事件1.3 场景示例二、切换按钮Toggle2.1 创建切换按钮2.2 创建有子组件的Toggle2.3 自定义样式selectedColor属性switchPointColor属性 2.4 添加事件2.5 示例代码 总结 前言
Radio是单选框组件通常用于提供相应的用户交互选择项同一组的Radio中只有一个可以被选中。具体用法请参考Radio。 Toggle组件提供状态按钮样式勾选框样式及开关样式一般用于两种状态之间的切换。具体用法请参考Toggle。 一、Radio单选框
1.1 创建单选框
Radio通过调用接口来创建接口调用形式如下
Radio(options: {value: string, group: string})该接口用于创建一个单选框其中value是单选框的名称group是单选框的所属群组名称。checked属性可以设置单选框的状态状态分别为false和true时设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式不支持自定义颜色和形状。
如果他们在同一个组中他们就是互斥的。即点击一个另一个就会取消。
Radio({ value: Radio1, group: radioGroup }).checked(false)
Radio({ value: Radio2, group: radioGroup }).checked(true)1.2 添加Radio事件
除支持通用事件外Radio通常用于选中后触发某些操作可以绑定onChange事件来响应选中操作后的自定义行为。
参数为boolean即当前的状态 Radio({ value: Radio1, group: radioGroup }).onChange((isChecked: boolean) {if(isChecked) {//需要执行的操作}})Radio({ value: Radio2, group: radioGroup }).onChange((isChecked: boolean) {if(isChecked) {//需要执行的操作}})1.3 场景示例
下面的为鸿蒙软件官方提供的示例大家可以玩一下因为有些东西没学所有只是了解一下
// xxx.ets
import promptAction from ohos.promptAction;
Entry
Component
struct RadioExample {build() {Row() {Column() {Radio({ value: Radio1, group: radioGroup }).checked(true).height(50).width(50).onChange((isChecked: boolean) {if(isChecked) {// 切换为响铃模式promptAction.showToast({ message: Ringing mode. })}})Text(Ringing)}Column() {Radio({ value: Radio2, group: radioGroup }).height(50).width(50).onChange((isChecked: boolean) {if(isChecked) {// 切换为振动模式promptAction.showToast({ message: Vibration mode. })}})Text(Vibration)}Column() {Radio({ value: Radio3, group: radioGroup }).height(50).width(50).onChange((isChecked: boolean) {if(isChecked) {// 切换为静音模式promptAction.showToast({ message: Silent mode. })}})Text(Silent)}}.height(100%).width(100%).justifyContent(FlexAlign.Center)}
}二、切换按钮Toggle
2.1 创建切换按钮
Toggle通过调用接口来创建接口调用形式如下
Toggle(options: { type: ToggleType, isOn?: boolean })该接口用于创建切换按钮其中ToggleType为开关类型包括Button、Checkbox和SwitchisOn为切换按钮的状态接口调用有以下两种形式
创建不包含子组件的Toggle。 当ToggleType为Checkbox或者Switch时用于创建不包含子组件的Toggle
Toggle({ type: ToggleType.Checkbox, isOn: false })
Toggle({ type: ToggleType.Checkbox, isOn: true })下图为type两种类型的展示
其中上为Switch下为CheckBox
2.2 创建有子组件的Toggle
创建包含子组件的Toggle。 当ToggleType为Button时只能包含一个子组件如果子组件有文本设置则相应的文本内容会显示在按钮内部。
要注意只有type为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)2.3 自定义样式
selectedColor属性
其中对于Toggle独特的属性是.selectedColor()他是当Toggle选中后所呈现的颜色
示例代码
Toggle({ type: ToggleType.Button, isOn: true }) {Text(status button).fontColor(#182431).fontSize(12)
}.width(100).selectedColor(Color.Pink)
Toggle({ type: ToggleType.Checkbox, isOn: true }).selectedColor(Color.Pink)
Toggle({ type: ToggleType.Switch, isOn: true }).selectedColor(Color.Pink)switchPointColor属性
通过switchPointColor属性设置Switch类型的圆形滑块颜色仅对type为ToggleType.Switch生效。
Toggle({ type: ToggleType.Switch, isOn: false }).switchPointColor(Color.Pink)
Toggle({ type: ToggleType.Switch, isOn: true }).switchPointColor(Color.Pink)2.4 添加事件
除支持通用事件外Toggle通常用于选中和取消选中后触发某些操作可以绑定onChange事件来响应操作后的自定义行为。
Toggle({ type: ToggleType.Switch, isOn: false }).onChange((isOn: boolean) {if(isOn) {// 需要执行的操作}})2.5 示例代码
下面的为鸿蒙软件官方提供的示例大家可以玩一下因为有些东西没学所有只是了解一下
// xxx.ets
import promptAction from ohos.promptAction;
Entry
Component
struct ToggleExample {build() {Column() {Row() {Text(Bluetooth Mode).height(50).fontSize(16)}Row() {Text(Bluetooth).height(50).padding({left: 10}).fontSize(16).textAlign(TextAlign.Start).backgroundColor(0xFFFFFF)Toggle({ type: ToggleType.Switch }).margin({left: 200, right: 10}).onChange((isOn: boolean) {if(isOn) {promptAction.showToast({ message: Bluetooth is on. })} else {promptAction.showToast({ message: Bluetooth is off. })}})}.backgroundColor(0xFFFFFF)}.padding(10).backgroundColor(0xDCDCDC).width(100%).height(100%)}
}总结
以上就是今天要讲的内容本文介绍了单选框Radio和切换按钮Toggle的使用使用这些组件可以帮助我们快速构建ArkTS的界面
