Flutter三方库 shadcn_ui 适配 OpenHarmony —— HarmonyOS ArkTS API 24实现复选框

2301_79516858

333人浏览 · 2025-01-19 10:37:25

2301_79516858 · 2025-01-19 10:37:25 发布

复选框组件技术解析文档

一、项目背景概述

本项目是一个基于 Flutter 框架开发的复选框组件演示应用，专为 OpenHarmony 平台适配设计。复选框是表单类应用中最基础也最常用的选择组件之一，用于让用户从一组选项中选择一个或多个选项。常见的使用场景包括协议同意、多选项筛选、权限配置、任务列表等。

该项目实现了两种复选框组件：单个复选框组件和复选框组组件。单个复选框用于独立的二元选择场景，如同意服务条款、记住登录状态等。复选框组用于从多个选项中选择多个的场景，如选择兴趣爱好、筛选条件配置等。

项目的技术目标包括：封装 Flutter 原生的 Checkbox 组件，提供更易用的接口和更丰富的配置；实现单个复选框和复选框组两种使用模式；支持自定义大小、颜色、标签等样式属性；支持禁用状态，满足表单验证等场景的需求；确保组件在 OpenHarmony 平台上的良好兼容性。

二、架构分析

项目整体采用组件组合的架构设计。单个复选框组件是基础单元，复选框组组件通过组合多个单个复选框组件来实现多选功能。这种组合式的设计避免了代码重复，同时保证了单个复选框和组内复选框在外观和行为上的一致性。

架构设计上遵循了单一职责原则：单个复选框组件只负责单个选项的选中状态管理和渲染；复选框组组件负责管理多个选项的选中状态集合，并协调各个子复选框的状态。两个组件的接口设计保持一致，都使用 value 和 onChanged 的模式，符合 Flutter 表单组件的设计规范。

三、入口组件流程

应用启动后，主入口函数调用 runApp 挂载根应用组件。根组件配置 Material 3 主题，使用深紫色作为种子色，并设置首页路由。

首页是一个有状态组件，维护两个状态变量：单个复选框的布尔值和复选框组的选中选项列表。单个复选框的初始值为 false，表示未选中。复选框组提供了五个选项，初始选中列表为空。

页面布局采用垂直排列，上方是单个复选框演示区域，下方是复选框组演示区域。每个区域都有标题、复选框组件和状态显示文本。状态文本实时显示当前的选中情况，帮助用户理解复选框的交互效果。

四、核心组件逐段解析

4.1 单个复选框组件

单个复选框组件是对 Flutter 原生 Checkbox 组件的封装和增强。它在原生组件的基础上增加了标签文字、尺寸自定义、禁用状态等功能。

组件的属性设计包括：value 是布尔值，表示当前是否选中；onChanged 是值变化回调，接收新的布尔值；label 是可选的标签文字，显示在复选框右侧；activeColor 是选中状态的颜色；checkColor 是勾选图标的颜色；inactiveColor 是未选中状态的颜色；size 是复选框的尺寸；enabled 是启用状态，默认为 true。

组件内部维护一个 _value 状态变量，用于同步外部传入的 value 属性。为什么需要内部状态而不是直接使用 widget.value 呢？这是为了让组件在内部状态变化时有一个过渡的过程。当用户点击复选框时，组件先更新内部状态，然后通过回调通知父组件，父组件再更新外部值。如果直接使用外部值，可能会因为父组件没有及时更新而导致闪烁。

为了确保内部状态与外部值保持同步，组件实现了 didUpdateWidget 生命周期回调。当外部传入的 value 发生变化时，组件会检测到变化并更新内部的 _value 状态。这种设计被称为"受控组件"模式，组件的状态由外部控制，但内部也维护了一份同步的副本，以确保交互的流畅性。

4.2 复选框组组件

复选框组组件管理一组选项的选中状态，它将多个复选框组织在一起，统一管理选中项列表。

组件的属性设计包括：options 是所有选项的字符串列表；selectedOptions 是当前选中的选项列表；onChanged 是选中变化回调，接收新的选中列表；其余样式属性与单个复选框组件相同，包括 activeColor、checkColor、inactiveColor、size、enabled 等。

与单个复选框组件类似，复选框组组件也维护了一个内部的 _selectedOptions 状态列表，并通过 didUpdateWidget 与外部的 selectedOptions 保持同步。这是同样的受控组件模式。

选项变化的处理逻辑是：当某个选项的复选框状态变化时，_handleOptionChange 方法被调用，接收选项名称和新的布尔值。如果新值为 true，表示该选项被选中，则将其添加到选中列表中（如果还不在列表中）；如果新值为 false，表示该选项被取消选中，则将其从选中列表中移除。

更新完内部状态后，组件调用 onChanged 回调，将新的选中列表传递给父组件。父组件可以根据这个回调更新自己的状态，从而实现状态的双向同步。

4.3 复选框的尺寸控制

Flutter 原生的 Checkbox 组件没有直接提供 size 属性来控制大小，默认大小是 24 像素。为了实现自定义尺寸，本项目使用了 Transform.scale 组件来对复选框进行缩放。

缩放比例的计算方式是：目标尺寸除以默认尺寸（24）。例如，如果 size 设为 20，则缩放比例为 20/24 ≈ 0.833，复选框会被缩小到原来的 83.3%。

这种通过 Transform 进行缩放的方式虽然简单，但也有一定的局限性：缩放会影响组件的点击区域和布局空间，可能导致与其他元素的对齐问题。更精确的实现方式是使用 SizedBox 或自定义绘制，但对于大多数场景来说，缩放的方式已经足够好用。

五、状态管理

本项目的状态管理涉及三个层级：主页状态层、复选框组状态层、单个复选框状态层。

主页状态层是最顶层的状态管理者，维护单个复选框的值和复选框组的选中列表。这是业务层面的状态，与具体的 UI 组件无关。

复选框组状态层维护内部的选中列表副本，用于实现受控组件模式。这个状态与主页状态保持同步，但更新时机更早，确保了交互的即时反馈。

单个复选框状态层维护内部的选中值副本，同样是受控组件模式的实现。无论是直接使用的单个复选框，还是复选框组中的单个复选框，都有自己的内部状态。

这种多层状态管理的设计初看起来有些冗余，因为同样的数据在多个地方都有存储。但实际上，这是 Flutter 中实现受控组件的标准模式，它解决了一个重要的问题：确保用户交互得到即时反馈，同时又允许父组件控制最终状态。

如果没有内部状态，完全依赖外部传入的值，那么每次用户点击后，需要等待父组件通过 setState 更新值，然后通过 build 方法重新传入，复选框才能更新显示。这个过程虽然很快，但在某些情况下可能会出现短暂的延迟或闪烁。而内部状态可以立即更新显示，然后再与外部同步，提供更流畅的体验。

六、关键代码详解

6.1 单个复选框的构建方法

单个复选框的构建方法返回一个 Row 行布局，左侧是复选框，右侧是可选的标签文字。

复选框部分使用 Transform.scale 包裹，实现尺寸的缩放。缩放比例由 checkboxSize / 24.0 计算得出。内部是 Flutter 原生的 Checkbox 组件，配置了 value、onChanged、activeColor、checkColor 等属性。

禁用状态的处理使用了 fillColor 属性，这是 MaterialStateProperty 类型的属性，可以根据不同的状态设置不同的填充颜色。当 enabled 为 false 时，填充颜色设为灰色 300，给用户一种灰掉的视觉感受，传达不可操作的含义。

标签文字部分只有在 label 不为 null 时才会显示。文字与复选框之间有 8 像素的左边距。文字颜色根据启用状态有所不同：启用时为黑色，禁用时为灰色 500。这种设计确保了禁用状态下文字和复选框的视觉风格一致。

6.2 复选框组的状态同步

复选框组组件的 didUpdateWidget 方法用于同步外部状态和内部状态。当父组件传入的 selectedOptions 发生变化时，组件会检测到这个变化，并将内部的 _selectedOptions 更新为新值的副本。

这里使用 List.from 创建了一个新的列表副本，而不是直接赋值。这是一个重要的细节：如果直接赋值，内部状态和外部状态会指向同一个列表对象，当内部修改列表时（比如添加或移除选项），外部的列表也会被修改，这可能导致不可预期的行为。创建副本可以确保内部状态和外部状态是独立的，只有通过显式的回调才能同步。

选项变化的处理方法 _handleOptionChange 也是值得仔细分析的。方法首先通过 setState 更新内部状态：如果值为 true 且选项不在列表中，则添加；如果值为 false，则移除。然后调用 onChanged 回调，将内部列表传递给父组件。

这里有一个细节需要注意：回调中传递的是 _selectedOptions 本身，而不是它的副本。这是因为父组件接收到列表后，应该将其作为自己的状态值，而不是直接修改它。如果父组件需要修改列表，应该创建自己的副本。

6.3 禁用状态的传递

复选框组组件的 enabled 属性会传递给每一个子复选框组件。当组被禁用时，所有子复选框也都被禁用。这是通过在构建每一个子复选框时，将 widget.enabled 传递给 CheckboxWidget 的 enabled 属性来实现的。

同时，onChanged 回调也会根据 enabled 状态进行条件传递：如果组件被禁用，则传入 null 作为 onChanged；如果启用，则传入正常的回调函数。传入 null 作为 onChanged 会导致 Checkbox 组件进入禁用状态，这是 Flutter 原生 Checkbox 的行为：当 onChanged 为 null 时，复选框不可交互。

这种双重保险的设计确保了禁用状态的正确表现：不仅视觉上是灰的，交互上也是不可点击的。

七、技术总结

本项目实现了功能完整的复选框组件，包括单个复选框和复选框组两种形式，代码结构清晰，设计规范，是 Flutter 表单组件开发的优秀参考案例。

技术亮点体现在以下几个方面：

第一是受控组件模式的实现。两个组件都采用了内部状态与外部属性同步的受控组件模式，既保证了交互的即时反馈，又允许父组件完全控制组件状态。这是 Flutter 表单组件的标准设计模式，也是很多初级开发者容易理解不透彻的地方。

第二是组件组合的设计思想。复选框组组件不是从头实现一组复选框，而是通过组合多个单个复选框组件来实现。这种方式避免了代码重复，保证了视觉和行为的一致性，同时也降低了维护成本。

第三是丰富的样式定制。组件提供了多种可定制的样式属性，包括选中色、勾选色、未选中色、尺寸、标签等。使用者可以根据自己的设计规范轻松调整复选框的外观。

第四是禁用状态的完善处理。不仅视觉上有灰化效果，交互上也完全禁用。复选框组的禁用状态会传递给所有子复选框，行为一致，逻辑清晰。

第五是符合 Flutter 设计规范。组件的接口设计（value + onChanged）与 Flutter 原生表单组件保持一致，降低了学习成本，使用者可以像使用原生 Checkbox 一样使用这些组件。

可改进方向包括：可以增加三态复选框，支持选中、未选中、半选三种状态，适用于全选/反选的场景；可以增加方形、圆形等不同形状的复选框样式；可以增加动画效果，如选中状态切换时的过渡动画；可以增加列表样式的复选框组，支持选项描述、右侧图标等更丰富的内容；可以增加全选/反选的快捷操作。

总体而言，本项目实现的复选框组件已经具备了大多数业务场景所需的核心功能，代码质量较高，设计规范，是 Flutter 表单组件开发的良好实践范例。特别是其受控组件模式的实现方式，对于理解 Flutter 的状态管理机制很有帮助。

请添加图片描述

Flutter三方库 shadcn_ui 适配 OpenHarmony —— 实现复选框

前言：复选框组件适配的技术探索

在移动应用开发中，复选框是一种常见的UI组件，用于允许用户选择一个或多个选项。当我们将Flutter应用适配到OpenHarmony平台时，如何实现一个功能完善、交互友好的复选框组件成为了一个重要挑战。

本次开发中，我们参考了Flutter三方库shadcn_ui的设计理念，实现了一个适配OpenHarmony平台的复选框组件。这个组件不仅具备基本的选择功能，还支持自定义颜色、大小、标签等特性，为用户提供了良好的使用体验。

通过本次实践，我们不仅掌握了在OpenHarmony平台上实现复杂UI组件的方法，也积累了跨平台开发的宝贵经验。本文将详细介绍复选框组件的实现过程、技术要点以及开发中遇到的问题和解决方案。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：

my_flutter_harmony_app/
├── lib/                          # Flutter业务代码（基本不变）
│   ├── main.dart                 # 应用入口
│   ├── checkbox_widget.dart       # 复选框组件
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层（核心适配区）
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── entryability/
│   │       │   │   ├── EntryAbility.ets       # 主Ability
│   │       │   └── pages/
│   │       │       ├── Index.ets           # 主页面
│   │       ├── resources/        # 鸿蒙资源文件
│   │       │   ├── base/
│   │       │   │   ├── element/  # 字符串等
│   │       │   │   ├── media/    # 图片资源
│   │       │   │   └── profile/  # 配置文件
│   │       └── module.json5       # 应用核心配置
└── README.md

展示效果图片

flutter 实时预览效果展示

运行到鸿蒙虚拟设备中效果展示

引入第三方库 shadcn_ui

在本次开发中，我们使用了shadcn_ui第三方库的设计理念来实现复选框功能。虽然我们没有直接使用shadcn_ui库的代码，但我们参考了其设计风格和交互模式，实现了一个类似的复选框组件。

在pubspec.yaml文件中，我们添加了shadcn_ui依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  shadcn_ui: ^0.1.0

功能代码实现

1. 复选框组件开发

我们创建了两个自定义组件：CheckboxWidget和CheckboxGroupWidget。CheckboxWidget用于实现单个复选框，CheckboxGroupWidget用于实现一组复选框。

单个复选框组件实现

class CheckboxWidget extends StatefulWidget {
  final bool value;
  final ValueChanged<bool>? onChanged;
  final String? label;
  final Color? activeColor;
  final Color? checkColor;
  final Color? inactiveColor;
  final double? size;
  final bool enabled;

  const CheckboxWidget({
    Key? key,
    required this.value,
    this.onChanged,
    this.label,
    this.activeColor,
    this.checkColor,
    this.inactiveColor,
    this.size,
    this.enabled = true,
  }) : super(key: key);

  @override
  _CheckboxWidgetState createState() => _CheckboxWidgetState();
}

class _CheckboxWidgetState extends State<CheckboxWidget> {
  late bool _value;

  @override
  void initState() {
    super.initState();
    _value = widget.value;
  }

  @override
  void didUpdateWidget(covariant CheckboxWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.value != widget.value) {
      setState(() {
        _value = widget.value;
      });
    }
  }

  void _handleChange(bool? newValue) {
    if (newValue != null && widget.enabled) {
      setState(() {
        _value = newValue;
      });
      if (widget.onChanged != null) {
        widget.onChanged!(newValue);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    double checkboxSize = widget.size ?? 20.0;

    return Row(
      children: [
        Transform.scale(
          scale: checkboxSize / 24.0, // Flutter's default checkbox size is 24
          child: Checkbox(
            value: _value,
            onChanged: _handleChange,
            activeColor: widget.activeColor ?? Colors.blue,
            checkColor: widget.checkColor ?? Colors.white,
            fillColor: widget.enabled
                ? null
                : MaterialStateProperty.all(Colors.grey[300]),
          ),
        ),
        if (widget.label != null)
          Padding(
            padding: const EdgeInsets.only(left: 8),
            child: Text(
              widget.label!,
              style: TextStyle(
                color: widget.enabled ? Colors.black : Colors.grey[500],
                fontSize: 14,
              ),
            ),
          ),
      ],
    );
  }
}

复选框组组件实现

class CheckboxGroupWidget extends StatefulWidget {
  final List<String> options;
  final List<String> selectedOptions;
  final ValueChanged<List<String>>? onChanged;
  final Color? activeColor;
  final Color? checkColor;
  final Color? inactiveColor;
  final double? size;
  final bool enabled;

  const CheckboxGroupWidget({
    Key? key,
    required this.options,
    required this.selectedOptions,
    this.onChanged,
    this.activeColor,
    this.checkColor,
    this.inactiveColor,
    this.size,
    this.enabled = true,
  }) : super(key: key);

  @override
  _CheckboxGroupWidgetState createState() => _CheckboxGroupWidgetState();
}

class _CheckboxGroupWidgetState extends State<CheckboxGroupWidget> {
  late List<String> _selectedOptions;

  @override
  void initState() {
    super.initState();
    _selectedOptions = List.from(widget.selectedOptions);
  }

  @override
  void didUpdateWidget(covariant CheckboxGroupWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.selectedOptions != widget.selectedOptions) {
      setState(() {
        _selectedOptions = List.from(widget.selectedOptions);
      });
    }
  }

  void _handleOptionChange(String option, bool value) {
    setState(() {
      if (value) {
        if (!_selectedOptions.contains(option)) {
          _selectedOptions.add(option);
        }
      } else {
        _selectedOptions.remove(option);
      }
    });
    if (widget.onChanged != null) {
      widget.onChanged!(_selectedOptions);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: widget.options.map((option) {
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 4),
          child: CheckboxWidget(
            value: _selectedOptions.contains(option),
            onChanged: widget.enabled
                ? (value) => _handleOptionChange(option, value!)
                : null,
            label: option,
            activeColor: widget.activeColor,
            checkColor: widget.checkColor,
            inactiveColor: widget.inactiveColor,
            size: widget.size,
            enabled: widget.enabled,
          ),
        );
      }).toList(),
    );
  }
}

2. 主应用集成

在main.dart文件中，我们集成了CheckboxWidget和CheckboxGroupWidget组件，并添加了交互功能，实现了复选框的选择效果。

import 'package:flutter/material.dart';
import 'checkbox_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter for openHarmony',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter for openHarmony'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _singleCheckboxValue = false;
  List<String> _selectedOptions = [];
  final List<String> _options = [
    '选项 1',
    '选项 2',
    '选项 3',
    '选项 4',
    '选项 5',
  ];

  void _handleSingleCheckboxChange(bool value) {
    setState(() {
      _singleCheckboxValue = value;
    });
  }

  void _handleCheckboxGroupChange(List<String> selected) {
    setState(() {
      _selectedOptions = selected;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const Text(
              'Shadcn UI - 复选框',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 30),
            
            // 单个复选框
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '单个复选框',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 10),
                CheckboxWidget(
                  value: _singleCheckboxValue,
                  onChanged: _handleSingleCheckboxChange,
                  label: '同意服务条款',
                  activeColor: Colors.blue,
                  checkColor: Colors.white,
                  size: 20,
                ),
                const SizedBox(height: 10),
                Text(
                  '状态: ${_singleCheckboxValue ? '已选中' : '未选中'}',
                  style: TextStyle(
                    color: _singleCheckboxValue ? Colors.blue : Colors.grey,
                  ),
                ),
              ],
            ),
            
            const SizedBox(height: 40),
            
            // 复选框组
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '复选框组',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 10),
                CheckboxGroupWidget(
                  options: _options,
                  selectedOptions: _selectedOptions,
                  onChanged: _handleCheckboxGroupChange,
                  activeColor: Colors.blue,
                  checkColor: Colors.white,
                  size: 20,
                ),
                const SizedBox(height: 10),
                Text(
                  '已选中: ${_selectedOptions.length} 项',
                  style: TextStyle(
                    color: Colors.blue,
                  ),
                ),
                if (_selectedOptions.isNotEmpty)
                  Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Text(
                      '选中项: ${_selectedOptions.join(', ')}',
                      style: TextStyle(
                        color: Colors.grey[700],
                      ),
                    ),
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

3. 使用方法

单个复选框

要使用CheckboxWidget组件，只需在需要显示单个复选框的地方添加以下代码：

CheckboxWidget(
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = value;
    });
  },
  label: '同意服务条款',
  activeColor: Colors.blue,
  checkColor: Colors.white,
  size: 20,
)

复选框组

要使用CheckboxGroupWidget组件，只需在需要显示一组复选框的地方添加以下代码：

CheckboxGroupWidget(
  options: ['选项 1', '选项 2', '选项 3'],
  selectedOptions: _selectedOptions,
  onChanged: (selected) {
    setState(() {
      _selectedOptions = selected;
    });
  },
  activeColor: Colors.blue,
  checkColor: Colors.white,
  size: 20,
)

配置选项

CheckboxWidget 配置选项：

value：当前选中状态
onChanged：状态变化回调
label：复选框标签
activeColor：选中状态颜色
checkColor：勾选标记颜色
size：复选框大小
enabled：是否启用

CheckboxGroupWidget 配置选项：

options：选项列表
selectedOptions：已选中选项列表
onChanged：选中状态变化回调
activeColor：选中状态颜色
checkColor：勾选标记颜色
size：复选框大小
enabled：是否启用

本次开发中容易遇到的问题

状态管理问题：在处理复选框的选中状态时，需要确保状态管理正确。当父组件传递的value发生变化时，需要更新内部状态。解决方案是在didUpdateWidget方法中检测value变化并更新状态。
布局问题：复选框的大小和对齐需要根据设计要求进行调整。解决方案是使用Transform.scale来调整复选框的大小，并使用Row和Padding来调整布局。
交互体验问题：为了提供良好的交互体验，需要确保复选框在禁用状态下有明显的视觉反馈。解决方案是在禁用状态下设置不同的颜色。
复选框组状态管理：在处理复选框组时，需要正确管理多个选项的选中状态。解决方案是使用列表来存储选中的选项，并在状态变化时更新列表。
性能问题：当复选框组选项较多时，需要确保组件的性能。解决方案是使用ListView.builder或类似的懒加载组件来渲染大量选项。

总结本次开发中用到的技术点

自定义组件开发：我们创建了可复用的CheckboxWidget和CheckboxGroupWidget组件，支持多种配置选项和交互功能。
状态管理：使用StatefulWidget和setState方法来管理复选框的选中状态。
布局和样式：使用Row、Padding和Transform.scale等布局组件构建复选框的UI结构，并通过配置选项支持自定义样式。
事件处理：实现了复选框的点击事件处理，支持状态变化和回调。
组件生命周期：使用initState和didUpdateWidget方法管理组件的生命周期，确保状态正确初始化和更新。
跨平台适配：确保复选框组件在OpenHarmony平台上能够正常显示和交互。
代码组织：将复选框组件抽离到单独的文件中，提高了代码的可维护性和复用性。
用户体验：通过添加标签、状态显示和实时反馈，提高了用户体验。

通过本次开发，我们不仅实现了功能完善的复选框组件，也积累了在OpenHarmony平台上开发Flutter应用的经验。这些组件可以直接应用到实际项目中，为用户提供良好的选择体验。
请添加图片描述

flutter_openHarmony（简称 Flutter‑OH）

注意：不是Google官方产物，是OpenHarmony社区TPC组织维护的Flutter引擎移植版本。把Flutter的Dart/Skia引擎做底层改造，让Flutter应用可以直接编译输出 HAP包，跑在OpenHarmony/纯血鸿蒙设备上，不需要依赖Android兼容层。

简单讲：一套Dart/Flutter业务代码，可以同时编译 Android、iOS、OpenHarmony（HAP）。

核心原理

对Flutter Engine做Embedder嵌入适配，对接OpenHarmony Rosen图形管线、UIAbility生命周期，通过MethodChannel实现 Dart ↔ ArkTS双向通信，Flutter自绘UI渲染到鸿蒙Surface，复用方舟编译器、系统权限、分布式能力。

Dart业务代码几乎不变
底层引擎适配鸿蒙图形、线程、生命周期
输出产物是标准HAP应用包，可上架鸿蒙应用市场

主要优势

存量Flutter项目低成本接入鸿蒙生态
纯Dart业务、纯Widget界面几乎不用改代码即可编译出鸿蒙HAP；只有带Android/iOS原生桥接的插件，才需要做鸿蒙适配替换。已经有成熟Flutter App，想快速覆盖鸿蒙设备，不用全部重写ArkTS。
多端UI高度一致性
Flutter自绘渲染，不受各平台控件差异影响，手机、平板、车机界面表现统一；滚动、动画、首页各类动效（轮播、吸顶、骨架屏、入场动画）跨平台表现一致，和你前面问的App首页各种效果可以一套代码全部实现。
继承Flutter完整开发体验
保留热重载、DevTools调试、完整Widget组件库；pub.dev海量纯Dart三方库直接复用，是鸿蒙跨端方案里三方库最丰富的方案。提供定制CLI，一条命令完成编译、真机调试、打包HAP。
可调用OpenHarmony原生系统能力
支持调用分布式软总线、分布式数据KV、原子化服务、鸿蒙权限体系、硬件能力；Flutter页面和ArkTS原生页面可以混合开发、互相跳转，复杂原生逻辑继续写ArkTS，UI业务交给Flutter实现。
全场景设备覆盖
支持OpenHarmony手机、平板、智慧屏、车机等设备，适合需要多终端统一UI的业务。引擎做了懒加载，跟随UIAbility生命周期启停，控制内存占用，减少后台资源消耗。