鸿蒙问卷投票台页面构建：核心投票题与回收趋势模块详解

前言

在 HarmonyOS 6.0 应用开发中，问卷调研类页面的投票结果展示和回收趋势分析是发布者最关注的数据分析模块。本文将以“问卷投票台”应用中的“核心投票题”投票条模块和“回收趋势”柱状图模块为例，深入解析如何在鸿蒙平台上构建投票结果可视化和回收趋势分析界面。

背景

在问卷调研场景中，发布者需要了解每个题目的选项分布情况，同时关注每日回收量的变化趋势。核心投票题模块通过四个投票条展示图书馆自习区（42%）、食堂就餐区（28%）、宿舍公共洗衣区（18%）、运动场照明（12%）的投票占比；回收趋势模块通过柱状图展示近7天的回收量变化趋势。通过 HarmonyOS 6.0 的声明式 UI 框架，LinearProgressIndicator 可以实现投票条，FractionallySizedBox 配合 Row 可以实现柱状图。

HarmonyOS 6.0 跨端开发介绍（数据分析篇）

HarmonyOS 6.0 的 ArkUI 框架在构建投票结果模块时，LinearProgressIndicator 进度条组件配合 Column 垂直布局可以清晰展示每个选项的投票占比。回收趋势模块使用与本周用电趋势相同的柱状图设计——FractionallySizedBox 的 heightFactor 控制条形高度，Row + Expanded 实现等宽分布。整个页面的配色以深海军蓝背景突出柱状图，白色面板展示投票结果。

开发核心代码（分段解析）

模块一：核心投票题模块的数据组织与投票条布局

核心投票题模块首先通过 _buildTitle 显示“核心投票题”主标题和“第 3 题”题号标识。题目文本为“你最希望优先改善哪个校园公共空间？”，字号 bodyLarge，行高1.45，字重900加粗。下方通过 _buildVoteBar 方法构建四个投票选项：

_buildVoteBar(theme, '图书馆自习区', 0.42, '42%', _blue),
_buildVoteBar(theme, '食堂就餐区', 0.28, '28%', _green),
_buildVoteBar(theme, '宿舍公共洗衣区', 0.18, '18%', _orange),
_buildVoteBar(theme, '运动场照明', 0.12, '12%', _purple),

图书馆自习区占比最高（42%），运动场照明最低（12%）。_buildVoteBar 方法内部使用 LinearProgressIndicator，value 参数控制进度条填充比例，minHeight: 9 控制粗细为9像素。上层 Row 显示选项名称（左）和百分比（右，主题色加粗）。背景色为主题色12%透明度，填充色为主题色完全不透明。

模块二：回收趋势模块的数据结构与柱状图布局

回收趋势模块采用深海军蓝背景（_navy），圆角24，标题区使用 _buildDarkTitle 显示“回收趋势”主标题和“近 7 天”时间范围标识。柱状图数据定义如下：

final days = [
  ('一', 0.35, _cyan), ('二', 0.48, _blue), ('三', 0.42, _green),
  ('四', 0.66, _orange), ('五', 0.78, _purple), ('六', 0.58, _rose),
  ('日', 0.72, _cyan),
];

柱状图区域固定高度128像素，使用 Row + Expanded 等宽布局，每个条形左右外边距5像素。FractionallySizedBox 的 heightFactor 控制条形高度比例（0.35到0.78之间），周五一最高（0.78），周一最低（0.35）。条形宽度20像素，圆角999（完全圆角），颜色根据回收量高低变化。下方星期标签使用白色72%透明度加粗。

心得

通过实现核心投票题和回收趋势这两个模块，我总结出几点经验。第一，投票条使用不同颜色区分选项（蓝、绿、橙、紫），用户无需阅读百分比就能直观感知各选项的占比差异。第二，图书馆自习区以42%明显领先，说明这是学生最关注的改善方向。第三，回收趋势柱状图中周五达到峰值（0.78），可能是问卷推广活动集中在周中后期。第四，进度条粗细9像素比之前模块的8像素稍粗，在投票场景中更醒目。第五，深色背景上的柱状图使用白色72%透明度的星期标签，保证了可读性又不抢夺主视觉。最后需要强调的是，投票条的百分比应该基于真实投票数据动态计算，柱状图的 heightFactor 需要先对原始数据进行归一化处理。

总结

本文详细解析了“问卷投票台”应用中核心投票题和回收趋势两个核心模块的实现思路。核心投票题模块通过四个投票条展示图书馆自习区（42%）、食堂就餐区（28%）、宿舍公共洗衣区（18%）、运动场照明（12%）的投票占比；回收趋势模块在深海军蓝背景上通过柱状图展示近7天的回收量变化趋势，周五达到峰值。两个模块共同展示了 HarmonyOS 6.0 声明式 UI 在问卷数据分析场景中的高效表达能力——进度条实现投票可视化，柱状图实现趋势分析。后续技术博客将聚焦于题目预览、受众面板、最新提交和导出提示等剩余模块的实现，敬请期待。