鸿蒙OS开发实例:【demo选择列表限定数量】

效果图:

cke_143.png

示例代码

// 使用 DevEco Studio 3.1.1 Release 及以上版本,API 版本为 api 9 及以上。
// 主要功能及注意事项:
// 该组件展示了一个乘客选择列表。列表中的每个项目包含一个复选框和对应的乘客姓名,
// 用户点击任意一项即可切换其选中状态。组件通过限制最多只能选择5名乘客,
// 并在超过限制时通过promptAction模块弹出 toast 提示用户。
// 注意,代码中的Checkbox组件目前设置为不可更改(enabled(false)),
// 在实际应用中可以根据需求决定是否允许用户手动改变复选框状态。


// 导入提示操作模块
import promptAction from '@ohos.promptAction';

// 定义数据模型类ItemData
class ItemData {
  // 名字属性
  name: string;
  // 是否选中属性
  isSelect: boolean;

  // 构造函数初始化数据
  constructor(name: string, isSelect: boolean) {
    this.name = name;
    this.isSelect = isSelect;
  }
}

// 标记为入口文件并创建组件
@Entry
@Component
struct test {
  // 状态变量arr用于存储ItemData对象数组
  @State arr: Array<ItemData> = [
    new ItemData('赵大', false),
    new ItemData('钱二', false),
    new ItemData('张三', false),
    new ItemData('李四', false),
    new ItemData('王五', false),
    new ItemData('周六', false),
    new ItemData('李七', false),
    new ItemData('朱八', false)
  ];

  // 构建UI组件的方法
  build() {
    // 创建垂直方向布局
    Column() {
      // 显示提示文本
      Text('请选择乘客,最多限五人')
        .margin({ top: '60lpx', left: '50lpx', bottom: '10lpx' });

      // 遍历存储乘客信息的数据数组
      ForEach(this.arr, (item: ItemData, index: number) => {
        // 创建水平方向布局
        Row() {
          // 创建复选框组件,禁用修改(此处可能是样式演示,实际应用中可去除.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")

          // 当行组件点击事件处理

        }
        .onClick(() => {
          // 反转当前项的选中状态
          item.isSelect = !item.isSelect;

          // 计算已选中乘客数量
          let isSelectCount = 0;
          for (let i = 0; i < this.arr.length; i++) {
            if (this.arr[i].isSelect) {
              isSelectCount++;
            }
          }

          // 如果已选中超过5人,则恢复当前项未选中状态并弹出提示
          if (isSelectCount > 5) {
            item.isSelect = !item.isSelect;
            try {
              // 使用promptAction模块显示toast消息
              promptAction.showToast({
                message: '最多限五人',
                duration: 2000,
                bottom: '375lpx'
              });
            } catch (error) {
              // 忽略错误
            }
            return;
          }

          // 更新数组中对应项的状态
          this.arr[index] = new ItemData(item.name, item.isSelect);
        })
        // 设置行组件的边距
        .margin({ left: '40lpx', top: '10lpx' })
      })
    } // 设置Column组件的整体样式
    .width('100%')
    .height('100%')
    .backgroundColor("#FFF2F3F2")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start);
  }
}
鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术
鸿蒙技术文档开发知识更新库gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在这。或+mau123789学习,是v喔

http://www.niftyadmin.cn/n/5452080.html

相关文章

这学期学Java,上学期c语言,第一次写对Java的题,记录一下

7-1 求最大值 本题目要求读入2个整数A和B&#xff0c;然后输出两个数的最大值。 输入格式: 输入在一行中给出2个绝对值不超过1000的整数A和B。 输出格式: 对每一组输入&#xff0c;在一行中输出最大值。 输入样例: 在这里给出一组输入。例如&#xff1a; 18 -299输出样…

代码随想录算法训练营三刷day35 |贪心 之 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球

三刷day35 860.柠檬水找零406.根据身高重建队列452. 用最少数量的箭引爆气球 860.柠檬水找零 题目链接 解题思路&#xff1a; 局部最优&#xff1a;遇到账单20&#xff0c;优先消耗美元10&#xff0c;完成本次找零。全局最优&#xff1a;完成全部账单的找零。 代码如下&#x…

C++_回文串

目录 回文子串 最长回文子串 分割回文串 IV 分割回文串 II 最长回文子序列 让字符串成为回文串的最少插入次数 回文子串 647. 回文子串 思路&#xff0c;i j表示改范围内是否为回文串&#xff0c; ②倒着遍历是为了取出dp[i 1][j - 1] ③i j 只有一对&#xff0c;不会重复…

LeetCode-热题100:239. 滑动窗口最大值

题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a; nums [1,3,-1,-3,5,3,6…

javaWeb健身房管理系统

一、简介 随着人们健康意识的增强和生活水平的提高&#xff0c;健身已经成为了现代人生活中不可或缺的一部分。为了更好地管理健身房的日常运营&#xff0c;我们设计并开发了一款基于 JavaWeb 的健身房管理系统。本系统采用了最新的技术&#xff0c;包括 Spring Boot、MyBatis…

CAPL - 如何实现弹窗提示和弹窗操作(续)

目录 函数介绍 openPanel closePanel 代码示例 1、简单的打开关闭panel面板

AI入侵游戏业:是颠覆者还是创新助手?揭秘未来游戏新趋势!

在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经成为各行各业的关注焦点。而在娱乐产业中&#xff0c;AI技术的引入也让人们对电子游戏的未来发展产生了无限遐想。那么&#xff0c;AI究竟会给电子游戏行业带来怎样的变革&#xff1f;它会成为行业的颠…