「Mac畅玩鸿蒙与硬件29」UI互动应用篇6

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

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

在这里插入图片描述

关键词

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

一、功能说明

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

二、所需组件

@Entry 和 @Component 装饰器
Column 和 Row 布局组件
Checkbox 组件用于用户选择
Button 组件用于提交
@State 修饰符用于状态管理

项目结构

项目名称：MultiSelectSurveyApp
自定义组件名称：SurveyPage
代码文件：SurveyPage.ets、Index.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) // 设置页面内边距}
}