【flutter】省市县三级选择

最新推荐文章于 2024-11-29 00:39:59 发布

ivy_doudou

最新推荐文章于 2024-11-29 00:39:59 发布

阅读量2.2k

点赞数

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/ivy_doudou/article/details/102818894

版权

flutter 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个在Flutter中实现的省市县三级联动选择器组件的使用方法，包括依赖引入、页面示例代码及自定义项展示。通过该组件，可以轻松地在应用中加入地址选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入依赖

city_pickers: ^0.1.28   #省市县

2、页面的demo

bool customerItemBuilder = true;//是否自定义类型
void _toAddress(Action action, Context<AddressAddState> ctx) async{
  double customerItemExtent = 40;
  PickerItem themeAttr;
  PickerItem showTypeAttr = PickerItem(name: '省+市+县', value: ShowType.pca);
  Result resultAttr = new Result();
  Result result = new Result();
  double barrierOpacityAttr = 0.5;
  bool barrierDismissibleAttr = false;
  bool customerMeta = false;

  bool customerButtons = true;
  bool isSort = false;
  Result tempResult = await CityPickers.showCityPicker(
      context: ctx.context,
      theme: themeAttr != null ? themeAttr.value : null,
      locationCode: resultAttr != null
          ? resultAttr.areaId ??
          resultAttr.cityId ??
          resultAttr.provinceId
          : null,
      showType: showTypeAttr.value,
      isSort: true,
      barrierOpacity: barrierOpacityAttr,
      barrierDismissible: barrierDismissibleAttr,
      citiesData: null,
      provincesData: null,
      height: 250,
      itemExtent: customerItemExtent,
      cancelWidget: customerButtons ? Text('取消',style: TextStyle(fontSize: 18.0,color: Public().COLOR_THEME),) : null,
      confirmWidget: customerButtons ? Text('确认',style:TextStyle(fontSize: 18.0,color: Public().COLOR_THEME),) : null,
      itemBuilder: getItemBuilder());
  if(tempResult!=null){
    String address = tempResult.provinceName+" "+tempResult.cityName+" "+tempResult.areaName;
    ctx.dispatch(AddressAddActionCreator.onUpdateAddress(address));
  }

}
getItemBuilder() {
  if (customerItemBuilder) {
    return (item, list, index) {
      return Center(
          child: Text(item, maxLines: 1, style: TextStyle(fontSize: 18.0)));
    };
  } else {
    return null;
  }
}