【flutter for open harmony】第三方库Flutter 鸿蒙版 级联选择器 实战指南（适配 1.0.0）✨

Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

本文详细介绍如何在Flutter鸿蒙应用中实现级联选择器组件。

一、前言

级联选择器用于多级联动选择，如省市区选择、分类选择等。每一级的选择会影响下一级的选项。

二、效果展示

2.1 功能特性

功能	描述
三级联动	省-市-区三级联动
动态更新	上级变化更新下级选项
选择结果	显示完整选择路径
重置功能	清空选择重新开始

三、项目背景与目标

3.1 项目背景

级联选择器广泛应用于地址选择、分类筛选等需要多级选择的场景。

3.2 项目目标

• 实现三级联动选择
• 上级变化更新下级
• 显示选择结果
• 支持重置功能

四、技术架构设计

4.1 架构概述

级联选择器基于DropdownButton组件实现，通过嵌套Map存储多级数据。

4.2 技术原理

Map嵌套数据 -> DropdownButton -> 选择触发 -> 更新下级选项

核心组件：

• DropdownButton：下拉选择器
• Map：嵌套数据结构
• State：状态管理

五、详细实现

5.1 Flutter端实现

import 'package:flutter/material.dart';

class CascadePickerPage extends StatefulWidget {
  const CascadePickerPage({super.key});

  @override
  State<CascadePickerPage> createState() => _CascadePickerState();
}

class _CascadePickerState extends State<CascadePickerPage> {
  final Map<String, Map<String, List<String>>> _data = {
    '北京市': {
      '东城区': ['东华门街道', '景山街道'],
      '西城区': ['西长安街街道', '新街口街道'],
    },
    '上海市': {
      '黄浦区': ['南京东路街道', '外滩街道'],
      '徐汇区': ['天平路街道', '湖南路街道'],
    },
  };

  String _province = '';
  String _city = '';
  String _district = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('级联选择器')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          children: [
            Text('选择结果: $_province $_city $_district'),
            Row(
              children: [
                Expanded(
                  child: DropdownButton<String>(
                    hint: const Text('选择省份'),
                    value: _province.isEmpty ? null : _province,
                    items: _data.keys.map((e) => DropdownMenuItem(value: e, child: Text(e))).toList(),
                    onChanged: (value) {
                      setState(() {
                        _province = value ?? '';
                        _city = '';
                        _district = '';
                      });
                    },
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: DropdownButton<String>(
                    hint: const Text('选择城市'),
                    value: _city.isEmpty ? null : _city,
                    items: _province.isNotEmpty
                        ? _data[_province]!.keys.map((e) => DropdownMenuItem(value: e, child: Text(e))).toList()
                        : [],
                    onChanged: (value) {
                      setState(() {
                        _city = value ?? '';
                        _district = '';
                      });
                    },
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

5.2 核心功能解析

嵌套数据结构

Map<String, Map<String, List<String>>> _data = {
  '北京市': {
    '东城区': ['东华门街道', '景山街道'],
  },
}

使用嵌套Map存储三级数据，第一级是省，第二级是市，第三级是区。

DropdownButton组件

DropdownButton<String>(
  value: _province,
  items: items,
  onChanged: (value) {},
)

DropdownButton创建下拉选择器，value绑定当前值，items设置选项列表。

级联更新

onChanged: (value) {
  setState(() {
    _province = value ?? '';
    _city = '';  // 清空下级选择
    _district = '';
  });
}

上级选择变化时，清空下级的选择，触发下级选项更新。

动态选项列表

items: _province.isNotEmpty
    ? _data[_province]!.keys.map((e) => DropdownMenuItem(...)).toList()
    : []

根据上级选择动态生成下级选项列表。

六、实际应用场景

6.1 地址选择

省市区三级地址选择。

6.2 分类选择

多级分类选择。

6.3 组织架构

公司-部门-岗位选择。

七、优化建议

7.1 性能优化

• 使用异步加载下级数据
• 缓存已加载的数据
• 添加加载状态提示

7.2 功能扩展

• 支持搜索功能
• 添加自定义样式
• 支持多选
• 添加全路径显示

八、常见问题与解决方案

8.1 问题1：下级选项不更新

问题： 上级选择后下级选项没有变化。

解决方案： 确保在setState中清空下级选择，触发UI重建。

setState(() {
  _province = value!;
  _city = '';  // 必须清空
});

8.2 问题2：DropdownButton报错

问题： value不在items中时报错。

解决方案： 确保value为null或存在于items中。

value: _province.isEmpty ? null : _province,

九、总结

本文详细介绍了Flutter鸿蒙应用中级联选择器的实现方法。通过DropdownButton和嵌套Map实现了三级联动选择，支持上级变化时自动更新下级选项。

十、参考资料

• Flutter官方文档：https://flutter.dev
• HarmonyOS开发者文档：https://developer.harmonyos.com