回复
HarmonyOS API：基础组件
joytrian
发布于 2023-3-24 14:04
浏览
0收藏
版本：v3.1 Beta
TextPicker
更新时间: 2023-02-17 09:19
滑动选择文本内容的组件。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string})
根据range指定的选择范围创建文本选择器。
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
range | string[] | Resource | 是 | 选择器的数据选择列表。 |
selected | number | 否 | 设置默认选中项在数组中的索引值。 默认值：0 |
value | string | 否 | 设置默认选中项的值，优先级低于selected。 默认值：第一个元素值 |
属性
名称 | 参数类型 | 描述 |
defaultPickerItemHeight | number | string | 设置Picker各选择项的高度。 |
事件
除支持通用事件外，还支持以下事件：
名称 | 描述 |
onChange(callback: (value: string, index: number) => void) | 滑动选中TextPicker文本内容后，触发该回调。 - value: 当前选中项的文本。 - index: 当前选中项的索引值。 |
示例
// xxx.ets
@Entry
@Component
struct TextPickerExample {
private select: number = 1
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
build() {
Column() {
TextPicker({ range: this.fruits, selected: this.select })
.onChange((value: string, index: number) => {
console.info('Picker item changed, value: ' + value + ', index: ' + index)
})
}
}
}
TextTimer
更新时间: 2023-02-17 09:19
通过文本显示计时信息并控制其计时器状态的组件。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
isCountDown | boolean | 否 | 是否倒计时。 默认值：false |
count | number | 否 | 倒计时时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为倒计时初始值。否则，使用默认值为倒计时初始值。 默认值：60000 |
controller | 否 | TextTimer控制器。 |
属性
名称 | 参数类型 | 描述 |
format | string | 自定义格式，需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式，则使用默认值。 默认值：'HH:mm:ss.SS' |
事件
名称 | 功能描述 |
onTimer(event: (utc: number, elapsedTime: number) => void) | 时间文本发生变化时触发。 utc：Linux时间戳，即自1970年1月1日起经过的毫秒数。 elapsedTime：计时器经过的时间，单位为毫秒。 |
TextTimerController
TextTimer组件的控制器，用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器。
导入对象
textTimerController: TextTimerController = new TextTimerController()
start
start()
计时开始。
pause
pause()
计时暂停。
reset
reset()
重置计时器。
示例
// xxx.ets
@Entry
@Component
struct TextTimerExample {
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'mm:ss.SS'
build() {
Column() {
TextTimer({ controller: this.textTimerController, isCountDown: true, count: 30000 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(50)
.onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
})
Row() {
Button("start").onClick(() => {
this.textTimerController.start()
})
Button("pause").onClick(() => {
this.textTimerController.pause()
})
Button("reset").onClick(() => {
this.textTimerController.reset()
})
}
}
}
}
TimePicker
更新时间: 2023-02-17 09:19
滑动选择时间的组件。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TimePicker(options?: {selected?: Date})
默认以24小时的时间区间创建滑动选择器。
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
selected | Date | 否 | 设置选中项的时间。 默认值：当前系统时间 |
属性
名称 | 参数类型 | 描述 |
useMilitaryTime | boolean | 展示时间是否为24小时制，不支持动态修改。 默认值：false |
事件
名称 | 功能描述 |
onChange(callback: (value: TimePickerResult ) => void) | 选择时间时触发该事件。 |
TimePickerResult对象说明
名称 | 参数类型 | 描述 |
hour | number | 选中时间的时。 |
minute | number | 选中时间的分。 |
示例
时间选择器
// xxx.ets
@Entry
@Component
struct TimePickerExample {
@State isMilitaryTime: boolean = false
private selectedTime: Date = new Date('2022-07-22T08:00:00')
build() {
Column() {
Button('切换12小时制/24小时制')
.margin({ top: 30 })
.onClick(() => {
this.isMilitaryTime = !this.isMilitaryTime
})
TimePicker({
selected: this.selectedTime,
})
.useMilitaryTime(this.isMilitaryTime)
.onChange((value: TimePickerResult) => {
this.selectedTime.setHours(value.hour, value.minute)
console.info('select current date is: ' + JSON.stringify(value))
})
}.width('100%')
}
}
Toggle
更新时间: 2023-02-17 09:19
组件提供勾选框样式、状态按钮样式及开关样式。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
仅当ToggleType为Button时可包含子组件。
接口
Toggle(options: { type: ToggleType, isOn?: boolean })
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
type | ToggleType | 是 | 开关类型。 |
isOn | boolean | 否 | 开关是否打开，true：打开，false：关闭。 默认值：false |
ToggleType枚举说明
名称 | 描述 |
Checkbox | 提供单选框样式。 > 说明： > 通用属性padding的默认值为： { top: 14 vp, right: 6 vp, bottom: 14 vp, left: 6 vp } |
Button | 提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。 |
Switch | 提供开关样式。 > 说明： > 通用属性padding默认值为： { top: 12 vp, right: 12 vp, bottom: 12 vp, left: 12 vp } |
属性
名称 | 参数 | 参数描述 |
selectedColor | 设置组件打开状态的背景颜色。 | |
switchPointColor | 设置Switch类型的圆形滑块颜色。 > 说明： > 仅对type为ToggleType.Switch生效。 |
事件
名称 | 功能描述 |
onChange(callback: (isOn: boolean) => void) | 开关状态切换时触发该事件。 |
示例
// xxx.ets
@Entry
@Component
struct ToggleExample {
build() {
Column({ space: 10 }) {
Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
Toggle({ type: ToggleType.Switch, isOn: false })
.selectedColor('#007DFF')
.switchPointColor('#FFFFFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor('#007DFF')
.switchPointColor('#FFFFFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
}
Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
Toggle({ type: ToggleType.Checkbox, isOn: false })
.size({ width: 20, height: 20 })
.selectedColor('#007DFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({ type: ToggleType.Checkbox, isOn: true })
.size({ width: 20, height: 20 })
.selectedColor('#007DFF')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
}
Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
Toggle({ type: ToggleType.Button, isOn: false }) {
Text('status button').fontColor('#182431').fontSize(12)
}.width(106)
.selectedColor('rgba(0,125,255,0.20)')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('status button').fontColor('#182431').fontSize(12)
}.width(106)
.selectedColor('rgba(0,125,255,0.20)')
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
}
}.width('100%').padding(24)
}
}
赞
收藏
回复
相关推荐
