HarmonyOS NEXT - 表单录入组件封装(TextInput)

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

HarmonyOS NEXT - 表单录入组件封装(TextInput)

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

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

  • JhTextInput
  • JhFormInputCell
  • JhFormSelectCell
  • JhLoginTextField

JhFormInputCell

用法:

js 复制代码
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

用法

js 复制代码
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

用法

js 复制代码
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))
  }
}
相关推荐
我在看你呵呵笑1 天前
GD32VW553-IOT开发板移植适配openharmony
物联网·华为·harmonyos
在人间耕耘1 天前
HarmonyOS 开发学习分享:从入门到认证的完整路径
华为·harmonyos
森之鸟1 天前
开发中使用——鸿蒙子页面跳转到指定Tab页面
harmonyos·鸿蒙
程序员潘Sir1 天前
HarmonyOS编写教师节贺卡
harmonyos·鸿蒙
℃CCCC1 天前
请求库-axios
开发语言·华为·网络请求·harmonyos·deveco studio·axios请求·arkts编程
光芒Shine1 天前
【ArkTS-装饰器】
harmonyos
花先锋队长1 天前
从社交破冰到学习规划,鸿蒙5开启智慧校园新生活
华为·生活·harmonyos
Cheney8221 天前
华为Ai岗机考20250903完整真题
人工智能·华为
用户7227868123442 天前
HarmonyOS实现快递APP自动识别地址
harmonyos