0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-03-26 22:24 次阅读

效果图:

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开发更多内容↓点击HarmonyOSOpenHarmony技术
鸿蒙技术文档开发知识更新库gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在这。或+mau123789学习,是v喔
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    55

    文章

    1629

    浏览量

    42119
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    129

    浏览量

    4279
收藏 人收藏

    评论

    相关推荐

    鸿蒙OS开发实例:【Native C++】

    使用DevEco Studio创建一个Native C++应用。应用采用Native C++模板,实现使用NAPI调用C标准库的功能。使用C标准库hypot接口计算两个给定数平方和的平方根。在输入框中输入两个数字,点击计算结果按钮显示计算后的数值。
    的头像 发表于 04-14 11:43 687次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【Native C++】

    鸿蒙OS开发实例:【HarmonyHttpClient】网络框架

    鸿蒙上使用的Http网络框架,里面包含纯Java实现的HttpNet,类似okhttp使用,支持同步和异步两种请求方式;还有鸿蒙版retrofit,和Android版Retrofit相似的使用,解放双手般优雅使用注解、自动解析json
    的头像 发表于 04-12 16:58 299次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【HarmonyHttpClient】网络框架

    华为鸿蒙生态设备用户已达8亿,鸿蒙商用版星河版即将推出

    据悉,截止至2024年年初,搭载鸿蒙OS的设备数量已达到8亿台,覆盖各类常用终端设备;同时也有众多企业和组织开始着手原生鸿蒙App开发,包括
    的头像 发表于 04-11 16:28 392次阅读

    鸿蒙OS开发学习:【尺寸适配实现】

    鸿蒙开发中,尺寸适配是一个重要的概念,它可以帮助我们在不同屏幕尺寸的设备上正确显示和布局我们的应用程序。本文将介绍如何在鸿蒙开发中实现尺寸适配的方法。
    的头像 发表于 04-10 16:05 642次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>学习:【尺寸适配实现】

    鸿蒙OS南向开发实战:【智能电子牌】

    Demo是基于hi3516dv300开发板,使用开源鸿蒙OpenHarmony 开发的应用。通过该应用不仅可以查看时间、日期以及对应的室内外温湿度、空气质量等,还可以查看当日的行程,
    的头像 发表于 04-09 15:24 473次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b>南向<b class='flag-5'>开发</b>实战:【智能电子牌】

    小米汽车大定数量突破2万,交付周期较长

    3 月 31 日,小米汽车大定数量激增成热点话题,受关注程度持续攀升。据了解,截至昨天,小米汽车已成功锁定了超过 2 万辆订单。此外,多方预测表示,今年小米汽车预计总交付量在 6 万至 8 万辆之间。
    的头像 发表于 04-01 14:16 192次阅读

    鸿蒙开发实例:【demo-搜索历史记录】

    HarmonyOs-demo-搜索历史记录
    的头像 发表于 03-26 22:40 120次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【<b class='flag-5'>demo</b>-搜索历史记录】

    鸿蒙实战项目开发:【短信服务】

    、ohos.permission.GET_TELEPHONY_STATE为system_basic级别(相关权限级别可通过[权限定列表] 查看),需要手动配置对应级别的权限签名(具体操作可查看自动化签名方案; 本示例为预置
    发表于 03-03 21:29

    2024款鸿蒙OS 最新HarmonyOS Next_HarmonyOS4.0系列教程分享

    鸿蒙的出现,标志着中国科技的崛起。HarmonyOS就是我们说的华为鸿蒙系统,截止到2023年8月4日已有超过7亿台设备搭载了鸿蒙OS系统。据多家媒体报道,2024年国内有21所985
    发表于 02-28 10:29

    鸿蒙系统优缺点,能否作为开发选择

    星河版已经是纯血鸿蒙,但是它的发展一些周期。生态圈的建立难度大,各大厂商加入鸿蒙原生开发需要时间累积。 鸿蒙开发人才空缺,由于
    发表于 02-16 21:00

    鸿蒙OS和开源鸿蒙什么关系?

    内核,其他功能都以模块的形式存在。     华为用的是鸿蒙OS 我们都知道,华为手机的鸿蒙OS是可以运行安卓软件的,是因为系统中有安卓兼容层,所以可以简单这么理解:
    的头像 发表于 01-30 15:44 376次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b>和开源<b class='flag-5'>鸿蒙</b>什么关系?

    免费学习鸿蒙(HarmonyOS)开发,一些地址分享

    国内一流高校。通过鸿蒙班的设立,高校可以为学生提供专业的鸿蒙OS学习环境和丰富的实践机会,培养出更多的鸿蒙开发人才,为
    发表于 01-12 20:48

    鸿蒙 OS 应用开发初体验

    的操作系统平台和开发框架。HarmonyOS 的目标是实现跨设备的无缝协同和高性能。 DevEco Studio 对标 Android Studio,开发鸿蒙 OS 应用的 IDE。
    发表于 11-02 19:38

    Orange Pi OS(OH)发布,开源鸿蒙PC端来了!

    正式向大家宣布一个喜讯:基于OpenHarmony定制研发的Orange Pi OS(OH)即将发布!日前,迅龙开源鸿蒙的工程师团队已经在搭载RK3566的开发板Orange Pi 3B上完成
    发表于 10-26 11:32

    华为鸿蒙OS4.0定档8月4号,华为Mate60首发

      在本届大会上,华为将展示鸿蒙生态界的新成果、新开放能力以及鸿蒙开发产品套件。对于许多用户来说,本次会议最值得期待的是鸿蒙os 4.0。
    的头像 发表于 06-15 10:55 4942次阅读