目录

案例介绍

本篇文章将介绍如何设计自适应表单的数据模型和响应式状态。通过合理的数据结构设计和状态管理，实现表单数据的存储和布局模式的自适应切换。

代码实现

@Entry
@Component
struct AdaptiveFormExample {
  // 屏幕宽度断点
  private readonly BREAKPOINT: number = 600
  // 当前是否为宽屏模式
  @State isWideScreen: boolean = false
  
  // 表单数据
  @State formData: {
    name: string,
    email: string,
    phone: string,
    address: string,
    remark: string
  } = {
    name: '',
    email: '',
    phone: '',
    address: '',
    remark: ''
  }
  
  // 表单项配置
  private formItems: Array<{
    id: string,
    label: string,
    placeholder: string,
    type: string,
    maxLength?: number
  }> = [
    { id: 'name', label: '姓名', placeholder: '请输入姓名', type: 'text', maxLength: 20 },
    { id: 'email', label: '邮箱', placeholder: '请输入邮箱地址', type: 'email' },
    { id: 'phone', label: '电话', placeholder: '请输入电话号码', type: 'tel', maxLength: 11 },
    { id: 'address', label: '地址', placeholder: '请输入详细地址', type: 'text' },
    { id: 'remark', label: '备注', placeholder: '请输入备注信息', type: 'text' }
  ]
  
  aboutToAppear() {
    // 监听窗口尺寸变化
    windowManager.on('windowSizeChange', () => {
      this.updateLayoutMode()
    })
    // 初始化布局模式
    this.updateLayoutMode()
  }
  
  // 更新布局模式
  updateLayoutMode() {
    const windowWidth = windowManager.getWindowWidth()
    this.isWideScreen = windowWidth >= this.BREAKPOINT
  }
}

代码详解

1. 断点设计

private readonly BREAKPOINT: number = 600
@State isWideScreen: boolean = false

断点设计考虑：

• 600px作为宽窄屏的分界点
• isWideScreen状态控制布局切换
• 使用@State实现响应式更新

2. 表单数据结构

@State formData: {
  name: string,
  email: string,
  phone: string,
  address: string,
  remark: string
}

数据结构特点：

• 使用对象存储表单数据
• 属性名与表单项对应
• @State装饰器实现双向绑定

3. 表单项配置

private formItems: Array<{
  id: string,
  label: string,
  placeholder: string,
  type: string,
  maxLength?: number
}>

配置设计要点：

• id用于数据绑定
• label定义显示文本
• type指定输入类型
• maxLength控制输入长度
• 数组形式便于遍历渲染

4. 响应式布局管理

aboutToAppear() {
  windowManager.on('windowSizeChange', () => {
    this.updateLayoutMode()
  })
  this.updateLayoutMode()
}

updateLayoutMode() {
  const windowWidth = windowManager.getWindowWidth()
  this.isWideScreen = windowWidth >= this.BREAKPOINT
}

布局管理特点：

• 监听窗口尺寸变化
• 实时更新布局模式
• 初始化时设置布局

总结

本文通过设计自适应表单的数据模型和响应式状态，展示了如何实现表单数据的存储和布局模式的自适应切换。通过设置合理的断点值（如600px），实现了宽屏和窄屏的布局切换，确保表单在不同设备上都能提供良好的用户体验。表单数据采用统一的对象结构存储，结合@State装饰器实现双向绑定，便于状态维护和数据更新。表单项通过配置化设计，使用数组存储每个字段的配置信息，提高了代码的复用性和可扩展性。同时，通过监听窗口尺寸变化并实时更新布局模式，实现了真正的响应式设计。这种设计方式不仅提升了用户体验，还为后续的表单功能扩展提供了坚实的基础。