基于 HarmonyOS 6.0 的高颜值答题页面实战开发：ArkUI 页面构建与组件化解析

前言

随着 HarmonyOS 生态逐步成熟，HarmonyOS 6.0 在跨端能力、ArkUI 声明式开发以及分布式体验方面已经进入了真正可落地的阶段。相比传统 Android XML 布局模式，HarmonyOS 6.0 更强调组件化、状态驱动以及跨设备一致性，这使得页面开发效率与 UI 灵活性都得到了显著提升。尤其是在教育、考试、知识付费等场景中，高质量答题页面已经成为移动端产品的重要组成部分，一个兼顾视觉效果与交互体验的页面，往往能够直接提升用户停留时长与整体产品体验。

本文将基于 HarmonyOS 6.0 的 ArkTS + ArkUI 开发体系，实现一个现代化的“单选题答题卡页面”，并详细解析页面布局构建、组件封装、状态控制以及 UI 设计思路。文章不仅会给出完整核心代码，还会从 HarmonyOS 页面开发角度深入分析组件化思想与跨端构建逻辑，帮助大家真正理解 HarmonyOS 6.0 页面开发体系。

背景

在传统移动端开发中，一个答题页面往往会包含大量重复代码，例如选项组件、状态切换逻辑、题目卡片布局等。如果直接使用普通布局硬编码，不仅后期维护困难，而且页面复用性极差。当项目进入复杂业务阶段，例如在线考试系统、智能学习平台、职业教育 App 等场景时，代码膨胀问题会非常严重。

HarmonyOS 6.0 提供的 ArkUI 声明式开发模式，本质上是一种“状态驱动 UI”的开发理念。开发者不再需要频繁操作 View，而是通过数据状态直接控制页面刷新。相比传统 imperative UI 编程方式，这种模式更适合复杂业务页面开发。

本文实现的页面效果主要包含：

• 题型标签
• 当前题号显示
• 问题内容区域
• 多个选项卡片
• 选中态高亮效果
• 卡片圆角与渐变视觉设计

整体页面风格偏向现代化教育 App UI，具有较强的商业项目实战价值。

HarmonyOS 6.0 跨端开发介绍

HarmonyOS 6.0 最大的优势之一，就是“一次开发，多端部署”。开发者可以基于 ArkUI 构建统一页面逻辑，然后适配手机、平板、折叠屏甚至车机场景。相比传统 Android 开发需要针对不同设备单独适配，HarmonyOS 在页面布局层面已经进行了大量统一封装。

当前 HarmonyOS 6.0 的核心开发体系主要包含以下几个部分：

技术模块	作用
ArkTS	HarmonyOS 主开发语言
ArkUI	声明式 UI 框架
Stage 模型	新一代应用生命周期
分布式能力	多设备协同
DevEco Studio	官方 IDE

其中 ArkUI 是页面开发的核心，其设计理念与 Flutter、React 非常接近，但又融合了 HarmonyOS 自身的分布式特性。

例如在 Flutter 中，页面通常通过 Widget 树构建，而在 HarmonyOS 中，则通过 @Component 与声明式布局进行构建：

@Component
struct DemoPage {
  build() {
    Column() {
      Text("HarmonyOS 6.0")
    }
  }
}

整个 UI 本质上是一棵组件树，状态变化时页面自动刷新。

相比传统 Android XML：

• 不需要频繁 findViewById
• 不需要手动刷新 View
• 页面逻辑更集中
• 组件复用能力更强
• 更适合大型项目开发

这也是 HarmonyOS 6.0 在现代 UI 架构中的核心优势。

开发核心代码

下面我们将 Flutter 页面逻辑迁移为 HarmonyOS 6.0 ArkUI 页面，并实现完整答题卡页面。

一、页面整体结构实现

首先实现整个题目卡片区域。

@Entry
@Component
struct QuestionPage {

  @State selectedIndex: string = 'A'

  build() {
    Column() {
      this.buildQuestionCard()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F3F6FB')
    .padding(20)
  }

  @Builder
  buildQuestionCard() {
    Column({ space: 16 }) {

      Row() {
        this.buildPill('单选题', '#4F8CFF')

        Blank()

        Text('第 13 题')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor('#6B7280')
      }

      Text('在计算机系统中，CPU 主要由哪两部分组成？')
        .fontSize(24)
        .fontWeight(FontWeight.Bolder)
        .fontColor('#111827')

      this.buildOption('A', '运算器和控制器', '#22C55E', true)

      this.buildOption('B', '存储器和输入设备', '#3B82F6', false)

      this.buildOption('C', '显示器和主板', '#8B5CF6', false)

      this.buildOption('D', '硬盘和内存', '#F59E0B', false)
    }
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(30)
  }
}

这一部分代码主要完成了页面整体结构搭建。HarmonyOS 的声明式 UI 与 Flutter 十分类似，都是通过组件树方式组织页面。这里使用 Column 构建纵向布局，通过 space 属性统一控制组件间距，从而避免大量 margin 编写。

同时整个页面通过：

.backgroundColor('#F3F6FB')

实现浅灰背景，从视觉层面突出白色题目卡片区域，这也是当前主流教育类 App 常见设计风格。

而：

.borderRadius(30)

则实现了大圆角卡片效果，使页面更加现代化。

二、题型标签组件封装

接下来实现顶部“单选题”标签组件。

@Builder
buildPill(text: string, color: string) {
  Row() {
    Text(text)
      .fontSize(13)
      .fontColor(Color.White)
      .fontWeight(FontWeight.Bold)
  }
  .padding({
    left: 14,
    right: 14,
    top: 6,
    bottom: 6
  })
  .backgroundColor(color)
  .borderRadius(20)
}

这里的核心思想是“组件封装”。

在实际项目中：

• 单选题
• 多选题
• 判断题
• 简答题

往往只是颜色与文字不同，因此完全没必要重复编写 UI。

通过：

buildPill(text, color)

即可实现动态复用。

这种组件化思想也是 HarmonyOS 6.0 页面开发中的核心能力之一。

三、选项卡片组件实现

接下来是整个页面最核心的部分：选项卡片。

@Builder
buildOption(
  index: string,
  text: string,
  color: string,
  selected: boolean
) {

  Row() {

    Text(index)
      .width(30)
      .height(30)
      .textAlign(TextAlign.Center)
      .borderRadius(15)
      .backgroundColor(selected ? color : Color.White)
      .fontColor(selected ? Color.White : color)
      .fontWeight(FontWeight.Bold)

    Text(text)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .fontColor('#111827')
      .margin({ left: 12 })

    Blank()
  }
  .padding(16)
  .backgroundColor(
    selected ? '#EEF8F1' : '#F8FAFC'
  )
  .borderRadius(18)
  .border({
    width: selected ? 1 : 0,
    color: color
  })
}

这一部分本质上实现的是“状态驱动 UI”。

例如：

selected ? '#EEF8F1' : '#F8FAFC'

用于动态控制选中背景色。

而：

selected ? Color.White : color

则控制文字颜色切换。

这正是 ArkUI 的核心思想：

UI 不再由开发者手动刷新，而是由状态自动驱动。

这种方式相比传统 Android：

view.setBackground()
textView.setTextColor()

更加优雅。

并且代码逻辑更加集中。

四、交互状态控制

接下来为选项增加点击切换逻辑。

.onClick(() => {
  this.selectedIndex = index
})

然后动态判断：

selected: this.selectedIndex === 'A'

完整写法：

this.buildOption(
  'A',
  '运算器和控制器',
  '#22C55E',
  this.selectedIndex === 'A'
)

此时页面已经具备：

• 点击切换
• 自动高亮
• 状态刷新
• 动态 UI 更新

等完整交互能力。

整个过程中无需：

• 手动刷新页面
• notifyDataSetChanged
• setState 大量嵌套

HarmonyOS 的声明式开发优势会非常明显。

心得

在实际开发过程中，我认为 HarmonyOS 6.0 最大的变化，并不仅仅是“国产操作系统”本身，而是它在 UI 架构层面的现代化升级。过去 Android 原生开发中，大量 XML 与 Java/Kotlin 分离会导致页面结构复杂，而 ArkUI 的声明式模式让 UI 与逻辑更加统一。尤其是在复杂页面开发中，例如电商首页、考试系统、数据看板、AI 交互页面等场景，组件化能力会显著提升开发效率。

另外一个非常重要的点，是 HarmonyOS 6.0 的跨端适配能力。传统移动端开发中，很多页面在平板与折叠屏场景下都需要重新适配，但 ArkUI 天然支持响应式布局，这意味着很多 UI 可以自动适应不同尺寸设备。对于未来鸿蒙生态而言，这种能力会越来越重要。

从代码风格来看，HarmonyOS 与 Flutter 的开发思想非常接近，因此如果有 Flutter、React 或 Vue 开发经验，上手 ArkUI 会非常快。但 HarmonyOS 更强调系统级能力，例如分布式协同、多设备流转以及统一生态，这也是它未来的重要竞争力。

总结

本文基于 HarmonyOS 6.0 实现了一个高颜值答题页面，并深入解析了 ArkUI 声明式开发、组件封装、状态驱动 UI 以及跨端页面构建思路。相比传统原生开发模式，HarmonyOS 6.0 在页面开发体验、组件复用能力以及跨设备适配方面已经展现出非常成熟的技术体系。对于当前移动端开发者而言，尽早掌握 ArkUI 与 HarmonyOS 页面构建模式，不仅能够提升自身技术栈竞争力，也能够更好地适应未来多端融合的发展趋势。