鸿蒙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.mfbz.cn/a/490318.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QT 控件有突出感,定义控件边框

QT 控件有突出感&#xff0c;定义控件边框 1.设计师页面 在flat部分选中 这个时候按钮会失去边框如下图&#xff1a; 然后在.cpp文件中写入代码&#xff1a; ui->pushButton->setStyleSheet("border: 1px solid gray;");按钮就有了新的边框&#xff1a;

2024年大模型面试准备(四):大模型面试必会的位置编码(绝对位置编码sinusoidal,旋转位置编码RoPE,以及相对位置编码ALiBi)

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 合集在这…

Share-ChatGPT官网UI/文件上传/联网搜索/GPTS 一并同步

地址&#xff1a;Share-ChatGPT 文章目录 界面UI&#xff0c;GPTS&#xff0c;读论文&#xff0c;数据分析&#xff0c;写论文视频演示仓库地址 界面 支持多账号同时管理&#xff0c;合理利用资源&#xff1a; UI&#xff0c;GPTS&#xff0c;读论文&#xff0c;数据分析&a…

Redis入门到实战-第十弹

Redis实战热身Geospatial篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、消息代…

OpenHarmony之媒体组件模块简介

源码 本文基于OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;3.2 Release源码foundation目录下的player_framework&#xff0c;在OpenHarmony 2.0 Release版本当中&#xff0c;这个模块的名字叫媒体组件模块&#xff0c;为了方便理解我们在本文中仍旧延…

【CTA动画】制作全记录 笔记

3Dxchange的使用 让图片跳舞 导入&#xff1a;I:\安装包\#动画开发\test\跳舞 model(includeTPose).fbx 转成非标准角色 手动点击骨骼&#xff0c;然后点击人物骨骼&#xff0c;选择00_t-pose 绿灯了就可以转换了&#xff0c;记得启用。 上面的自定义可以先选择3DS 转换后…

Python中lambda函数使用方法

在Python中&#xff0c;lambda 关键字用于创建匿名函数&#xff08;无名函数&#xff09;&#xff0c;这些函数的特点是简洁、一次性使用&#xff0c;并且通常用于只需要一行表达式的简单场景。下面是lambda函数的基本结构和使用方法&#xff1a; 基本语法&#xff1a; lambd…

兼职副业大揭秘:六个潜力满满的赚钱途径

亲爱的朋友&#xff0c;你对兼职副业充满好奇与期待&#xff0c;这非常好&#xff01;在此&#xff0c;我将为你分享一些能够助你赚取额外收入的兼职副业建议。以下是六个颇具潜力的兼职副业方向&#xff0c;希望能为你的探索之路提供些许启发。 1&#xff0c;网络调查与市场洞…

MATLAB 公共区域的点云合并(46)

MATLAB 公共区域的点云合并(46) 一、算法介绍二、算法实现1.代码2.效果一、算法介绍 点云配准后,或者公共区域存在多片点云对场景进行冗余过量表达时,我们需要将点云进行合并,Matlab点云工具中提供了这样的合并函数,通过指定网格步长,对初始点云进行过滤。 函数主要实…

程序员35岁真的就是危机吗?

前言 35岁被认为是程序员职业生涯的分水岭&#xff0c;许多程序员开始担忧自己的职业发展是否会受到年龄的限制。有人担心随着年龄的增长&#xff0c;技术更新换代的速度会使得资深程序员难以跟上&#xff1b;而另一些人则认为&#xff0c;丰富的经验和深厚的技术积累是年轻程…

深度学习pytorch——减少过拟合的几种方法(持续更新)

1、增加数据集 2、正则化(Regularization) 正则化&#xff1a;得到一个更加简单的模型的方法。 以一个多项式为例&#xff1a; 随着最高次的增加&#xff0c;会得到一个更加复杂模型&#xff0c;模型越复杂就会更好的拟合输入数据的模型&#xff08;图-1&#xff09;&#…

实现Redis缓存预热的技巧与方法

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 什么是缓存预热&#xff1f; 缓存预热的作用 如何实现Redis缓存预热&#xff1f; 结语 我的其他博客 前言 在实际的软件开发中…

Java代码基础算法练习-报数问题-2024.03.26

任务描述&#xff1a; 有n个人围成一个圆圈分别编号1~n,从第1个到m循环报数&#xff0c;凡是报到m者离开&#xff0c;求n个 人离开圆圈的次序。 任务要求&#xff1a; 代码示例&#xff1a; package M0317_0331;import java.util.ArrayList; import java.util.List; import j…

Emacs之极速复制文件名、绝对路径等快捷键(一百三十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

大模型面试准备(五):图解 Transformer 最关键模块 MHA

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 合集在这…

优秀电源工程师需要的必备技能

随着电源市场的不断扩张,开关电源行业飞速发展,企业对电源工程师的需求日益增加,对电源工程师的技能要求也日渐提高,相信没有一位电源工程师会错过让自己变得更优秀的机会。作为一名数字电源从业者,今天就带大家细数一下优秀电源工程师具备的那些技能。 一、新手必备课程…

[leetcode]283. 移动零

前言&#xff1a;剑指offer刷题系列 问题&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例&#xff1a; 输入: nums …

【ZZULIOJ】1002: 简单多项式求值(Java)

目录 题目描述 输入 输出 样例输入 样例输出 code 题目描述 对用户输入的任一整数&#xff0c;输出以下多项式的值。 输入 输入整数x的值。 输出 输出一个整数&#xff0c;即多项式的值。 样例输入 1 样例输出 11 code import java.util.*;public class Ma…

【AI与WEB3】未来已来:十大领域揭示AI与Web3如何联手重塑全球经济版图

在不远的未来&#xff0c;当科技的脉搏跳动得愈发强劲有力&#xff0c;AI与Web3这两股创新力量正以前所未有的方式交织共舞&#xff0c;犹如科幻电影中的场景跃然现实。在这场颠覆性的技术革命中&#xff0c;我们正见证着十个关键领域的华丽转身&#xff0c;它们如同璀璨的星辰…

Copilot 编程助手的介绍及使用

介绍 Copilot 是2021年由 GitHub 与 OpenAI 合作研发的一款编程助手&#xff0c;同时也是全球首款使用OpenAI Codex模型&#xff08;GPT-3后代&#xff09;打造的大规模生成式AI开发工具。 Copilot 底层模型目前经过了数十亿行公开代码的训练&#xff0c;与大多数代码辅助工具…
最新文章