flutter如何实现省市区选择功能

在Flutter中，如何实现省市区三级联动选择功能？需要支持数据动态加载，最好能提供完整的代码示例或推荐可靠的第三方插件。数据源方面，是推荐使用本地JSON文件还是从后端API获取？另外，选择后的数据应该如何传递和处理？希望有实际项目经验的小伙伴分享一下最佳实践。

2 回复

使用Flutter实现省市区选择功能，可通过以下方式：

  1. 使用第三方库，如city_pickers或flutter_picker，快速集成。
  2. 自定义组件，通过嵌套Picker或DropdownButton实现三级联动。
  3. 数据来源可以是本地JSON文件或API接口。

推荐使用city_pickers库，简单高效。

更多关于flutter如何实现省市区选择功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现省市区选择功能，可以通过以下步骤实现：

1. 数据准备

准备省市区数据，通常使用JSON格式。可以从公开数据源获取，例如国家统计局或第三方API。数据示例：

[
  {
    "code": "110000",
    "name": "北京市",
    "children": [
      {
        "code": "110100",
        "name": "市辖区",
        "children": [
          {"code": "110101", "name": "东城区"},
          {"code": "110102", "name": "西城区"}
        ]
      }
    ]
  }
]

2. 数据模型

创建对应的数据模型类：

class Region {
  final String code;
  final String name;
  final List<Region> children;

  Region({required this.code, required this.name, required this.children});

  factory Region.fromJson(Map<String, dynamic> json) {
    return Region(
      code: json['code'],
      name: json['name'],
      children: (json['children'] as List<dynamic>?)
          ?.map((e) => Region.fromJson(e))
          .toList() ?? [],
    );
  }
}

3. 加载数据

在initState中加载本地JSON数据：

List<Region> provinces = [];

@override
void initState() {
  super.initState();
  _loadRegions();
}

Future<void> _loadRegions() async {
  String data = await rootBundle.loadString('assets/regions.json');
  List<dynamic> jsonList = json.decode(data);
  setState(() {
    provinces = jsonList.map((e) => Region.fromJson(e)).toList();
  });
}

4. 实现选择器

使用ListView或第三方组件实现三级联动：

List<Region>? cities;
List<Region>? districts;
Region? selectedProvince;
Region? selectedCity;
Region? selectedDistrict;

Column(
  children: [
    // 省份选择
    DropdownButton<Region>(
      value: selectedProvince,
      items: provinces.map((province) {
        return DropdownMenuItem(
          value: province,
          child: Text(province.name),
        );
      }).toList(),
      onChanged: (Region? value) {
        setState(() {
          selectedProvince = value;
          cities = value?.children;
          selectedCity = null;
          districts = null;
          selectedDistrict = null;
        });
      },
    ),
    
    // 城市选择
    if (cities != null)
      DropdownButton<Region>(
        value: selectedCity,
        items: cities!.map((city) {
          return DropdownMenuItem(
            value: city,
            child: Text(city.name),
          );
        }).toList(),
        onChanged: (Region? value) {
          setState(() {
            selectedCity = value;
            districts = value?.children;
            selectedDistrict = null;
          });
        },
      ),
    
    // 区县选择
    if (districts != null)
      DropdownButton<Region>(
        value: selectedDistrict,
        items: districts!.map((district) {
          return DropdownMenuItem(
            value: district,
            child: Text(district.name),
          );
        }).toList(),
        onChanged: (Region? value) {
          setState(() {
            selectedDistrict = value;
          });
        },
      ),
  ],
)

5. 使用第三方库（可选）

可以使用city_pickers等现成库简化开发：

dependencies:
  city_pickers: ^1.0.0

import 'package:city_pickers/city_pickers.dart';

void _showPicker() async {
  Result? result = await CityPickers.showCityPicker(
    context: context,
  );
  if (result != null) {
    print('${result.provinceName} ${result.cityName} ${result.areaName}');
  }
}

注意事项：

  • 确保JSON文件放在assets文件夹并在pubspec.yaml中声明
  • 考虑数据量较大时的性能优化
  • 可根据需求自定义UI样式

这种方法可以快速实现省市区三级联动选择功能。

回到顶部