13. 快速上手！HarmonyOS4.0 Form（Checkbox_CheckboxGroup_Radio_TextInput_TextArea）表单详解
13. 快速上手！HarmonyOS4.0 Form（Checkbox_CheckboxGroup_Radio_TextInput_TextArea）表单详解
本章内容概要
Checkbox
提供多选框组件，通常用于某选项的打开或关闭。
Checkbox 参数
参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
name | string | 否 | 多选框名称。 |
group | string | 否 | 多选框的群组名称。 |
说明： | |||
未配合使用CheckboxGroup组件时，此值无用。 |
案例演示
定义一个数据源，用于多选
@State fruits:string[] =['苹果','荔枝','香蕉','芒果','水蜜桃']Foreach 遍历数据
Row(){
Flex({wrap:FlexWrap.Wrap, justifyContent:FlexAlign.SpaceBetween, alignItems:ItemAlign.Center}){
ForEach(this.fruits, (item)=>{
Row(){
Text(item).fontSize(20)
Checkbox({name:item, group:'fruits'})
}
})
}
}效果演示
解释说明
代码中 用Flex 包裹了foreach， 主要的原因是 Flex 是支持换行的 ， 因此这么操作
另外 Text 组件 和 Checkbox 组件用 Row 包裹的原因 ，主要是防止 justifyContent:FlexAlign.SpaceBetween 的影响
基础布局搭建完成 之后， 我们可以适当的添加一些
Checkbox的属性
名称 | 参数类型 | 描述 |
|---|---|---|
select | boolean | 设置多选框是否选中。 |
默认值：false | ||
从API version 9开始，该接口支持在ArkTS卡片中使用。 | ||
selectedColor | ResourceColor | 设置多选框选中状态颜色。 |
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
添加select 属性 设置其默认选中
这种情况下我们最好将数组改成数组对象的形式 ， 当然实际的开发中我们也是这么做的
修改后的源数据如下
@State fruits:object[]=[
{
label:'苹果',
value:false
}, {
label:'荔枝',
value:true
}, {
label:'香蕉',
value:false
}, {
label:'芒果',
value:true
}, {
label:'水蜜桃',
value:false
},
]添加默认选择后源代码如下
@Entry
@Component
struct CheckboxNote {
//@State fruits:string[] =['苹果','荔枝','香蕉','芒果','水蜜桃']
@State fruits:object[]=[
{
label:'苹果',
value:false
}, {
label:'荔枝',
value:true
}, {
label:'香蕉',
value:false
}, {
label:'芒果',
value:true
}, {
label:'水蜜桃',
value:false
},
]
build() {
Row() {
Column({space:20}) {
Row(){
Flex({wrap:FlexWrap.Wrap, justifyContent:FlexAlign.SpaceBetween, alignItems:ItemAlign.Center}){
ForEach(this.fruits, (item)=>{
Row(){
Text(item.label).fontSize(20)
Checkbox({name:item.label, group:'fruits'}).select(item.value)
}
})
}
}
}
.height('100%')
.width('100%')
}
.width('100%')
.height('100%')
}
}效果如下
设置默认选择背景颜色
代码如下：
@Entry
@Component
struct CheckboxNote {
//@State fruits:string[] =['苹果','荔枝','香蕉','芒果','水蜜桃']
@State fruits:object[]=[
{
label:'苹果',
value:false,
bg:'#f00'
}, {
label:'荔枝',
value:true
}, {
label:'香蕉',
value:false,
bg:'#0ff'
}, {
label:'芒果',
value:true
}, {
label:'水蜜桃',
value:false
},
]
build() {
Row() {
Column({space:20}) {
Row(){
Flex({wrap:FlexWrap.Wrap, justifyContent:FlexAlign.SpaceBetween, alignItems:ItemAlign.Center}){
ForEach(this.fruits, (item)=>{
Row(){
Text(item.label).fontSize(20)
Checkbox({name:item.label, group:'fruits'}).select(item.value)
.selectedColor(item.bg? item.bg :'')
}
})
}
}
}
.height('100%')
.width('100%')
}
.width('100%')
.height('100%')
}
}代码中 在数据源中添加 bg 属性， 通过三元语法实现背景颜色替换 ， 效果如下
CheckboxGroup
在多选的开发中，我们经常遇见的问题是， 全选/ 全不选 ， 那么 在Harmonyos 中 应该如和处理这种问题呢？
此时我们就不得不使用 CheckboxGroup这个神器了。
顾名思义， CheckboxGroup 多选框群组，用于控制多选框全选或者不全选状态。
group
group 是ChecboxGroup 的一个接口 ， 语法格式如下：
CheckboxGroup(options?: { group?: string })
创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。
代码案例
Row(){
CheckboxGroup({group:'fruits'}).selectedColor('#f0f')
Text('全选').fontSize(20)
}.width('100%').justifyContent(FlexAlign.Start)代码中需要注意的是 ： group的值要与 checkbox的 group 相同 否则无法生效的
完整代码如下
效果演示
Radio
单选框，提供相应的用户交互选择项。
Radio参数
参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
value | string | 是 | 当前单选框的值。 |
group | string | 是 | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。 |
思路分析
首先使用 Flex 进行数据包裹， 使用Foreach 对数据源进行遍历展示即可， 需要注意的是 group 需要保持一致
代码案例
创建一个数组对象作为数据源
@State hobby:object[]=[
{
label:'蓝球',
value:false
},
{
label:'羽毛球',
value:false
},
{
label:'乒乓球',
value:false
},
{
label:'爬山',
value:false
},
{
label:'烤串',
value:false
},
{
label:'蛋挞',
value:false
},
{
label:'可乐',
value:false
}
]完整代码
@Entry
@Component
struct RadioNote {
@State hobby:object[]=[
{
label:'蓝球',
value:false
},
{
label:'羽毛球',
value:false
},
{
label:'乒乓球',
value:false
},
{
label:'爬山',
value:false
},
{
label:'烤串',
value:false
},
{
label:'蛋挞',
value:false
},
{
label:'可乐',
value:false
}
]
build() {
Row() {
Column() {
Flex({wrap:FlexWrap.Wrap, justifyContent:FlexAlign.SpaceEvenly, alignItems:ItemAlign.Center}){
ForEach(this.hobby, (item)=>{
Row(){
Radio({value:item.label, group: 'hobbyList'})
Text(item.label).fontSize(20)
}
})
}
}
.height('100%')
.width('100%')
}
.width('100%')
.height('100%')
}
}效果如下
TextInput
单行文本输入框组件。
TextInput参数
参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
placeholder | ResourceStr | 否 | 设置无输入时的提示文本。 |
text | ResourceStr | 否 | 设置输入框当前的文本内容。 |
设置输入框当前的文本内容。当组件设置stateStyles等刷新属性时，建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。 | |||
controller8+ | TextInputController | 否 | 设置TextInput控制器。 |
placeholder& text 使用案例
代码如下：
@Entry
@Component
struct TextInputNote {
build() {
Row() {
Column({space:20}) {
TextInput({placeholder:'请输入姓名'})
TextInput({text:'若城'})
TextInput({placeholder:'请输入姓名', text:'若城'})
}
.height('100%')
.width('100%')
}
.height('100%')
.width('100%')
}
}效果如下
**总结 **
- 当
text属性 和placeholder属性一起使用时， 只有text 属性生效，但是当在ui 中将text内容删除之后placeholder的内容会展示出来 text属性 是用户输入的内容placeholder属性 是提示内容，不占位， 当用户输入内容时，placeholder的内容会消失
controller 设置TextInput控制器
controller 在使用时 需要导入TextInputControlle 对象，
TextInputControlle有一个 可以控制光标的属性 caretPosition
导入对象
controller: TextInputController = new TextInputController()代码如下
@Entry
@Component
struct TextInputNote {
controller: TextInputController = new TextInputController()
build() {
Row() {
Column({space:20}) {
// TextInput({placeholder:'请输入姓名'})
// TextInput({text:'若城'})
Button('调用controller').onClick(()=>{
this.controller.caretPosition(2)
})
TextInput({ text:'controller控制器', controller:this.controller})
}
.height('100%')
.width('100%')
}
.height('100%')
.width('100%')
}
}效果图如下
点击按钮前 | 点击按钮过后 |
|---|---|
TextArea
TextArea参数
多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。 高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度
参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
placeholder | ResourceStr | 否 | 设置无输入时的提示文本，输入内容后，提示文本不显示。 |
text | ResourceStr | 否 | 设置输入框当前的文本内容。 |
设置输入框当前的文本内容。当组件设置stateStyles等刷新属性时，建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。 | |||
controller8+ | TextAreaController | 否 | 设置TextArea控制器。 |
**注意 ****TextArea**的使用方法与 **TextInput** 一样， 因此不在进行代码讲解哦~~