Компонент тумблера проекта ArkUI of HarmonyOS
1. Операционная среда
Операционная система: Windows 10 Professional, IDE: DevEco Studio 3.1, SDK: HarmonyOS 3.1.
2. Тумблер в сборе
интерфейс
Toggle (опции: { type: ToggleType, isOn?: boolean })
параметр
имя параметра |
Тип параметра |
Необходимый |
значение по умолчанию |
Описание параметра |
---|---|---|---|---|
тип |
ToggleType |
да |
- |
Тип переключателя. |
включен |
логическое значение |
нет |
ЛОЖЬ |
Включен ли переключатель: true: включено, false: выключено. |
Toggle({type: ToggleType.Switch})
Toggle({type: ToggleType.Checkbox})
Атрибуты
имя |
параметр |
значение по умолчанию |
Описание параметра |
---|---|---|---|
выбранныйЦвет |
- |
Установите цвет фона компонента, когда он открыт. |
|
SwitchPointColor |
- |
Установите цвет круглого ползунка типа переключателя. проиллюстрировать: Действует только для типа ToggleType.Switch. |
событие
имя |
Описание функции |
---|---|
onChange (обратный вызов: (isOn: boolean) => void) |
Это событие срабатывает при изменении состояния переключателя. |
3. Пример
@Entry
@Component
struct Index {
// @ts-ignore
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(0x39a2db)
.switchPointColor(0xe5ffffff)
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({type: ToggleType.Checkbox, isOn: true })
Toggle({type: ToggleType.Button}) {
Text('按钮样式')// 添加一个子组件
.fontSize(20)
}
.size({width: 120, height: 60})
}
.width('100%')
}
.height('100%')
}
}