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

news2024/11/25 23:04:51

效果图:

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.coloradmin.cn/o/1546948.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis如何应对缓存穿透问题——Java全栈知识(9)

我们在正常使用缓存的时候的流程大概就是这样的&#xff1a; 请求访问缓存&#xff0c;缓存有数据就返回&#xff0c;缓存无数据就去数据库里面查数据写入到缓存中。 1、缓存穿透问题 但是如果由恶意请求&#xff0c;短时间内大量的访问不存在的数据&#xff0c;这时每个请求…

工作中遇到的疑难杂症,以及解决办法

一 pagehelper和自定义mybatis拦截器冲突bug 1.1 问题描述 当在springboot工程&#xff0c;持久层使用mybatis&#xff0c;且使用pagehelper实现分页功能&#xff0c;当随着业务发展&#xff0c;需要自定义一个mybatis的拦截器实现sql的打印&#xff0c;但是出现拦截器失效&…

flac和mp3可以互相转换吗?flac和mp3互相转换的方法

一&#xff0c;什么是FLAC格式 FLAC即是Free Lossless Audio Codec的缩写&#xff0c;中文可解为无损音频压缩编码。FLAC是一套著名的自由音频压缩编码&#xff0c;其特点是无损压缩。不同于其他有损压缩编码如MP3 及 AAC&#xff0c;它不会破坏任何原有的音频资讯&#xff0c…

【保姆级教程】YOLOv8自动数据标注

一、YOLOV8环境准备 1.1 下载安装最新的YOLOv8代码 仓库地址&#xff1a; https://github.com/ultralytics/ultralytics1.2 配置环境 pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple1.3 安装labelme标注工具 pip install labelme二、半自动标注…

MATLAB 自定义生成直线点云(详细介绍) (47)

MATLAB 自定义生成直线点云 (详细介绍)(47) 一、算法介绍二、具体步骤二、算法实现1.代码2.效果一、算法介绍 通过这里的直线生成方法,可以生成模拟直线的点云数据,并通过调整起点、终点、数量和噪声水平等参数来探索不同类型的直线数据。这种方法可以用于测试、验证和开…

【考研数学】跟武忠祥,如何使用好《复习全书》和《高数辅导讲义》?

本人就是全程跟武忠祥老师高分上岸的&#xff01; 高数辅导讲义建议在强化阶段再买就行 在基础阶段把基础篇吃透就ok 本人属于基础很差相当于是零基础的考研党&#xff0c;经过一年备考成功上岸 中间花费了很多时间在考研数学备考信息检索上&#xff0c;写下这篇希望能帮助…

H264码流结构介绍

H264的码流格式 一般有两种格式&#xff1a; 1、Annex B&#xff08;字节流格式&#xff09;&#xff1a;由Network Abstraction Layer Units (NALU)组成&#xff0c;也被称为NAL。每个NALU包都可以被单独解析和处理。 2、MP4格式&#xff0c;也叫RTP包格式。MP4 格式没有起始…

Java Web-Maven

Maven是apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具 Maven的作用 1.依赖管理:方便快捷的管理项目依赖资源(jar包)&#xff0c;避免版本冲突问题 我们有的项目需要大量的jar包&#xff0c;采用手动导包的方式非常繁琐&#xff0c;并且版本升级也…

睿眼(Realeye)视觉识别模型训练全流程心得分享

睿眼&#xff08;Realeye&#xff09;是一款集智能采集、识别、定位、抓取、视控全流程为一体的 AI 产品&#xff0c; 以其 AI 算法结合机械臂硬件实现对万事万物的定位抓取功能&#xff0c;能够实现对任意目标物从图 片采集、标注到模型训练和抓取。通过人性化的交互方式、易操…

深度剖析python的就业面

技术行业&#xff0c;一定要提升技术功底&#xff0c;丰富项目实战经验&#xff1b; 这对于你未来几年职业规划&#xff0c;以及测试技术掌握的深度非常有帮助。 WEB开发 尽管目前Python并不是做Web开发的首选&#xff0c;但这仍是一个比较热门的方向。 现如今有不少知名网…

【STL学习】(2)string的模拟实现

前言 本文将模拟实现string的一些常见功能&#xff0c;目的在于加深理解string与回顾类与对象的相关知识。 一、前置知识 string是表示可变长的字符序列的类string的底层是使用动态顺序表存储的string对象不以’\0’字符为终止算长度&#xff0c;而是以size有效字符的个数算长…

嵌入式开发过程中应该养成的习惯!

最近有一些读者来咨询:有什么需要注意的编程好习惯?给大家分享一下。 第一:多看官方文档 不要被这几个字吓到,官方文档其实都是宝藏。 一个成熟的技术诞生,可以没有博客没有书籍,但一定会有一个官方文档,毋庸置疑,它一定是最准确、最实时的资料。编写官方文档的人,…

【SAP2000】碰撞分析 Impact Analysis

碰撞分析 Impact Analysis CSI程序的动力分析功能非常广泛。一个例子是分析两个质量或结构之间碰撞效应的能力。 The possibilities of dynamic analysis with CSI programs are very extensive. An example of this is the ability to analyze the effects of collision bet…

Leetcode算法题笔记(2)

目录 图论51. 岛屿数量解法一 52. 腐烂的橘子解法一 53. 课程表解法一 54. 实现 Trie (前缀树)解法一 回溯55. 全排列解法一 56. 子集解法一解法二 57. 电话号码的字母组合解法一 58. 组合总和解法一解法二 59. 括号生成解法一解法二 60. 单词搜索解法一 61. 分割回文串解法一 …

一文看懂什么是OpenHarmony流转架构

随着全场景多设备的生活方式不断深入&#xff0c;用户拥有的设备越来越多&#xff0c;不同设备都能在适合的场景下提供良好的体验&#xff0c;例如手表可以提供及时的信息查看能力&#xff0c;电视可以带来沉浸的观影体验。但是&#xff0c;每个设备也有使用场景的局限&#xf…

【Python】Data Science with Python 数据科学(1)环境搭建

一、操作系统 使用运行在Windows11主机上的Ubuntu 22.04虚拟机&#xff0c;虚拟化平台为Oracle VM VirtualBox。 二、PyCharm安装 有关PyCharm的安装和快捷方式创建&#xff0c;可分别参考我的博客 Ubuntu安装PyCharm、Ubuntu创建桌面快捷方式 &#xff0c;以及Ubuntu创建桌…

systemd-journal(一)之journalctl命令详解

文章目录 写在前面概述描述不传递参数传递一个或多个匹配参数示例 源选项用法--system, --user-M, --machine-m, --merge-D DIR, --directoryDIR--fileGLOB--rootROOT--imageIMAGE--image-policypolicy--namespaceNAMESPACE 过滤选项用法-S, --since, -U, --until举例&#xff…

孙中茂:摸清自己的性格很重要,只要你的本事够了,在哪个地方都是都会发光的。

《程客有话说》是我们最新推出的一个访谈栏目&#xff0c;邀请了一些国内外有趣的程序员来分享他们的经验、观点与成长故事&#xff0c;我们尝试建立一个程序员交流与学习的平台&#xff0c;也欢迎大家推荐朋友或自己来参加我们的节目&#xff0c;一起加油。 本期我们邀请的程…

第四百二十六回

文章目录 1. 概念介绍2. 实现方法2.1 原生方式2.1 插件方式 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何修改程序的桌面图标"相关的内容&#xff0c;本章回中将介绍如何处理ListView中的事件冲突.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介…

YOLOv9有效改进专栏汇总|未来更新卷积、主干、检测头注意力机制、特征融合方式等创新![2024/3/23]

​ 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 专栏介绍 YOLOv9作为最新的YOLO系列模型&#xff0c;对于做目标检测的同学是必不可少的。本专栏将针对2024年最新推出的YOLOv9检测模型&#xff0…