Flutter城市选择器插件zzy_city

Flutter城市选择器插件zzy_city_picker的使用

简介

这是一个专为中国大陆用户设计的城市选择器插件，支持三种选择模式：选择省份、选择省市、选择省市区。

摘要

以下是一个简单的代码示例，展示如何使用zzy_city_picker来选择省份：

final result = await ZzyCityPicker.showPicker(context, currentResult: selected, type: ZzyCityPickerType.p);
if (result != null) {
    setState(() {
      selected = result;
    });
}

用法

选择省
使用ZzyCityPickerType.p类型来选择省份。

ZzyCityPicker.showPicker(context, currentResult: selected, type: ZzyCityPickerType.p);

选择省市
使用ZzyCityPickerType.pc类型来选择省份和城市。

ZzyCityPicker.showPicker(context, currentResult: selected, type: ZzyCityPickerType.pc);

选择省市区
使用默认类型ZzyCityPickerType.pca来选择省份、城市和区县。如果需要自定义类型，也可以显式传入ZzyCityPickerType.pca。
```
ZzyCityPicker.showPicker(context, currentResult: selected);
```

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中集成并使用zzy_city_picker插件。

import 'package:flutter/material.dart';
import 'package:zzy_city_picker/data_model/zzy_city_pic_result_model.dart';
import 'package:zzy_city_picker/data_model/zzy_city_picker_type.dart';
import 'package:zzy_city_picker/zzy_city_picker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ZzyCityPicResultModel? selectedP; // 选中的省份
  ZzyCityPicResultModel? selectedPC; // 选中的省份和城市
  ZzyCityPicResultModel? selectedPCA; // 选中的省份、城市和区县

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('zzyCityPicker 示例'),
        ),
        body: Builder(
          builder: (context) {
            return Padding(
              padding: const EdgeInsets.only(right: 20),
              child: Column(
                children: [
                  // 选择省
                  Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: Row(
                      children: [
                        const Expanded(
                          flex: 100,
                          child: Center(
                            child: Text("选择省"),
                          ),
                        ),
                        Expanded(
                          flex: 300,
                          child: GestureDetector(
                            onTap: () async {
                              final result = await ZzyCityPicker.showPicker(context, currentResult: selectedP, type: ZzyCityPickerType.p);
                              if (result != null) {
                                setState(() {
                                  selectedP = result;
                                });
                              }
                            },
                            child: Container(
                              height: 40,
                              alignment: Alignment.centerLeft,
                              padding: const EdgeInsets.symmetric(horizontal: 15),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  width: 1,
                                  color: Colors.black26,
                                ),
                              ),
                              child: Text(selectedP != null ? "${selectedP!.provinceName}" : "请选择"),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  // 选择省市
                  Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: Row(
                      children: [
                        const Expanded(
                          flex: 100,
                          child: Center(
                            child: Text("选择省市"),
                          ),
                        ),
                        Expanded(
                          flex: 300,
                          child: GestureDetector(
                            onTap: () async {
                              final result = await ZzyCityPicker.showPicker(context, currentResult: selectedPC, type: ZzyCityPickerType.pc);
                              if (result != null) {
                                setState(() {
                                  selectedPC = result;
                                });
                              }
                            },
                            child: Container(
                              height: 40,
                              alignment: Alignment.centerLeft,
                              padding: const EdgeInsets.symmetric(horizontal: 15),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  width: 1,
                                  color: Colors.black26,
                                ),
                              ),
                              child: Text(selectedPC != null ? "${selectedPC!.provinceName}-${selectedPC!.cityName}" : "请选择"),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  // 选择省市区
                  Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: Row(
                      children: [
                        const Expanded(
                          flex: 100,
                          child: Center(
                            child: Text("选择省市区"),
                          ),
                        ),
                        Expanded(
                          flex: 300,
                          child: GestureDetector(
                            onTap: () async {
                              final result = await ZzyCityPicker.showPicker(context, currentResult: selectedPCA);
                              if (result != null) {
                                setState(() {
                                  selectedPCA = result;
                                });
                              }
                            },
                            child: Container(
                              height: 40,
                              alignment: Alignment.centerLeft,
                              padding: const EdgeInsets.symmetric(horizontal: 15),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  width: 1,
                                  color: Colors.black26,
                                ),
                              ),
                              child: Text(selectedPCA != null ? "${selectedPCA!.provinceName}-${selectedPCA!.cityName}-${selectedPCA!.areaName}" : "请选择"),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter城市选择器插件zzy_city_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

songsunli 1楼

更多关于Flutter城市选择器插件zzy_city_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

zzy_city_picker 是一个用于 Flutter 应用中的城市选择器插件，它可以帮助用户方便地选择省、市、区信息。以下是如何在 Flutter 项目中使用 zzy_city_picker 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 zzy_city_picker 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  zzy_city_picker: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 zzy_city_picker 插件。

import 'package:zzy_city_picker/zzy_city_picker.dart';

3. 使用城市选择器

你可以在需要的地方调用 ZzyCityPicker.showCityPicker 方法来显示城市选择器。

void _showCityPicker() async {
  final result = await ZzyCityPicker.showCityPicker(
    context: context,
    // 可选参数
    // backgroundColor: Colors.white,
    // cancelText: '取消',
    // confirmText: '确定',
    // title: '选择城市',
  );

  if (result != null) {
    print('选择的城市: ${result.province} - ${result.city} - ${result.district}');
  } else {
    print('用户取消了选择');
  }
}

4. 触发城市选择器

你可以在按钮的 onPressed 事件中调用 _showCityPicker 方法来触发城市选择器。

ElevatedButton(
  onPressed: _showCityPicker,
  child: Text('选择城市'),
),

5. 处理选择结果

ZzyCityPicker.showCityPicker 方法返回一个 CityPickerResult 对象，包含用户选择的省、市、区信息。你可以根据需要进行处理。

if (result != null) {
  setState(() {
    selectedProvince = result.province;
    selectedCity = result.city;
    selectedDistrict = result.district;
  });
}

6. 自定义样式（可选）

ZzyCityPicker.showCityPicker 方法提供了多个可选参数，允许你自定义城市选择器的外观和行为。例如：

backgroundColor: 设置背景颜色。
cancelText: 设置取消按钮的文本。
confirmText: 设置确认按钮的文本。
title: 设置选择器的标题。

final result = await ZzyCityPicker.showCityPicker(
  context: context,
  backgroundColor: Colors.white,
  cancelText: '取消',
  confirmText: '确定',
  title: '选择城市',
);

7. 完整示例

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedProvince = '';
  String selectedCity = '';
  String selectedDistrict = '';

  void _showCityPicker() async {
    final result = await ZzyCityPicker.showCityPicker(
      context: context,
      backgroundColor: Colors.white,
      cancelText: '取消',
      confirmText: '确定',
      title: '选择城市',
    );

    if (result != null) {
      setState(() {
        selectedProvince = result.province;
        selectedCity = result.city;
        selectedDistrict = result.district;
      });
    } else {
      print('用户取消了选择');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('城市选择器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _showCityPicker,
              child: Text('选择城市'),
            ),
            SizedBox(height: 20),
            Text('选择的城市: $selectedProvince - $selectedCity - $selectedDistrict'),
          ],
        ),
      ),
    );
  }
}