#打卡不停更#ArkUI eTS健康饮食APP之自定义TextPicker组件 原创 精华

狼哥Army
发布于 2022-9-30 10:28
浏览
4收藏

@toc

前言

        自上一篇 #HarmonyOS ArkUI入门训练营—健康生活实战#健康饮食APP分解 总体介绍显示健康饮食APP的效果,此帖详细介绍基于常用组件TextPicker上,扩展一些样式自定义组件,这里先来了解一下自定义组件成员变量初始化,TextPicker组件的属性和方法,下面先显示此帖子Demo的效果:
#打卡不停更#ArkUI eTS健康饮食APP之自定义TextPicker组件-鸿蒙开发者社区

自定义组件

        组件的成员变量可以通过两种方式初始化
        本地初始化,例如:

@State counter: Counter = new Counter()

        在构造组件时通过构造参数初始化,例如:

MyComponent({counter: $myCounter})

        具体允许哪种方式取决于状态变量的装饰器:
#打卡不停更#ArkUI eTS健康饮食APP之自定义TextPicker组件-鸿蒙开发者社区

        通过构造函数方法初始化成员变量,需要遵循如下规则
#打卡不停更#ArkUI eTS健康饮食APP之自定义TextPicker组件-鸿蒙开发者社区

TextPicker组件

        参数:
#打卡不停更#ArkUI eTS健康饮食APP之自定义TextPicker组件-鸿蒙开发者社区

        事件:
#打卡不停更#ArkUI eTS健康饮食APP之自定义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代码如下:

  1. 首先引用自定义组件
import { CustomTextPicker } from '../components/CustomTextPicker'
  1. 在自定义对话框使用
@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了。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
4
收藏 4
回复
举报
3条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

前排学习组件使用方法,楼主上一篇的链接:​​https://ost.51cto.com/posts/17571​

1
回复
2022-9-30 10:31:25
冰淇淋爱我
冰淇淋爱我

用餐时间感觉也可以考虑进去,饮食健康也很重要

1
回复
2022-9-30 13:10:01
民之码农
民之码农

赞一个

1
回复
2022-10-6 13:08:39
回复
    相关推荐