Flutter如何实现地址选择器组件

在Flutter中如何实现一个地址选择器组件？目前需要支持省市区三级联动选择，最好能兼容iOS和Android平台的UI风格，同时支持数据本地存储或从接口动态加载。有没有推荐的第三方库或者实现思路？希望有具体的代码示例和性能优化建议。

2 回复

Flutter实现地址选择器可通过第三方库如flutter_picker或自定义组件。步骤包括：

  1. 引入依赖；
  2. 使用Picker组件配置省市区数据；
  3. 监听选择结果并更新UI。
    代码简洁，支持联动和自定义样式。

更多关于Flutter如何实现地址选择器组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现地址选择器，主要有以下几种方式：

1. 使用第三方库（推荐）

pubspec.yaml 添加依赖

dependencies:
  city_pickers: ^2.0.0
  # 或者使用
  # flutter_picker: ^2.0.0

基本使用示例

import 'package:city_pickers/city_pickers.dart';

class AddressPicker extends StatefulWidget {
  @override
  _AddressPickerState createState() => _AddressPickerState();
}

class _AddressPickerState extends State<AddressPicker> {
  String selectedAddress = '请选择地址';

  Future<void> showAddressPicker() async {
    Result result = await CityPickers.showCityPicker(
      context: context,
      locationCode: '110000', // 默认选中北京
      height: 300,
    );
    
    if (result != null) {
      setState(() {
        selectedAddress = '${result.provinceName} ${result.cityName} ${result.areaName}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: showAddressPicker,
          child: Text('选择地址'),
        ),
        Text(selectedAddress),
      ],
    );
  }
}

2. 自定义地址选择器

使用Picker组件

import 'package:flutter_picker/flutter_picker.dart';

void showCustomPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(pickerdata: [
      ['北京', '上海', '广州', '深圳'],
      ['朝阳区', '海淀区', '东城区', '西城区'],
      ['街道1', '街道2', '街道3']
    ]),
    title: Text('请选择地址'),
    onConfirm: (Picker picker, List value) {
      print(value);
      print(picker.getSelectedValues());
    },
  ).showModal(context);
}

3. 使用Cupertino风格选择器

import 'package:flutter/cupertino.dart';

CupertinoPicker(
  itemExtent: 32.0,
  onSelectedItemChanged: (int index) {
    print('选中了第$index项');
  },
  children: List<Widget>.generate(10, (int index) {
    return Center(
      child: Text('选项 $index'),
    );
  }),
)

主要特点

  • city_pickers: 提供完整的省市区三级联动，数据较新
  • flutter_picker: 更灵活的定制选项
  • 原生组件: 性能更好，但需要自己处理数据

选择哪种方式取决于项目需求，对于大多数应用场景，推荐使用 city_pickers 库。

回到顶部