「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用

news2024/11/27 8:29:36

本篇将带你实现一个多选问卷小应用,用户可以勾选选项并点击提交按钮查看选择的结果。通过本教程,你将学习如何使用 Checkbox 组件、动态渲染列表、状态管理及用户交互,构建完整的应用程序。

在这里插入图片描述


关键词
  • UI互动应用
  • Checkbox 组件
  • 状态管理
  • 动态列表渲染
  • 用户交互

一、功能说明

本多选问卷小应用允许用户选择多个选项并点击“提交”按钮。提交后会显示用户选择的选项或提示未选择任何选项。这一示例展示了如何使用 Checkbox 组件管理用户选择,并动态显示内容。


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Checkbox 组件用于用户选择
  • Button 组件用于提交
  • @State 修饰符用于状态管理
项目结构
  • 项目名称MultiSelectSurveyApp
  • 自定义组件名称SurveyPage
  • 代码文件SurveyPage.etsIndex.ets

三、代码实现
// 文件名:SurveyPage.ets

// 定义问卷页面组件
@Component
export struct SurveyPage {
  // 问卷选项数组
  questions: string[] = ['选项1', '选项2', '选项3', '选项4'];
  // 状态数组,用于保存每个选项的选中状态
  @State selectedAnswers: boolean[] = [false, false, false, false];
  @State isSubmitted: boolean = false; // 用于指示是否已提交

  // 构建页面布局和组件
  build() {
    Column({ space: 20 }) { // 垂直布局容器,子组件间距为 20
      // 问卷标题
      Text('请选择你喜欢的选项:')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 使用 ForEach 渲染多个复选框
      ForEach(this.questions, (question: string, index: number) => {
        Row() {
          Checkbox({ name: `checkbox${index}`, group: 'surveyGroup' }) // 创建复选框组件
            .select(this.selectedAnswers[index]) // 设置选中状态
            .selectedColor(Color.Blue) // 选中时的颜色
            .onChange((value: boolean) => { // 回调函数,更新选中状态
              this.selectedAnswers[index] = value;
              this.isSubmitted = false; // 每次改变选中状态时重置提交状态
            });
          Text(question) // 显示选项文本
            .fontSize(20)
            .margin({ left: 10 });
        }
      });

      // 提交按钮
      Button('提交')
        .onClick(() => {
          this.submitAnswers(); // 提交时触发的操作
        })
        .fontSize(20)
        .backgroundColor(Color.Green)
        .fontColor(Color.White)
        .margin({ top: 20 });

      // 根据提交状态显示不同内容
      if (this.isSubmitted) {
        if (this.getSelectedOptions().length > 0) {
          Text(`你选择了: ${this.getSelectedOptions().join(', ')}`) // 显示选择结果
            .fontSize(18)
            .fontColor(Color.Blue)
            .margin({ top: 20 });
        } else {
          Text('未选择任何选项')
            .fontSize(18)
            .fontColor(Color.Red)
            .margin({ top: 20 });
        }
      }
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 获取已选中的选项列表
  private getSelectedOptions(): string[] {
    return this.questions.filter((_, index) => this.selectedAnswers[index]);
  }

  // 提交答案的逻辑
  private submitAnswers() {
    this.isSubmitted = true; // 更新提交状态
    console.log('用户提交的答案:', this.getSelectedOptions()); // 在控制台输出选中的答案
  }
}
// 文件名:Index.ets

// 导入自定义组件
import { SurveyPage } from './SurveyPage'

// 定义应用入口组件
@Entry
@Component
struct Index {
  build() {
    Column() {
      SurveyPage() // 引用问卷页面组件
    }
    .padding(20) // 设置页面内边距
  }
}

效果示例:用户选择多个选项并点击“提交”按钮后,应用会在页面上显示用户的选择结果。

在这里插入图片描述


四、代码解读
  • @State selectedAnswers
    用于保存每个选项的选中状态,Checkbox 组件的选中与否根据此状态控制。
  • ForEach 循环
    用于动态生成 Checkbox 组件,方便渲染多项问卷选项。
  • getSelectedOptions() 方法
    返回选中的选项数组,供显示和后续处理。
  • isSubmitted 状态
    用于控制提交按钮点击后的显示效果,以便在页面上显示提交结果。

五、优化建议
  1. 样式调整:可以为 Checkbox 添加自定义样式,使界面更符合应用需求。
  2. 表单验证:在提交前验证用户是否选择了至少一个选项,避免无效提交。
  3. 交互反馈:提交后添加反馈提示,如“提交成功”或弹出确认框。
  4. 多语言支持:通过配置实现不同语言版本的问卷应用。

六、相关知识点
  • 「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解

小结

本篇教程通过多选问卷小应用的实现,演示了 Checkbox 组件的基本用法和状态管理。你学会了如何动态渲染选项并处理用户输入,为开发更复杂的交互应用打下了基础。


下一篇预告

下一篇「UI互动应用篇7 - 简易计步器」将展示如何实现一个简单的计步器应用,帮助用户记录每日步数并显示当前进度。


上一篇:「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
下一篇:「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2233678.html

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

相关文章

【linux 多进程并发】0203 网络资源的多进程处理,子进程完全继承网络套接字,避免“惊群”问题

0203 网络资源的多进程处理 ​专栏内容: postgresql使用入门基础手写数据库toadb并发编程 个人主页:我的主页 管理社区:开源数据库 座右铭:天行健,君子以自强不息;地势坤,君子以厚德载物. 一、概…

江协科技STM32学习- P32 MPU6050

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

程序设计方法与实践-时空权衡

什么是时空权衡? 时空权衡是算法设计中的一个众所周知的问题,也就是对算法的空间和时间效率做出权衡,它大概有分两种形式: 对输入的部分数据或者全部数据作预处理,然后对于获得额外信息储存起来,从而加快…

STM32F1学习——TIM

一、STM32中的定时器 在STM32中分为三种定时器,分别是基本定时器,通用定时器和高级定时器,每种定时器都是向下兼容的。 二、定时器详细介绍 a、基本定时器 基本定时器主要由下面与分频器、计数器 和 自动重装寄存器三个组成的时基单元&#…

W5500-EVB-Pico2评估板介绍

目录 1 概述 2 板载资源 2.1 硬件规格 2.2 硬件规格 2.3 工作条件 3 参考资料 3.1 RP2350 数据手册 3.2 W5500 数据手册 3.3 原理图 原理图 & 物料清单 & Gerber 文件 3.3 尺寸图 (单位 : mm) 3.4 参考例程 认证 CE FCC AWS 资质 Microsoft Azure 认证…

FFmpeg 4.3 音视频-多路H265监控录放C++开发十二:在屏幕上显示多路视频播放,可以有不同的分辨率,格式和帧率。

上图是在安防领域的要求,一般都是一个屏幕上有显示多个摄像头捕捉到的画面,这一节,我们是从文件中读取多个文件,显示在屏幕上。

Oracle视频基础1.4.3练习

15个视频 1.4.3 できない dbca删除数据库 id ls cd cd dbs ls ls -l dbca# delete a database 勾选 # chris 勾选手动删除数据库 ls ls -l ls -l cd /u01/oradata ls cd /u01/admin/ ls cd chris/ ls clear 初始化参数文件,admin,数据文件#新版本了…

一个由Deno和React驱动的静态网站生成器

大家好,今天给大家分享一个由 Deno React 驱动的静态网站生成器Pagic。 项目介绍 Pagic 是一个由 Deno React 驱动的静态网站生成器。它配置简单,支持将 md/tsx 文件渲染成静态页面,而且还有大量的官方或第三方主题和插件可供扩展。 核心…

1分钟解决Excel打开CSV文件出现乱码问题

一、编码问题 1、不同编码格式 CSV 文件有多种编码格式,如 UTF - 8、UTF - 16、ANSI 等。如果 CSV 文件是 UTF - 8 编码,而 Excel 默认使用的是 ANSI 编码打开,就可能出现乱码。例如,许多从网络应用程序或非 Windows 系统生成的 …

发布天工AI高级搜索功能,昆仑万维做最懂科研学术的AI搜索

今天,昆仑万维天工AI正式发布最新版本的AI高级搜索功能。 一年时光,栉风沐雨。昆仑万维致力于通过领先的AI技术,为全球用户提供创新的智能搜索和信息处理解决方案。无论是金融、科技领域的专业搜索还是文档分析,「天工AI高级搜索…

mac找到主目录下的文件夹

访达-(上方状态栏显示)-然后在

安装fpm,解决*.deb=> *.rpm

要从生成 .deb 包转换为 .rpm 包,可以按照以下步骤修改打包脚本 1. 使用 fpm 工具 fpm 是一个强大的跨平台打包工具,可以将 .deb 包重新打包成 .rpm,也可以直接从源文件打包成 .rpm。 安装 fpm sudo apt-get install ruby-dev sudo gem in…

分布式光伏管理办法

随着分布式光伏项目的不断增加,传统的管理方式已经难以满足高效、精准的管理需求。光伏业务管理系统作为一种集信息化、智能化于一体的管理工具,正在逐步成为分布式光伏项目管理的重要支撑。 光伏业务管理系统通过数字化手段实现对光伏业务全流程的精细化…

数据结构:LRUCache

什么是LRUCache 首先我们来看看什么是cache 缓存(Cache)通常用于两个速度不同的介质之间,以提高数据访问的速度和效率。这里有几个典型的应用场景: 处理器和内存之间: 处理器(CPU)的运算速度远…

智能提醒助理系列-springboot项目彩虹日志+TraceID

本系列文章记录“智能提醒助理”产品建设历程,记录实践经验、巩固知识点、锻炼总结能力。 本篇介绍如何让springboot启动日志“彩打” 提升日志识别度,同时增加TraceID,便于同一请求,全链路的追踪。 一、需求出发点 提升日志识别度…

窨井监测遥测终端RTU IP68防水强信号穿透力

在窨井的潮湿 黑暗和腐蚀性环境中 常规物联网设备往往难以生存 如何突破层层环境挑战 轻松应对极端条件 确保信号 24h不掉线,不延迟 不仅是对技术的突破 更是对恶劣环境的征服 ↓↓↓ 坚守 ——严苛环境下的工业设备 计讯物联工业级设备,专为恶劣环境设计…

150道MySQL高频面试题,学完吊打面试官--如何实现索引机制

前言 本专栏为150道MySQL大厂高频面试题讲解分析,这些面试题都是通过MySQL8.0官方文档和阿里巴巴官方手册还有一些大厂面试官提供的资料。 MySQL应用广泛,在多个开发语言中都处于重要地位,所以最好都要掌握MySQL的精华面试题,这也…

基于Matlab 模拟停车位管理系统【源码 GUI】

系统对进入停车位的车辆进行车牌识别,将识别出来的车牌号显示出来;然后对车主进行人脸识别,框出车主照片的人脸部分作为车主信息的标记,记录在系统库中。车辆在库期间,系统使用者可以随意查看车辆与车主信息的获取过程…

微信小程序 https://pcapi-xiaotuxian-front-devtest.itheima.net 不在以下 request 合法域名

微信小程序在调用接口的时候出现以上报错,接口没有问题,是因为小程序自动校验了合法域名 打开本地设置: 勾选不校验合法域名,即可 效果如下:

数据治理,数据提取,大数据中心建设,大数据治理总体解决方案书(word,ppt原件)

1. 数据管理的现状 2. 数据治理的概述 1.1数据治理概念 2.2数据治理目标 3. 数据治理体系 4. 数据治理核心领域 1.1 数据模型 1.2 数据生命周期 (1)数据生成及传输 (2)数据存储 (3)数据处理和应用…