定义多层Toggle选项，第一层为总开关

本文为笔记，暂未整理。主要逻辑为，我们有需求，需要再第一个Toggle选中之后，余下的几个Toggle才是可以被修改的状态。

①：当第一个是灰色的时候，余下两个Toggle都是灰色的，并且都是不可选中的。

②：当第一个被选中的时候，余下两个Toggle是可以被选中的。

疑惑点：

为什么使用 .enabled(index === 0 ? true : this.toggleViewModel.isFirstOn)

的时候，可以实现上述效果，

但是使用.enabled(index === 0 ? true : this.toggleViewModel.getFirstToggleState())的时候，UI界面无法实时更新？

// 定义一个类来管理Toggle的状态
@Observed
class TogglePageViewModel {
  toggleArray: Array<ToggleRowItem>;
  isFirstOn: boolean =  false;

  // 更新第一个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();

  @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.toggleViewModel.isFirstOn = true;
                    this.toggleViewModel.setFirstToggleState(true);
                    console.debug(TAG, `setFirstToggleState ${this.toggleViewModel.getFirstToggleState()}`)
                  }
                  if (!isOn && index === 0) {
                    this.toggleViewModel.isFirstOn = false;
                    this.toggleViewModel.setFirstToggleState(false);
                    console.debug(TAG, `setFirstToggleState ${this.toggleViewModel.getFirstToggleState()}`)
                  }
                  console.debug(TAG, `isOn: ${isOn}, index: ${index}`)
                })
            } // .enabled(index === 0 ? true : this.toggleViewModel.getFirstToggleState())
             .enabled(index === 0 ? true : this.toggleViewModel.isFirstOn)
          }
          .listItemStyle()
        }, (item: ToggleRowItem) => JSON.stringify(item))
      }
    }
  }

  build() {
    Column() {
      this.ToggleRow();
    }
  }
}

const TAG: string = 'TogglePage.name';