本文为笔记,暂未整理。主要逻辑为,我们有需求,需要再第一个Toggle选中之后,余下的几个Toggle才是可以被修改的状态。
①:当第一个是灰色的时候,余下两个Toggle都是灰色的,并且都是不可选中的。
②:当第一个被选中的时候,余下两个Toggle是可以被选中的。
疑惑点:
为什么使用 .enabled(index === 0 ? true : this.isOnExcludeFirst)
的时候,可以实现上述效果,
但是使用.enabled(index === 0 ? true : this.toggleViewModel.getFirstToggleState())的时候,UI界面无法实时更新?
// import { ObservedPropertySimple, View, Column, Text, Toggle } from '@ohos.arkui.components';
// 定义一个类来管理Toggle的状态
@Observed
class TogglePageViewModel {
toggleArray: Array<ToggleRowItem>;
// 更新第一个Toggle的状态,并触发其他Toggle的状态更新
setFirstToggleState(state: boolean) {
this.toggleArray[0].isOn = state;
}
// 获取第一个Toggle的状态
getFirstToggleState(): boolean {
return this.toggleArray[0].isOn;
}
constructor() {
this.toggleArray = [
new ToggleRowItem('firstMainTitle', 'firstSubTitle', false),
new ToggleRowItem('secondMainTitle', 'secondSubTitle', false),
new ToggleRowItem('thirdMainTitle', 'thirdSubTitle', false)
]
}
}
// 每一行 UI 界面需要的 文字&&状态信息
class ToggleRowItem {
mainTitle: ResourceStr = '';
subTitle: ResourceStr = '';
isOn: boolean = false;
constructor(mainTitle: string, subTitle?: string, isOn?: boolean) {
this.mainTitle = mainTitle;
this.subTitle = subTitle;
isOn = isOn;
}
}
@Styles
function listItemStyle() {
.backgroundColor($r('app.color.white'))
.height(56)
.borderRadius(10)
.padding({ left: 12, right: 12 })
}
@Entry
@Component
export struct TogglePage {
@State toggleViewModel: TogglePageViewModel = new TogglePageViewModel();
@State isOnExcludeFirst: boolean = false;
@Builder
ToggleRow() {
Column() {
List() {
ForEach(this.toggleViewModel.toggleArray, (item: ToggleRowItem, index: number) => {
ListItem() {
Row() {
Column() {
Text(item.mainTitle).fontSize(20).fontWeight(FontWeight.Medium)
Text(item.subTitle).fontSize(16).fontWeight(FontWeight.Regular)
}
Toggle({ type: ToggleType.Switch, isOn: item.isOn })
.onChange((isOn: boolean) => {
if (isOn && index === 0) {
this.isOnExcludeFirst = true;
this.toggleViewModel.setFirstToggleState(true);
console.debug(TAG, `setFirstToggleState ${this.toggleViewModel.getFirstToggleState()}`)
}
if (!isOn && index === 0) {
this.isOnExcludeFirst = false;
this.toggleViewModel.setFirstToggleState(false);
console.debug(TAG, `setFirstToggleState ${this.toggleViewModel.getFirstToggleState()}`)
}
console.debug(TAG, `isOn: ${isOn}, index: ${index}`)
})
}
}
.listItemStyle()
.enabled(index === 0 ? true : this.toggleViewModel.getFirstToggleState())
// .enabled(index === 0 ? true : this.isOnExcludeFirst)
}, (item: ToggleRowItem) => JSON.stringify(item))
}
}
}
build() {
Column() {
this.ToggleRow();
}
}
}
const TAG: string = 'TogglePage.name';