鸿蒙开发常用自定义组件：TextPicker_鸿蒙textpicker

本篇详细介绍基于常用组件 TextPicker 上，扩展一些样式自定义组件。

这里先来了解一下自定义组件成员变量初始化，TextPicker 组件的属性和方法，下面先显示此帖子 Demo 的效果：

自定义组件

组件的成员变量可以通过两种方式初始化。

本地初始化，例如：

@State counter: Counter = new Counter()

在构造组件时通过构造参数初始化，例如：

MyComponent({counter: $myCounter})

具体允许哪种方式取决于状态变量的装饰器：

通过构造函数方法初始化成员变量，需要遵循如下规则：

TextPicker 组件

参数：

事件：

Demo 介绍

创建一个新的 eTS 文件，用来编写自定义 TextPicker 组件，代码如下：

@Component
export struct CustomTextPicker {
  @State select: number = 0
  @State ranges: string[] | Resource = undefined
 
  private changeCallback: (value: string, index: number) => void
 
  build() {
    TextPicker({ range: this.ranges, selected: this.select })
      .layoutWeight(1)
      .linearGradient({
        angle: 0,
        direction: GradientDirection.Top,
        colors: [[0xfdfdfd, 0.0], [0xe0e0e0, 0.5], [0xfdfdfd, 1]],
      })
      .onChange((value: string, index: number) => {
        this.changeCallback(value, index)
      })
  }
}

通过 import 引用自定义 TextPicker 组件到要使用的页面，创建 Sample 页面，里面显示一个按钮和一个文本，按钮点击打开一个对话框。

对话框里面有四个自定义 TextPicker 组件，用餐数据源是通过资源文件引用，其它数据源是通过定义变量或直接给出。

TextPicker 组件 rang 参数支持字符串数组和 Resource 资源文件，Sample 代码如下：

首先引用自定义组件：

import { CustomTextPicker } from '../components/CustomTextPicker'

在自定义对话框使用：

@CustomDialog
struct Record {
  private controller: CustomDialogController
 
  private mileTimeLabels:Resource = $r('app.strarray.mealTime_labels')
  private foodWeights: string[] = ['150', '200', '250', '300', '350']
 
  @Link mileTime: string
  @Link foodWeight: string
  @Link gender: string
  @Link age: number
 
 
  onChangeMileTimeCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("mileTime", value)
  }
 
  onChangeFoodWeightCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("foodWeight", value)
  }
 
  onChangeGenderCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("gender", value)
  }
  onChangeAgeCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("age", value)
  }
 
  build() {
    Column({space: 10}) {
      Row({space: 5}) {
        Text('用餐：').fontSize(20)
        CustomTextPicker({select: 0, ranges: this.mileTimeLabels,
          changeCallback: this.onChangeMileTimeCallback})
        Text('重量：').fontSize(20)
        CustomTextPicker({select: 1, ranges: this.foodWeights,
          changeCallback: this.onChangeFoodWeightCallback})
      }.height(140)
 
      Row({space: 5}) {
        Text('性别：').fontSize(20)
        CustomTextPicker({
            select: 0, ranges: ['保留','男', '女'],
            changeCallback: this.onChangeGenderCallback
            })
        Text('年龄：').fontSize(20)
        CustomTextPicker({
          select: 0, ranges: ['16','17', '18','19', '20','21', '22','23', '24','25', '26'],
          changeCallback: this.onChangeAgeCallback
        })
      }.height(140)
 
      Button('完成', { type: ButtonType.Capsule, stateEffect: true })
        .height(43)
        .width('100%')
        .margin({ top: 33, left: 72, right: 72 })
        .backgroundColor('#73CD57')
        .onClick(() => {
          this.mileTime = AppStorage.Get("mileTime")
          this.foodWeight = AppStorage.Get("foodWeight")
          this.gender = AppStorage.Get("gender")
          this.age = AppStorage.Get("age")
          this.controller.close()
        })
    }
    .cardStyle()
    .height(420)
    .width('90%')
 
  }
}
 
@Styles function cardStyle() {
  .height('100%')
  .padding({ top: 20, right: 20, left: 20 })
  .backgroundColor(Color.White)
  .borderRadius(12)
}

Sample 页面完整代码如下：

import { CustomTextPicker } from '../components/CustomTextPicker'
 
@Entry
@Component
struct SampleCustomTextPicker {
 
  @State mileTime: string = '?'
  @State foodWeight: string = '?'
  @State gender: string = '?'
  @State age: number = 16
 
 
  dialogController: CustomDialogController = new CustomDialogController({
    builder: Record({mileTime: $mileTime, foodWeight: $foodWeight, gender: $gender, age: $age}),
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    customStyle: true
  })
 
  build() {
    Column({ space: 10 }) {
      Button('打开对话框', { type: ButtonType.Capsule, stateEffect: true })
        .height(42)
        .width('80%')
        .margin({ top: 32, bottom: 32 })
        .backgroundColor('#73CD57')
        .onClick(() => {
          this.dialogController.open()
        })
 
      Text('用餐时间：' + this.mileTime)
        .fontSize(18)
      Text('重量：' + this.foodWeight)
        .fontSize(18)
      Row({space: 10}) {
        Text('性别：' + this.gender)
          .fontSize(18)
        Text('年龄：' + this.age)
          .fontSize(18)
      }
    }
    .width('100%')
  }
}
 
@CustomDialog
struct Record {
  private controller: CustomDialogController
 
  private mileTimeLabels:Resource = $r('app.strarray.mealTime_labels')
  private foodWeights: string[] = ['150', '200', '250', '300', '350']
 
  @Link mileTime: string
  @Link foodWeight: string
  @Link gender: string
  @Link age: number
 
 
  onChangeMileTimeCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("mileTime", value)
  }
 
  onChangeFoodWeightCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("foodWeight", value)
  }
 
  onChangeGenderCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("gender", value)
  }
  onChangeAgeCallback(value: string, index: number) {
    console.log('xx '+value + " index: " + index)
    AppStorage.SetOrCreate<string>("age", value)
  }
 
  build() {
    Column({space: 10}) {
      Row({space: 5}) {
        Text('用餐：').fontSize(20)
        CustomTextPicker({select: 0, ranges: this.mileTimeLabels,
          changeCallback: this.onChangeMileTimeCallback})
        Text('重量：').fontSize(20)
        CustomTextPicker({select: 1, ranges: this.foodWeights,
          changeCallback: this.onChangeFoodWeightCallback})
      }.height(140)
 
      Row({space: 5}) {
        Text('性别：').fontSize(20)
        CustomTextPicker({
            select: 0, ranges: ['保留','男', '女'],
            changeCallback: this.onChangeGenderCallback
            })
        Text('年龄：').fontSize(20)
        CustomTextPicker({
          select: 0, ranges: ['16','17', '18','19', '20','21', '22','23', '24','25', '26'],
          changeCallback: this.onChangeAgeCallback
        })
      }.height(140)
 
      Button('完成', { type: ButtonType.Capsule, stateEffect: true })
        .height(43)
        .width('100%')
        .margin({ top: 33, left: 72, right: 72 })
        .backgroundColor('#73CD57')
        .onClick(() => {
          this.mileTime = AppStorage.Get("mileTime")
          this.foodWeight = AppStorage.Get("foodWeight")
          this.gender = AppStorage.Get("gender")
          this.age = AppStorage.Get("age")
          this.controller.close()
        })
    }
    .cardStyle()
    .height(420)
    .width('90%')
 
  }
}
 
@Styles function cardStyle() {
  .height('100%')
  .padding({ top: 20, right: 20, left: 20 })
  .backgroundColor(Color.White)
  .borderRadius(12)
}

总结

通过此帖，可以简单学会自定义组件，如何引用使用，在健康饮食 APP 里，已经完成了一小部分内容，下来继续一个个组件完成，然后拼装就出来一个健康饮食 APP 了。

最后，为了能够让大家跟上互联网时代的技术迭代，赶上互联网开发人员寒冬期间一波红利，在这里跟大家分享一下我自己近期学习心得以及参考网上资料整理出的一份最新版的鸿蒙学习提升资料，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！！

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/920659