HarmonyOS NEXT - 表单录入组件封装(TextInput)_harmonyos next textinput边框-CSDN博客

本文链接：https://blog.csdn.net/iotjin/article/details/142750840

demo 地址: https://github.com/iotjin/JhHarmonyDemo
组件对应代码实现地址
代码不定时更新，请前往github查看最新代码

HarmonyOS NEXT - 表单录入组件封装（TextInput）

序
JhFormInputCell
JhFormSelectCell
JhLoginTextField
JhSetCell

序

鸿蒙next中有两种类型的录入框TextInput(单行录入) 和TextArea(多行录入)

对TextInput 简单封装了下面几种类型的录入样式

JhTextInput
JhFormInputCell
JhFormSelectCell
JhLoginTextField
JhSetCell

JhFormInputCell

在这里插入图片描述

用法：

import { BaseNavigation, JhButton, JhFormInputCell } from 'JhCommon'

@Entry
@Preview
@Component
struct FormInputCellTestPage {
  @State name: string = ''
  @State pwd: string = ''

  build() {
    Column() {
      BaseNavigation({ title: 'JhFormInputCell' }) {
        Scroll() {
          Column() {
            this._body()
          }
        }
      }
    }
  }

  @Builder
  _body() {
    JhFormInputCell({
      placeholder: '默认样式，不设置左标题',
      inputCallBack: (value) => {
        console.log(value as string)
      },
    })
    Blank().height(8)
    JhFormInputCell({
      text: 'text赋初值',
      labelText: '顶部文字',
      placeholder: '请输入',
      // rightWidget: () => {
      //   this.rightBuilder()
      // }
    })
    Blank().height(8)
    JhFormInputCell({
      labelText: '顶部文字',
      placeholder: '请输入',
      // rightWidget: () => {
      //   this.rightBuilder()
      // }
    })
    JhFormInputCell({
      title: '左标题',
    })
    JhFormInputCell({
      title: '左标题',
      text: 'text赋初值,不可编辑',
    }).enabled(false)
    JhFormInputCell({
      title: '左标题',
      placeholder: '标题加红星',
      showRedStar: true,
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: '红色标题',
      titleStyle: { fontColor: Color.Red, fontSize: 15 }
    })
    JhFormInputCell({
      title: '左标题',
      text: '红色文字',
      textStyle: { fontColor: Color.Red, fontSize: 15 }
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: '红色提示文字',
      hintTextStyle: { fontColor: Color.Red, fontSize: 15 }
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: 'text靠右',
      textAlign: TextAlign.End
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: '限制长度10,a-zA-Z0-9',
      maxLength: 10,
      inputFilter: '[a-zA-Z0-9]'
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: '限制长度5,数字输入类型',
      maxLength: 5,
      inputType: InputType.Number
    })

    JhFormInputCell({
      title: '左标题',
      placeholder: '左侧自定义',
      leftWidget: () => {
        this.rightBuilder()
      }
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: '右侧自定义',
      rightWidget: () => {
        this.rightBuilder()
      }
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: '下划线高亮和动画',
      borderAnimation: true,
      borderHighlight: true
    })
    JhFormInputCell({
      title: '左标题',
      placeholder: '隐藏下划线',
      hiddenLine: true,
    })

    Blank().height(30)
    JhButton({
      text: '提 交',
      onPressed: (): void => this.clickLogin()
    })
      .margin(15)

  }

  @Builder
  leftBuilder() {
    Text('+86')
    // Row() {
    // }
    // .width('100%')
    // .height('100%')
    // .backgroundColor(Color.Yellow)
  }

  @Builder
  rightBuilder() {
    Row() {
    }
    .width('100')
    .height('100%')
    .backgroundColor(Color.Orange)
  }

  clickLogin() {
    console.log('name:', JSON.stringify(this.name))
    console.log('pwd:', JSON.stringify(this.pwd))
  }
}

JhFormSelectCell

在这里插入图片描述

用法

import { BaseNavigation, JhButton, JhFormSelectCell } from 'JhCommon'

@Entry
@Preview
@Component
struct FormSelectCellTestPage {
  @State name: string = ''
  @State pwd: string = ''
  @State errorText: string = ''

  build() {
    Column() {
      BaseNavigation({ title: 'JhFormSelectCell' }) {
        Scroll() {
          Column() {
            this._body()
          }
        }
      }
    }
  }

  @Builder
  _body() {
    JhFormSelectCell({
      selectCallBack: () => {
        console.log('点击cell')
      },
    })
    Blank().height(8)
    JhFormSelectCell({
      text: 'text赋初值',
      labelText: '顶部文字',
      placeholder: '请选择'
    })
    JhFormSelectCell({
      title: '左标题',
    })
    JhFormSelectCell({
      title: '左标题',
      text: 'text赋初值',
    })
    JhFormSelectCell({
      showRedStar: true,
      title: '左标题',
      placeholder: '标题加红星',
    })
    JhFormSelectCell({
      title: '左标题',
      placeholder: '红色标题',
      titleStyle: { fontColor: Color.Red, fontSize: 15 }
    })
    JhFormSelectCell({
      title: '左标题',
      text: '红色文字',
      textStyle: { fontColor: Color.Red, fontSize: 15 }
    })
    JhFormSelectCell({
      title: '左标题',
      text: 'text靠右',
      textAlign: TextAlign.End
    })
    JhFormSelectCell({
      title: '左标题',
      placeholder: '左侧自定义',
      leftWidget: () => {
        this.rightBuilder()
      }
    })
    JhFormSelectCell({
      title: '左标题',
      placeholder: '右侧自定义',
      rightWidget: () => {
        this.rightBuilder()
      }
    })

    Blank().height(30)
    JhButton({
      text: '提 交',
      onPressed: (): void => this.clickLogin()
    })
      .margin(15)

  }

  @Builder
  leftBuilder() {
    Text('+86')
    // Row() {
    // }
    // .width('100%')
    // .height('100%')
    // .backgroundColor(Color.Yellow)
  }

  @Builder
  rightBuilder() {
    Row() {
    }
    .width('100')
    .height('100%')
    .backgroundColor(Color.Orange)
  }

  clickLogin() {
    console.log('name:', JSON.stringify(this.name))
    console.log('pwd:', JSON.stringify(this.pwd))
  }
}

JhLoginTextField

在这里插入图片描述

用法

import { BaseNavigation, JhButton, JhLoginTextInput } from 'JhCommon'

@Entry
@Preview
@Component
struct FormLoginTextInputTestPage {
  @State name: string = ''
  @State pwd: string = ''
  @State errorText: string = ''

  build() {
    Column() {
      BaseNavigation({ title: 'JhLoginTextInput' }) {
        Scroll() {
          Column() {
            this._body()
          }
        }
      }
    }
  }

  @Builder
  _body() {
    JhLoginTextInput({
      text: 'text赋初值',
      placeholder: '请输入'
    })
    JhLoginTextInput({
      placeholder: '输入时显示删除按钮'
    })
    JhLoginTextInput({
      placeholder: '输入时不显示删除按钮',
      isShowDeleteBtn: false
    })
    JhLoginTextInput({
      placeholder: '密码样式',
      isPwd: true
    })
    JhLoginTextInput({
      placeholder: '默认限制长度30',
    })
    JhLoginTextInput({
      placeholder: '限制长度10,a-zA-Z0-9',
      maxLength: 10,
      inputFilter: '[a-zA-Z0-9]'
    })
    JhLoginTextInput({
      placeholder: '限制长度5,数字输入类型',
      maxLength: 5,
      inputType: InputType.Number
    })
    JhLoginTextInput({
      placeholder: '左侧添加icon',
      leftIcon: $rawfile("svg/ic_login_user.svg")
    })
    JhLoginTextInput({
      placeholder: '左侧自定义',
      leftWidget: () => {
        this.leftBuilder()
      }
    })
    JhLoginTextInput({
      placeholder: '右侧自定义',
      rightWidget: () => {
        this.rightBuilder()
      }
    })
    JhLoginTextInput({
      placeholder: '取消下划线高亮和动画',
      borderAnimation: false,
      borderHighlight: false
    })

    Blank().height(8)
    JhLoginTextInput({
      text: this.name,
      labelText: '用户名',
      placeholder: '请输入用户名',
      leftIcon: $rawfile("svg/ic_login_user.svg"),
      inputCallBack: (value) => {
        this.name = value as string
      },
    })
    Blank().height(8)
    JhLoginTextInput({
      text: this.pwd,
      labelText: '密码',
      placeholder: '请输入密码',
      leftIcon: $rawfile("svg/ic_login_pwd.svg"),
      isPwd: true,
      inputCallBack: (value) => {
        this.pwd = value as string
      },
    })

    Blank().height(30)
    JhButton({
      text: '登 录',
      onPressed: (): void => this.clickLogin()
    })
      .margin(15)
  }

  @Builder
  leftBuilder() {
    Text('+86')
    // Row() {
    // }
    // .width('100%')
    // .height('100%')
    // .backgroundColor(Color.Yellow)
  }

  @Builder
  rightBuilder() {
    Row() {
    }
    .width('100')
    .height('100%')
    .backgroundColor(Color.Orange)
  }

  clickLogin() {
    console.log('name:', JSON.stringify(this.name))
    console.log('pwd:', JSON.stringify(this.pwd))
  }
}

JhSetCell

在这里插入图片描述

用法

import { BaseNavigation, JhSetCell } from 'JhCommon'

@Entry
@Preview
@Component
struct SetCellTestPage {
  @State name: string = ''
  @State pwd: string = ''
  @State errorText: string = ''

  build() {
    Column() {
      BaseNavigation({ title: 'JhSetCell' }) {
        Scroll() {
          Column() {
            this._body()
          }
        }
      }
    }
  }

  @Builder
  _body() {
    JhSetCell({
      title: '左标题',
      clickCallBack: () => {
        console.log('点击cell')
      },
    })
    JhSetCell({
      title: '左标题',
      text: '右侧文字',
      clickCallBack: () => {
        console.log('点击cell')
      },
    })
    JhSetCell({
      title: '左标题左标题左标题',
      text: '右侧文字',
      titleWidth: 150,
    })
    JhSetCell({
      leftIcon: $rawfile("images/demos/ic_set.png"),
      title: '设置',
      text: '右侧文字'
    })
    JhSetCell({
      leftIcon: $rawfile("images/demos/ic_set.png"),
      title: '关于',
      text: '有新版本',
      textStyle: { fontColor: Color.Red, fontSize: 15 }
    })
    JhSetCell({
      leftIcon: $rawfile("images/demos/ic_set.png"),
      title: '左侧文字红色',
      titleStyle: { fontColor: Color.Red, fontSize: 15 }
    })
    JhSetCell({
      title: '左标题',
      text: 'text靠左',
      textAlign: TextAlign.Start
    })
    JhSetCell({
      title: '左标题',
      text: '隐藏箭头',
      hiddenArrow: true
    })
    JhSetCell({
      title: '左侧宽200',
      text: '左侧自定义',
      titleWidth: 200,
      leftWidget: () => {
        this.rightBuilder()
      }
    })
    JhSetCell({
      title: '左标题',
      text: '右侧自定义',
      titleWidth: 100,
      rightWidget: () => {
        this.rightBuilder()
      }
    })
    JhSetCell({
      title: '设置图标大小/背景色/高度',
      bgColor: Color.Yellow,
      cellHeight: 80,
      titleWidth: 200,
      leftIcon: $rawfile("images/demos/ic_set.png"),
      leftImgWH: 40,
    })
    JhSetCell({
      title: '隐藏底部线',
      hiddenLine: true
    })
  }

  @Builder
  rightBuilder() {
    Row() {
    }
    .width('100')
    .height('100%')
    .backgroundColor(Color.Orange)
  }
}