13. 快速上手！HarmonyOS4.0 Form（Checkbox_CheckboxGroup_Radio_TextInput_TextArea）表单详解

全栈若城

发布于 2024-05-26 09:34:33

1510

发布于 2024-05-26 09:34:33

文章被收录于专栏：若城技术专栏

本章内容概要

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控制器。