鸿蒙布局容器使组件自适应窗口大小

本地初始化，例如：

@State counter: Counter = new Counter()

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

MyComponent({counter: $myCounter})

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

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

TextPicker 组件

参数：

事件：

Demo 介绍

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

@Component
 export struct CustomTextPicker {
 @State select: number = 0
 @State ranges: string[] | Resource = undefinedprivate 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: CustomDialogControllerprivate 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: numberonChangeMileTimeCallback(value: string, index: number) {
 console.log('xx '+value + " index: " + index)
 AppStorage.SetOrCreate(“mileTime”, value)
 }onChangeFoodWeightCallback(value: string, index: number) {
 console.log('xx '+value + " index: " + index)
 AppStorage.SetOrCreate(“foodWeight”, value)
 }onChangeGenderCallback(value: string, index: number) {
 console.log('xx '+value + " index: " + index)
 AppStorage.SetOrCreate(“gender”, value)
 }
 onChangeAgeCallback(value: string, index: number) {
 console.log('xx '+value + " index: " + index)
 AppStorage.SetOrCreate(“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 = 16dialogController: CustomDialogController = new CustomDialogController({
 builder: Record({mileTime: foodWeight, gender: 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()
 })