Flutter 中国城市的三级联动选择器

最新推荐文章于 2024-05-30 09:56:02 发布
最新推荐文章于 2024-05-30 09:56:02 发布
阅读量3.6k 收藏 7
点赞数
分类专栏： flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41070101/article/details/108207614
版权
这篇博客介绍了如何在Flutter中创建一个中国城市的三级联动选择器，包括使用的插件、展示的效果图、各项属性详细解析，以及完整的代码示例和演示。
摘要由CSDN通过智能技术生成

中国城市的三级联动选择器

插件

city_pickers: ^0.1.30 #https://pub.dev/packages/city_pickers/install

效果图

Alt
Alt
Alt
Alt

属性

  • CityPickers 静态方法

showCityPicker           # 呼出弹出层，显示多级选择器
showFullPageCityPicker   # 呼出一层，显示多级选择器
showCitiesSelector 		 # 呼出一层，显示支持字母定位的城市选择器
utils                    # 获取utils接口的钩子

  • showCityPicker 参数说明

    showType = ShowType.pca,  			#三级联动，显示类型
double height = 400.0,  			# 弹出的高度
String locationCode = '110000' ,    #初始化地区信息，可以是省、市、区的地区码
ThemeData theme, 					#主题 可以自定义
Map<String, dynamic> citiesData, 	#选择器的城市与区的数据源
Map<String, dynami
最低0.47元/天 解锁文章
言希-
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter省市区的三级联动
qq_35527138的博客
09-27 3845
Flutter省市区的三级联动 最近做Flutter项目的时候，需要做一个省市区选择的功能。主要是通过CupertinoPicker组件实现功能的。 Expanded( flex: 1, child: CupertinoPicker( backgroundColor: Colors.white, diameterRatio: 1.1, scrollCont...
Flutter - 级联选择器组件（多维数组或树形结构、支持搜索）
iotjin的专栏
09-12 3540
Flutter - 级联选择器组件（多维数组或树形结构、支持搜索）二个级联选择器组件，支持两种不同的数据结构。一种是树形结构数据、支持搜索。一种是多维数组结构数据。
推荐使用：Flutter 多选组件库 —— Multi Select Flutter
最新发布
gitblog_00018的博客
05-30 1046
推荐使用：Flutter 多选组件库 —— Multi Select Flutter multi_select_flutterA flexible multi select package for Flutter. Make multi select widgets the way you want.项目地址:https://gitcode.com/gh_mirrors/mu/multi_sel...
Flutter——仿高德三级联动Drawer
ljq5945的博客
07-23 1036
前言 一直觉得高德地图的首页Drawer滑动起来很漂亮，还有一些科技感，之前用android实现了一遍，趁着最近不忙再用Flutter实现一遍。 示意图 为了方便区分布局结构，我使用了不同的颜色 Drawer高度状态 可以看到drawer 高度有三种情况： 最大高度 距离顶部有一小段空间，这里空间高度定位70， drawer的高度为：屏幕高度-70 中等高度 这里我们将drawer的显示高度定位300 最小高度 这里drawer的显示高度定位150 Drawer的ui 结构 可以看到drawer内
flutter手写cascader组件，级联选择器，动态加载
m0_51687040的博客
04-26 1385
已完成部分功能，可以正常使用数据回显还没有思路，探索中（我只是个新手）如有想法可告知，完善中！
flutter_pickers：flutter选择器库，包括日期和时间选择器（可设置范围），单项选择器（可用于性别，民族，学历，星座，年龄，身高，体重，温度等），城市地址选择器（分省）级，地级及县级），多个选择器等……欢迎Fork＆pr贡献您的代码，大家共同学习
02-10
flutter_pickers 文档语言： | flutter选择器库，包括日期和时间选择器（可设置范围），单项选择器（可用于性别，民族，学历，星座，年龄，身高，体重，温度等），城市地址选择器（分省级，地级及县级），多个选择器等……欢迎Fork＆pr贡献您的代码，大家共同学习 例 用法 1.依赖 dependencies : flutter_pickers : ^1.0.0 2.获取 $ flutter packages get 3.安装 import 'package:flutter_pickers/pickers.dart' ; 目录 地址选择器 Pickers.showAddressPicker（） 支持三级联动 支持自定义颜色，大小等样式 支持显示'全部'选项 支持只选择省市2级 支持查询城市码 实时最高 三级选择器动图 二级静态图 简单使用 String in
【Flutter】仿京东地址选择器(多层级无限制)
u012103212的博客
07-22 1837
最近在做Flutter开发，碰到产品提的新的需求，类似于京东的地址选择器，但是baidu了一堆，都只是定死层级的实现效果。不符合产品需求啊。自己码一个，记录一下。（可以根据需要，封装成通用工具） 写的不好，请大佬轻喷。 效果图 需要注意，这里使用的是 TickerProviderStateMixin 而不是 SingleTickerProviderStateMixin 上代码，注释很清楚。 class EventAreaDialog extends StatefulWidget { // 这个是我
flutter日期选择器 flutter时间选择器
08-25
在Flutter开发中，日期选择器（DatePicker）和时间选择器（TimePicker）是常见的用户界面组件，用于让用户方便地选择日期或时间。这两个组件在创建表单、日程管理或其他需要用户输入日期或时间的应用场景中非常实用...
三级联动 城市选择
10-14
在Android应用开发中，"三级联动城市选择"是一种常见的功能，用于用户选择所在省份、城市、区县。这种选择器通常使用PickerView组件实现，它允许用户通过滚动选择不同的层次选项。以下是对这个主题的详细解释： 1. ...
Flutter入门与实战：日期选择器
09-15
在本文中，我们将深入探讨Flutter框架中的日期选择器，这对于任何想要开发Android或跨平台应用程序的开发者来说都是一个重要的知识点。Flutter，Google推出的开源UI工具包，以其高性能、丰富的自定义能力和热重载...
手机端 省市区 三级联动 简洁 流畅
10-08
在三级联动选择中，这意味着在用户切换选项时，下一级别的选项列表应即时加载，提供无缝的体验。 5. **反写文字到input组件**：反写指的是将用户选择的值实时显示在输入框中。在这个功能中，用户选定的省市区信息会...
flutter页面滚动联动实现
03-25
flutter 页面滚动联动实现,解决NestedScrollView问题.可配合EasyRefresh和CustomScrollView实现页面滚动联动,自定义下拉刷新等操作
MVC三级联动
09-02
关于MVC三级联动的例子，含源码和文档。
flutter 二级选择器联动
weixin_44911775的博客
11-16 1491
可联动：列表里面有多个对象，每个对象是一个map类型，
android 地址选择器无限级,【Flutter】仿京东地址选择器(多层级无限制)
weixin_42545066的博客
05-27 588
最近在做Flutter开发，碰到产品提的新的需求，类似于京东的地址选择器，但是baidu了一堆，都只是定死层级的实现效果。不符合产品需求啊。自己码一个，记录一下。(可以根据需要，封装成通用工具)写的不好，请大佬轻喷。效果图WeChat40dd05dfb8dccacffe42e73ee5ec7c22.png需要注意，这里使用的是TickerProviderStateMixin而不是SingleTic...
android 省市区三级联动
热门推荐
方志朋的专栏
06-16 1万+
最近项目，需要用到三级联动，在网上找了一些例子，进行了修改，实现，提炼出来了给大家分享 实现思路是在三个wheelview 进行联动。选择了省，马上就关联到市和区，选择了市 ，马上就可以关联到区。效果图：首先建了三个Model 用于存数据 存省 和市的list 和区的public class ProvinceInfoModel { private String name; pri
flutter星级选择控件实现
wsxqaz的专栏
02-24 1169
gitee地址:https://gitee.com/tcyjc/flutter_level_start flutter_level_start 介绍 等级显示选择组件，包含分段图标等级，以及连续的彩虹色等级选择和显示 使用说明 StarLevelField 图标等级显示组件 StarLevelField( img: AssetImage("assets/i...
Flutter城市(省市区)选择器
qq_42772570的博客
12-19 4292
Flutter城市(省市区)选择器 https://juejin.cn/post/6844903945580593160
flutter CupertinoPicker 二级联动选择器实例代码，以底部弹窗出现，布局为同一行显示
05-28
以下是一个使用CupertinoPicker实现二级联动选择器的示例代码，可以在底部弹出： ```dart showModalBottomSheet( context: context, builder: (BuildContext builder) { return Container( height: 250.0, child: Column( children: <Widget>[ Container( height: 200.0, child: CupertinoPicker( itemExtent: 30.0, onSelectedItemChanged: (int index) { //更新选择项时的回调函数 }, children: List<Widget>.generate(2, (int groupIndex) { return Column( children: <Widget>[ Container( height: 30.0, child: Text( 'Group ${groupIndex}', style: TextStyle(fontSize: 16.0), ), ), Expanded( child: CupertinoPicker( itemExtent: 30.0, onSelectedItemChanged: (int index) { //更新选择项时的回调函数 }, children: List<Widget>.generate(5, (int index) { return Center( child: Text('Item ${index}'), ); }), ), ), ], ); }), ), ), Container( height: 50.0, color: Colors.white, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ FlatButton( onPressed: () { //取消按钮的回调函数 Navigator.pop(context); }, child: Text( 'Cancel', style: TextStyle(color: Colors.red), ), ), FlatButton( onPressed: () { //确定按钮的回调函数 Navigator.pop(context); }, child: Text( 'Done', style: TextStyle(color: Colors.blue), ), ), ], ), ), ], ), ); }, ); ``` 在这个示例中，使用了两个CupertinoPicker来实现二级联动选择器。外层CupertinoPicker用于选择一级选项，内层CupertinoPicker用于选择二级选项。每个CupertinoPicker都使用了generate方法来动态生成选择项的widget。在选择项改变时，可以在onSelectedItemChanged回调函数中进行相应的处理。底部的取消和确定按钮可以使用FlatButton来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值