【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 架构概述

城市选择器基于ListView实现，通过Map存储字母分组数据。

4.2 技术原理

城市数据 -> 字母分组 -> ListView -> 点击选择 -> 返回结果

核心组件：

• ListView：城市列表
• Map：分组数据
• Wrap：热门城市布局

五、详细实现

5.1 Flutter端实现

import 'package:flutter/material.dart';

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

  @override
  State<CityPickerPage> createState() => _CityPickerPageState();
}

class _CityPickerPageState extends State<CityPickerPage> {
  final List<String> _hotCities = ['北京', '上海', '广州', '深圳', '杭州'];
  final Map<String, List<String>> _citiesByLetter = {
    'A': ['安庆', '安阳'],
    'B': ['北京', '保定'],
    'C': ['成都', '重庆'],
  };
  String _selectedCity = '请选择城市';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('城市选择器')),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(16),
            child: Text('当前选择: $_selectedCity'),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Wrap(
              spacing: 12,
              children: _hotCities.map((city) => GestureDetector(
                onTap: () => setState(() => _selectedCity = city),
                child: Chip(label: Text(city)),
              )).toList(),
            ),
          ),
          Expanded(
            child: ListView(
              children: _citiesByLetter.entries.map((entry) {
                return Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.all(8),
                      color: Colors.grey[200],
                      child: Text(entry.key),
                    ),
                    ...entry.value.map((city) => ListTile(
                      title: Text(city),
                      onTap: () => setState(() => _selectedCity = city),
                    )),
                  ],
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}

5.2 核心功能解析

热门城市布局

Wrap(
  spacing: 12,
  runSpacing: 12,
  children: _hotCities.map((city) => Chip(label: Text(city))).toList(),
)

Wrap实现热门城市的自动换行布局。

字母分组

Map<String, List<String>> _citiesByLetter = {
  'A': ['安庆', '安阳'],
  'B': ['北京', '保定'],
}

使用Map按字母分组存储城市数据。

分组头部

Container(
  padding: const EdgeInsets.all(8),
  color: Colors.grey[200],
  child: Text(entry.key),
)

为每个字母分组添加头部标识。

选择回调

onTap: () => setState(() => _selectedCity = city)

点击城市项时更新选中状态。

六、实际应用场景

6.1 地址选择

电商应用的收货地址选择。

6.2 定位切换

切换当前城市定位。

6.3 出发到达

出行应用的出发地和目的地选择。

七、优化建议

7.1 性能优化

• 使用ListView.builder优化长列表
• 添加搜索功能
• 使用索引快速定位

7.2 功能扩展

• 添加右侧字母索引条
• 支持拼音搜索
• 添加最近访问城市
• 支持定位当前城市

八、常见问题与解决方案

8.1 问题1：列表滚动卡顿

问题： 城市列表滚动不流畅。

解决方案： 使用ListView.builder替代ListView。

ListView.builder(
  itemCount: _cities.length,
  itemBuilder: (context, index) => ListTile(...),
)

8.2 问题2：字母索引定位

问题： 需要点击字母跳转到对应分组。

解决方案： 使用ScrollController控制滚动位置。

ScrollController _controller = ScrollController();
_controller.animateTo(offset, duration: Duration(milliseconds: 300), curve: Curves.ease);

九、总结

本文详细介绍了Flutter鸿蒙应用中城市选择器的实现方法。通过Wrap和ListView实现了热门城市和字母分组的城市列表，支持城市选择交互。

十、参考资料

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