# lib_ui_v1_project

**Repository Path**: Fie_Ryan/lib_ui_v1_project

## Basic Information

- **Project Name**: lib_ui_v1_project
- **Description**: 一套基于ArkTS V1版本 开发的UI组件。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 鸿蒙, 鸿蒙UI, V1版本组件, 表单

## README

# 鸿蒙UI组件

一套基于ArkTS开发的UI组件，提供丰富的表单功能和良好的用户体验。

## 特性

- 完全适配HarmonyOS
- 表单组件：输入框、选择器、复选框、日期选择器,时间选择器等
- 表单验证功能，支持必填、长度、正则和自定义验证
- 动态表单渲染，通过JSON配置快速生成表单

## 安装
### 方式一
1. build HAR包：lib_ui_v1.har
2. 在项目的oh-package.json5中添加依赖
```json5
"dependencies": {
    "@ryan/lib_ui_v1": "file:./src/lib/lib_ui_v1.har"
  }
```

### 方式二
复制相关代码到组件中使用

## 使用说明
### 在 Ability 进行初始化
```extendtypescript
import { ILibUIInit } from '@ryan/lib_ui_v1';

...
onWindowStageCreate(windowStage:window.WindowStage):void {
  ...
  // 初始化UI组件库
  ILibUIInit(windowStage, this.context)
}
```
## 以动态表单使用为例
```extendtypescript
import { FormConfig, FormController, FormFieldTypeEnum, LibDynamicForm } from '@ryan/lib_ui_v1';
import { promptAction } from '@kit.ArkUI';


@Entry
@Component
struct From {
  @State formData: Record<string, ESObject> = {
    "username": '小明',
    "phone": '13102664813',
    "gender": '男',
    "date": '2025/8/24',
    "time": '16:30:30',
    "agree": true
  } as Record<string, ESObject>
  // 表单控制器
  private formController: FormController = LibDynamicForm.getController();
  // 表单配置
  private formConfig: FormConfig = {
    formId: 'user_register',
    fields: [
      {
        field: 'username',
        label: '用户名',
        type: FormFieldTypeEnum.TEXT_INPUT,
        required: true,
        props: { placeholder: '请输入3-20位用户名' },
        rules: { minLength: 3, maxLength: 20, lengthMsg: '用户名长度为3-20位' }
      },
      {
        field: 'phone',
        label: '手机号',
        type: FormFieldTypeEnum.TEXT_INPUT,
        required: true,
        fieldType: 'phone',
        props: { placeholder: '请输入11位手机号' },
        rules: {
          // 手机号正则：以1开头，第二位3-9，后面9位数字
          pattern: /^1[3-9]\d{9}$/,
          patternMsg: '请输入正确的手机号（11位数字）'
        }
      },
      {
        field: 'gender',
        label: '性别',
        type: FormFieldTypeEnum.SELECT,
        required: true,
        props: {
          options: [
            { label: '男', value: '男' },
            { label: '女', value: '女' }
          ]
        }
      },
      {
        field: 'agree',
        label: '协议',
        type: FormFieldTypeEnum.CHECKBOX,
        required: true,
        props: { checkboxLabel: '同意用户协议' },
        rules: {
          validator: (val: ESObject) => {
            !val ? '请同意协议' : undefined
          }
        }
      },
      {
        field: 'date',
        label: '日期',
        type: FormFieldTypeEnum.DATE_PICKER,
        required: true,
        props: {
          startData: '2010',
          endData: "2030"
        }
      },
      {
        field: 'time',
        label: '时间',
        type: FormFieldTypeEnum.TIME_PICKER,
        required: true,
      }
    ]
  };

  build() {
    Column() {
      LibDynamicForm({
        formData: this.formData,
        config: this.formConfig,
        title: '用户注册',
        isShowFooter: false
      }) {
        Button("提交")
          .onClick(() => {
            this.formController.validate().then(res => {
              if (!res.isValid) {
                promptAction.showToast({
                  message: '请正确填写'
                })
                return
              }
              // todo 填写正确后的逻辑,比如提交数据等等
              AlertDialog.show({
                message: '提交的数据: ' + JSON.stringify(this.formData)
              })
            })
          })
      };
    }
    .backgroundColor('#f5f5f5').padding(16)
  }
}
```