效果圖：

示例代碼

// 使用 DevEco Studio 3.1.1 Release 及以上版本，API 版本為 api 9 及以上。
// 主要功能及注意事項(xiàng)：
// 該組件展示了一個(gè)乘客選擇列表。列表中的每個(gè)項(xiàng)目包含一個(gè)復(fù)選框和對(duì)應(yīng)的乘客姓名，
// 用戶點(diǎn)擊任意一項(xiàng)即可切換其選中狀態(tài)。組件通過(guò)限制最多只能選擇5名乘客，
// 并在超過(guò)限制時(shí)通過(guò)promptAction模塊彈出 toast 提示用戶。
// 注意，代碼中的Checkbox組件目前設(shè)置為不可更改（enabled(false)），
// 在實(shí)際應(yīng)用中可以根據(jù)需求決定是否允許用戶手動(dòng)改變復(fù)選框狀態(tài)。


// 導(dǎo)入提示操作模塊
import promptAction from '@ohos.promptAction';

// 定義數(shù)據(jù)模型類(lèi)ItemData
class ItemData {
  // 名字屬性
  name: string;
  // 是否選中屬性
  isSelect: boolean;

  // 構(gòu)造函數(shù)初始化數(shù)據(jù)
  constructor(name: string, isSelect: boolean) {
    this.name = name;
    this.isSelect = isSelect;
  }
}

// 標(biāo)記為入口文件并創(chuàng)建組件
@Entry
@Component
struct test {
  // 狀態(tài)變量arr用于存儲(chǔ)ItemData對(duì)象數(shù)組
  @State arr: Array< ItemData > = [
    new ItemData('趙大', false),
    new ItemData('錢(qián)二', false),
    new ItemData('張三', false),
    new ItemData('李四', false),
    new ItemData('王五', false),
    new ItemData('周六', false),
    new ItemData('李七', false),
    new ItemData('朱八', false)
  ];

  // 構(gòu)建UI組件的方法
  build() {
    // 創(chuàng)建垂直方向布局
    Column() {
      // 顯示提示文本
      Text('請(qǐng)選擇乘客，最多限五人')
        .margin({ top: '60lpx', left: '50lpx', bottom: '10lpx' });

      // 遍歷存儲(chǔ)乘客信息的數(shù)據(jù)數(shù)組
      ForEach(this.arr, (item: ItemData, index: number) = > {
        // 創(chuàng)建水平方向布局
        Row() {
          // 創(chuàng)建復(fù)選框組件，禁用修改（此處可能是樣式演示，實(shí)際應(yīng)用中可去除.enabled(false)）
          Checkbox()
            .enabled(false)
            .select(item.isSelect)
            .width('41lpx')
            .height('41lpx')
            .selectedColor("#FF53B175");

          // 顯示乘客姓名文本
          Text(item.name)
            .fontSize('27lpx')
            .margin({ left: '10lpx' })
            .fontWeight(400)
            .fontColor(item.isSelect ? "#FF53B175" : "#FF181725")

          // 當(dāng)行組件點(diǎn)擊事件處理

        }
        .onClick(() = > {
          // 反轉(zhuǎn)當(dāng)前項(xiàng)的選中狀態(tài)
          item.isSelect = !item.isSelect;

          // 計(jì)算已選中乘客數(shù)量
          let isSelectCount = 0;
          for (let i = 0; i < this.arr.length; i++) {
            if (this.arr[i].isSelect) {
              isSelectCount++;
            }
          }

          // 如果已選中超過(guò)5人，則恢復(fù)當(dāng)前項(xiàng)未選中狀態(tài)并彈出提示
          if (isSelectCount > 5) {
            item.isSelect = !item.isSelect;
            try {
              // 使用promptAction模塊顯示toast消息
              promptAction.showToast({
                message: '最多限五人',
                duration: 2000,
                bottom: '375lpx'
              });
            } catch (error) {
              // 忽略錯(cuò)誤
            }
            return;
          }

          // 更新數(shù)組中對(duì)應(yīng)項(xiàng)的狀態(tài)
          this.arr[index] = new ItemData(item.name, item.isSelect);
        })
        // 設(shè)置行組件的邊距
        .margin({ left: '40lpx', top: '10lpx' })
      })
    } // 設(shè)置Column組件的整體樣式
    .width('100%')
    .height('100%')
    .backgroundColor("#FFF2F3F2")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start);
  }
}

審核編輯 黃宇