鸿蒙开发应用之Textinput,TextArea,Checkbox,CheckboxGroup,Radio及正则表达式。

ZHONG_YU
493 阅读5分钟

一. 输入框Textinput,TextArea,多选框,单选框

image.png

1. Textinput

基础代码

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

常用参数

参数名类型是否必填说明
placeholderResourceStr否设置无输入时的提示文本。
textResourceStr否设置输入框当前的文本内容。 从API version 10开始，该参数支持$$双向绑定变量。

常用属性

名称参数类型描述
typeInputType设置输入框类型。默认值：InputType.Normal
showUnderlineboolean设置是否开启下划线。下划线默认颜色为'#33182431'，默认粗细为1px，文本框尺寸48vp（下划线只支持InputType.Normal类型）。默认值：false
passwordIconPasswordIcononIconSrc:输入状态时图标offIconSrc:隐藏状态时图标
placeholderColorResourceColor设置placeholder文本颜色。默认值跟随主题。

InputType部分枚举值

名称描述
Normal基本输入模式。 可输入数字、字母、下划线、空格、特殊字符。
Password密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。密码输入模式不支持下划线样式。在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。
Email邮箱地址输入模式。支持数字，字母，下划线，.字符，以及@字符（只能存在一个@字符）。
Number纯数字输入模式。
....

2. TextArea

TextArea 可以用来设置多行文本，用法和TextInput基本一致

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

常用参数

参数名类型是否必填说明
placeholderResourceStr否设置无输入时的提示文本。
textResourceStr否设置输入框当前的文本内容。从API version 10开始，该参数支持$$双向绑定变量。

常用属性

名称参数类型描述
typeInputType设置输入框类型。默认值：InputType.Normal
placeholderColorResourceColor设置placeholder文本颜色。默认值跟随主题。
showCountervalue: boolean, options11+?: InputCounterOptions参数value为true时，才能设置options，文本框开启计数下标功能，需要配合maxlength（设置最大字符限制）一起使用。
maxLengthnumber设置文本的最大输入字符数。 默认不设置最大输入字符数限制。 到达文本最大字符限制，将无法继续输入字符，同时边框变为红色。
....

3. 多选框 Checkbox CheckboxGroup

image.png

控制单个或者多个选项的选中状态，就可以使用 多选框组件

  1. Checkbox:多选框组件

  2. CheckboxGroup:多选框组，控制多个多选框

3.1. Checkbox

Checkbox(options?: CheckboxOptions)

参数CheckboxOptions说明

名称类型必填描述
namestring否用于指定多选框名称。一般结合CheckboxGroup一起使用
groupstring否用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。

常用属性

名称参数类型描述
selectboolean设置多选框是否选中。 默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。 从API version 10开始，该属性支持$$双向绑定变量。
selectedColorResourceColor设置多选框选中状态颜色。 说明： 默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)。 异常值按照默认值处理。 从API version 9开始，该接口支持在ArkTS卡片中使用。
unselectedColorResourceColor设置多选框非选中状态边框颜色。
shapeCheckBoxShape设置CheckBox组件形状, 包括圆形和圆角方形。 说明： 默认值：CheckBoxShape.CIRCLE。
..........

3. 2. CheckboxGroup

如果要控制多个 Checkbox 的选中状态，可以通过CheckBoxGroup来实现 2.3.1基本使用

基础代码

CheckboxGroup(options?: CheckboxGroupOptions)

参数说明(CheckboxGroupOptions)

名称类型必填说明
groupstring否群组名称。 说明： 多个相同群组名称的CheckboxGroup，仅第一个CheckboxGroup生效。

常用属性

名称参数类型描述
selectAllboolean设置是否全选。 默认值：false，若同组的Checkbox 设置了select属性，则Checkbox的优先级高。 该属性支持$$,双向绑定变量。
selectedColorResourceColor设置被选中或部分选中状态的颜色。
unselectedColorResourceColor设置非选中状态边框颜色。

3.3. 事件：获取选中结果

除了视觉效果实现全选和反选以外，咱们经常需要获取选中的值，接下来看看如何实现

核心步骤：

  1. 给 CheckBoxGroup 注册 onChange
  2. CheckBox 添加 name 属性
  3. 在 onChange的回调函数中获取 选中的 name 属性

事件

名称功能描述
onChange (callback: (event: CheckboxGroupResult) => void )CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。

CheckboxGroupResult对象说明

名称类型描述
nameArray群组内所有被选中的多选框名称。name 属性
statusSelectStatus选中状态。
@Entry
@Component
struct ContactsList {
  // 文本输入框内容
  @State inpent:string='m'
  // 密码内容
  @State minaintx:string=''
  // 是大大怪吗
  @State ddg:boolean=true
build() {
    Column() {
    // 文本输入框 单行输入框，placeholder输入框开始默认的内容
    //   预览器和模拟器都无法输入中文
      TextInput({placeholder:'请输入：' ,text:$$this.inpent})
        // 设置placeholder(无输入时的提示文本)文本颜色
        .placeholderColor('#ff00ff')
      Button('点击获取内容')
        .onClick(()=>{
          AlertDialog.show({message:this.inpent})
        })
TextInput({placeholder:'输入密码：',text:$$this.minaintx})
  .type(InputType.NEW_PASSWORD)
  // .type(InputType.Number)
      Button('清空内容')
        .onClick(()=>{
          this.minaintx=''
          this.inpent=''
        })
        .margin(20)

// 多行显示输入文本，也不能输入中文
TextArea({placeholder:'请输入内容：'})
   // 是否显示限制字数提示，配合.maxLength使用
   .showCounter(true)
  // 限制字数，不能超过设定字数
  .maxLength(100)

/*
 * 多选框
 * 多选框
 * 控制单个或者多个选项的选中状态，就可以使用 多选框组件
 * 1. Checkbox:多选框组件
 * 2. CheckboxGroup:多选框组，控制多个多选框
 * */
Column(){
  Row(){
    //想实现全选一定的区域，用group来控制
    Checkbox({group:'开心星球',name:'xxg'})
    Text('小小怪')
  }
  Row(){
    Checkbox({group:'开心星球',name:'ddg'})
      // 默认选中，支持双向绑定
      // .select(true)
      .select(this.ddg)
      // 选中的选择框颜色
      .selectedColor(Color.Red)
    Text('大大怪')
  }
}
Column(){
  Row(){
    Checkbox({group:'星球'})
    Text('小小')
  }
  Row(){
    Checkbox({group:'星球'})
      // 设置CheckBox组件形状, 包括圆形和圆角方形。
      // 说明：
      // 默认值：CheckBoxShape.CIRCLE
      .shape(CheckBoxShape.CIRCLE)
    Text('大大')
  }
}
Row(){
  /*
  * 获取复选框中内容
  * 1.给每一个复选框设置唯一的name属性
  * 2.给CheckboxGroup设置onchange事件
  * 3. 在onChange事件中，从事件参数中 res.name 获取 选中的复选框的name 组成数组
  * */
  CheckboxGroup({group:'开心星球'})
    // 设置CheckBox组件形状, 包括圆形和圆角方形。
    // 说明：
    // 默认值：CheckBoxShape.CIRCLE
    .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
    // 默认全选，支持双向绑定
    .selectAll(true)
    .onChange((namu)=>{
      console.log('namu',namu.name)
      AlertDialog.show({message:namu.name.toString()})
    })


  Text('全选')
}
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(0,0,0,0.2)')
  }
}

二. 单选框 Radio

    
Column() {
  Column() {
    Text('Radio1')
    Radio({ value: 'Radio1', group: 'radioGroup' })
      //显示是否选中，默认不选中
      .checked(true)
        // 选中按钮后的样式
      .radioStyle({
        checkedBackgroundColor: Color.Pink
      })
      .height(50)
      .width(50)
        // 逻辑写在这里
      .onChange((isChecked: boolean) => {
        console.log('Radio1 status is ' + isChecked)
      })
  }

  Column() {
    Text('Radio2')
    Radio({ value: 'Radio2', group: 'radioGroup' })
      .checked(false)
      .radioStyle({
        checkedBackgroundColor: Color.Pink
      })
      .height(50)
      .width(50)
  }

  Column() {
    Text('Radio3')
    Radio({ value: 'Radio3', group: 'radioGroup' })//.checked(false)
      .radioStyle({
        checkedBackgroundColor: Color.Pink
      })
      .height(50)
      .width(50)
      .onChange((isChecked: boolean) => {
        console.log('Radio3 status is ' + isChecked)
      })
  }
}.padding({ top: 30 })

代码实现图

PixPin_2025-01-14_10-51-40.gif

三. 正则表达式：

正则表达式是用于匹配字符串中字符组合的模式(规则)

参考文档

1. 基本使用

首先来看看最基础的用法是什么

基础步骤；

  1. 定义正则
  2. 使用正则
  3. 定义正则
// 方式 1：简写
const res1: RegExp = /ArkTS/
// 方式 2：通过实例化的方式创建
const reg2: RegExp = new RegExp('ArkTS')

  1. 使用正则

    1. test()方法 用来查看正则表达式与指定的字符串是否匹配
    2. 如果正则表达式与指定的字符串匹配 ，返回true，否则false
  console.log('web:', res.test('ArkTS')) // true
  console.log('web:', res.test('Java')) // false

2. 元字符

元字符指的是在正则表达式中，有特殊含义的符号

正则表达式中绝大多数的字符都是描述他们本身，比如:

/ArkTS/  -> 表示 ArkTS 这 5 个字母

有一些具有特殊含义的字符，可以极大的提高正则表达式的灵活性和功能，比如:

 /[a-z]/  ->  只能是 a-z中的字母

像上面的 [] , - 就是元字符，接下来咱们来看看有哪些常用的元字符

2.1. 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

边界符说明
^表示匹配行首的文本（以谁开始）
$表示匹配行尾的文本（以谁结束）

如果 ^ 和 $ 在一起，表示必须是精确匹配

// 元字符之边界符
// 匹配开头的位置 ^, 表示匹配行首的文本（以谁开始）
console.log('res:', /^ArkTS/.test('ArkTS语法')) //true
console.log('res:', /^ArkTS/.test('学习ArkTS')) //false
console.log('res:', /^ArkTS/.test('学习ArkTS语法')) //false
console.log('res:', /^ArkTS/.test('Ar'))//false
// 2. 匹配结束的位置 $, 表示匹配行尾的文本（以谁结束）
console.log('res:', /ArkTS$/.test('ArkTS语法')) //false
console.log('res:', /ArkTS$/.test('学习ArkTS')) //true
console.log('res:', /ArkTS$/.test('学习ArkTS语法')) //false
console.log('res:', /ArkTS$/.test('Ar')) //false
// 3. 精确匹配 ^ $, 完全匹配必须一样
const reg2 = /^ArkTS$/
console.log('res:', reg2.test('ArkTS语法')) //false
console.log('res:', reg2.test('学习ArkTS')) //false
console.log('res:', reg2.test('学习ArkTS语法')) //false
console.log('res:', reg2.test('ArkTS')) //true
console.log('res:', reg2.test('Ar')) //false
console.log('res:', reg2.test('ArkTSArkTS')) //false

2.2. 量词

量词用来设定某个模式的重复次数

量词说明
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复 n 次
{n,}重复 n 次或更多次
{n,m}重复 n 到 m 次

范围 表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

范围说明
[abc]匹配包含的单个字符。也就是只有all bllc 这三个单字符返回true，可以理解为多选1
[a-z]连字符。来指定字符范围。［a-z］表示 a到226个英文字母
[^abc]取反符。［^a-z］匹配除了小写字母以外的字符

2.3. 字符类

某些常见模式的简写方式，区分字母和数字

字符类说明
\d匹配0-9之间的任一数字，相当于［0-9］
\D匹配所有0-9以外的字符，相当于［^0-9］
\w匹配任意的字母、数字和下划线，相当于［A-Za-z0-9_]
\W除所有字母、数字和下划线以外的字符，相当于［^A-Za-z0-9_］
\s匹配空格（包括換行符、制表符、空格符等），相等于［\t\r\n\v\f]
\S匹配非空格的字符，相当于［^\t\r\n\v\f]

2.4. 替换和修饰符

字符串的 replace 方法，可以结合正则进行字符串的替换

// 检索规则：文本、正则
// 替换内容：文本
// 返回值：替换之后的结果
字符串.replace(检索规则，替换内容)
 // 替换和修饰符
const str = '欢迎大家学习ArkTS，相信大家一定能学好ArkTS!!!'
// 将 ArkTS 替换位 鸿蒙开发咋写？ 分别用正则和字符串作为检索规则

默认是不是只能检索一个？

使用正则结合修饰符可以实现大小写区分，是否匹配所有

修饰符说明
i单词 ignore 的缩写，正则匹配时字母不区分大小写
g单词 global 的缩写，匹配所有满足正则表达式的结果

3. 正则大全

日常开发中正则的时候一般会有现成的正则方便直接调用，这里推荐一个插件any-rule，和一个可视化正则的网站

any-rule 插件的作者提供的在线正则网站，涵盖了很多常用的正则：可以使用在线的，或者插件

  1. 网站： any-rule.vercel.app/ 【访问使用】
  2. 插件：plugins.jetbrains.com/plugin/1416… 【下载安装】
  3. 可视化正则：regexper.com/
//正则表达式
// 创建方式1
const reg=/abcd/
// 创建方式2
const reg1=new RegExp('abcd')
//   /正则/.text(字符串)  判断字符串里面是否包含正则字符!
console.log('测试',/abs/.test('bcd'))// 测试结果false
let b='大爷'
console.log('',/大/.test(b))
    // 元字符之边界符
// 匹配开头的位置 ^, 表示匹配行首的文本（以谁开始）
console.log('res:', /^ArkTS/.test('ArkTS语法')) //true
console.log('res:', /^ArkTS/.test('学习ArkTS')) //false
console.log('res:', /^ArkTS/.test('学习ArkTS语法')) //false
console.log('res:', /^ArkTS/.test('Ar'))//false
// 2. 匹配结束的位置 $, 表示匹配行尾的文本（以谁结束）
console.log('res:', /ArkTS$/.test('ArkTS语法')) //false
console.log('res:', /ArkTS$/.test('学习ArkTS')) //true
console.log('res:', /ArkTS$/.test('学习ArkTS语法')) //false
console.log('res:', /ArkTS$/.test('Ar')) //false
// 3. 精确匹配 ^ $, 完全匹配必须一样
const reg2 = /^ArkTS$/
console.log('res:', reg2.test('ArkTS语法')) //false
console.log('res:', reg2.test('学习ArkTS')) //false
console.log('res:', reg2.test('学习ArkTS语法')) //false
console.log('res:', reg2.test('ArkTS')) //true
console.log('res:', reg2.test('Ar')) //false
console.log('res:', reg2.test('ArkTSArkTS')) //false
// 元字符之量词
// 1. * 重复次数= 0 次
console.log('res:', /^w*$/.test('')) //true
console.log('res:', /^w*$/.test('w')) //true
console.log('res:', /^w*$/.test('ww')) //true
console.log('res:', '-----------------------')
// 2. + 重复次数= 1 次
console.log('res:', /^w+$/.test('')) //
console.log('res:', /^w+$/.test('w')) //true
console.log('res:', /^w+$/.test('ww')) //true
console.log('res:', '-----------------------')
// 3. ? 重复次数  0 || 1
console.log('res:', /^w?$/.test('')) //true
console.log('res:', /^w?$/.test('w')) //true
console.log('res:', /^w?$/.test('ww')) //
console.log('res:', '-----------------------')
// 4. {n} 重复 n 次
console.log('res:', /^w{3}$/.test('')) //
console.log('res:', /^w{3}$/.test('w')) //
console.log('res:', /^w{3}$/.test('ww')) //
console.log('res:', /^w{3}$/.test('www')) //true
console.log('res:', /^w{3}$/.test('wwww')) //
console.log('res:', '-----------------------')
// 5. {n,} 重复次数= n
console.log('res:', /^w{2,}$/.test('')) //
console.log('res:', /^w{2,}$/.test('w')) //
console.log('res:', /^w{2,}$/.test('ww')) //true
console.log('res:', /^w{2,}$/.test('www')) //true
console.log('res:', '-----------------------')
// 6. {n,m}   n =< 重复次数 <= m
console.log('res:', /^w{2,4}$/.test('w')) //
console.log('res:', /^w{2,4}$/.test('ww')) //true
console.log('res:', /^w{2,4}$/.test('www')) //true
console.log('res:', /^w{2,4}$/.test('wwww')) //true
console.log('res:', /^w{2,4}$/.test('wwwww')) //
console.log('res:', '-----------------------')
// 元字符之范围  []
// 1. [abc] 匹配包含的单个字符， 多选1
console.log('res:', /^[abc]$/.test('a')) //
console.log('res:', /^[abc]$/.test('b')) //
console.log('res:', /^[abc]$/.test('c')) //
console.log('res:', /^[abc]$/.test('d')) //false
console.log('res:', /^[abc]$/.test('ab')) //false
console.log('res:', '-----------------------')
// 2. [a-z] 连字符 单个
console.log('res:', /^[a-z]$/.test('a')) //
console.log('res:', /^[a-z]$/.test('p')) //
console.log('res:', /^[a-z]$/.test('0')) //false
console.log('res:', /^[a-z]$/.test('A')) //false
console.log('res:', '-----------------------')
// 3. [^a-z] 取反符,中括号里面有^ 表示取反，排除
console.log('res:', /^[^a-z]$/.test('a')) //false
console.log('res:', /^[^a-z]$/.test('A')) //
console.log('res:', /^[^a-z]$/.test('么')) //
console.log('res:', '-----------------------')
// 4.想要包含小写字母，大写字母 ，数字
console.log('res:', /^[a-zA-Z0-9]$/.test('B')) //
console.log('res:', /^[a-zA-Z0-9]$/.test('b')) //
console.log('res:', /^[a-zA-Z0-9]$/.test('9')) //
console.log('res:', /^[a-zA-Z0-9]$/.test(',')) //false
// 5.试一试：用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
console.log('n:', /[A-Za-z0-9_]{6,16}/.test('9456568')) //
// 试一试。匹配 1990-10-10 、1990-1-1 这种格式
console.log('n:', /\d{4}\S{1}\d{1,2}\S\d{1,2}/.test('1990-1-1')) //
/*
 * 字符串的 replace 方法，可以结合正则进行字符串的替换
 * 字符串.replace(检索规则，替换内容)
*/
// 替换和修饰符
const str = '奥特曼是日本圆谷株式会社制作进而衍生出的日本特摄英雄的总称。昭和时代的奥特曼作品（《奥特曼》至《爱迪奥特曼》）中奥特曼英雄的出身地均设定成“M78星云”的宇宙人 !'
// replace 返回值是替换完毕的字符串
console.log(str.replace(/奥特曼/g, '···')) //
avatar
文章
阅读
粉丝