HarmonyOS Next 教育类应用：用户信息修改页面开发（二）

3. 输入框与选择器使用

• 输入框：使用 TextInput 组件让用户输入信息，如手机号码、姓名、身份证号等，并通过 onChange 事件监听用户输入，实时更新状态变量。

TextInput({ placeholder: '手机号码', text: this.phone })
  .type(InputType.PhoneNumber)
  .TextBgColorStyle()
  .textAlign(TextAlign.Center)
  .enabled(false)
  .width(100)
  .height(40)
  .borderRadius(5)
  .onChange((value: string) => {
    this.phone = value
  })

• 选择器：使用 TextPickerDialog 组件让用户选择行业类别和制证单位，点击选择区域弹出选择框，选择后更新对应状态变量。

Row() {
  Text('请选择')
    .fontColor(Color.Gray)
  Image($r('app.media.more'))
    .width(16)
    .height(16)
    .fillColor('666666')
}
.onClick(() => {
  TextPickerDialog.show({
    range: this.industryTypeList,
    selected: [],
    textStyle: { color: Color.Black, font: { size: 18, weight: FontWeight.Normal } },
    selectedTextStyle: { color: Color.Blue, font: { size: 24, weight: FontWeight.Bolder } },
    onAccept: (value: TextPickerResult) => {
      this.industryType = value.value as string
    },
    onCancel: () => {
    },
    onChange: (value: TextPickerResult) => {
    }
  })
})

4. 样式扩展

使用 @Extend 装饰器对 TextInput 和 Row 组件进行样式扩展，统一设置输入框背景色和列表项样式。

@Extend(TextInput)
function TextBgColorStyle() {
  .backgroundColor('eeeeeeee')
}

@Extend(Row)
function ListItemStyle() {
  .padding({
    top: 5,
    right: 10,
    bottom: 5,
    left: 10
  })
  .backgroundColor(Color.White)
  .border({
    width: { bottom: 1 },
    color: { bottom: '#eeeeee' },
    style: {
      bottom: BorderStyle.Solid
    }
  })
}

总结

通过上述代码实现了 HarmonyOS Next 教育类应用中用户信息修改页面的基本功能，包括状态管理、页面导航、输入框和选择器的使用以及样式扩展。这些功能为用户提供了便捷的信息修改体验，同时展示了 HarmonyOS Next 开发的灵活性和高效性。开发者可以根据实际需求对页面进行进一步扩展和优化。