flutter如何实现级联选择器

在Flutter中如何实现级联选择器？目前需要开发一个多级联动的选择功能，比如省市区三级联动，但不知道用什么组件或方案比较合适。有没有现成的插件推荐，或者需要自己封装实现？希望能提供具体的代码示例或实现思路。

Flutter可使用flutter_cupertino_date_picker或自定义ListView/DropdownButton实现级联选择器。通过状态管理（如setState）更新下一级选项数据，确保选项联动。也可使用第三方库如flutter_picker简化开发。

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

wuwangju 2楼

在Flutter中实现级联选择器可以通过以下几种方式：

1. 使用官方 flutter_cupertino_picker（iOS风格）

import 'package:flutter/cupertino.dart';

List<String> provinces = ['北京', '上海', '广东'];
Map<String, List<String>> cities = {
  '北京': ['朝阳区', '海淀区', '西城区'],
  '上海': ['黄浦区', '徐汇区', '长宁区'],
  '广东': ['广州市', '深圳市', '东莞市']
};

void showCascadePicker(BuildContext context) {
  int provinceIndex = 0;
  int cityIndex = 0;
  
  showCupertinoModalPopup(
    context: context,
    builder: (context) {
      return Container(
        height: 200,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CupertinoButton(
                  child: Text('取消'),
                  onPressed: () => Navigator.pop(context),
                ),
                CupertinoButton(
                  child: Text('确定'),
                  onPressed: () {
                    print('选择: ${provinces[provinceIndex]} - ${cities[provinces[provinceIndex]]![cityIndex]}');
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: CupertinoPicker(
                      itemExtent: 32,
                      onSelectedItemChanged: (index) {
                        provinceIndex = index;
                        cityIndex = 0;
                      },
                      children: provinces.map((province) => Text(province)).toList(),
                    ),
                  ),
                  Expanded(
                    child: CupertinoPicker(
                      itemExtent: 32,
                      onSelectedItemChanged: (index) {
                        cityIndex = index;
                      },
                      children: cities[provinces[provinceIndex]]!.map((city) => Text(city)).toList(),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    },
  );
}

2. 使用第三方库 flutter_picker

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_picker: ^2.1.15

使用示例：

import 'package:flutter_picker/flutter_picker.dart';

void showFlutterPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(pickerdata: [
      ['北京', '上海', '广东'],
      ['朝阳区', '海淀区', '西城区']
    ]),
    hideHeader: false,
    title: Text('请选择地区'),
    onConfirm: (Picker picker, List value) {
      print(value.toString());
      print(picker.getSelectedValues());
    },
  ).showDialog(context);
}

3. 自定义级联选择器

class CascadePicker extends StatefulWidget {
  @override
  _CascadePickerState createState() => _CascadePickerState();
}

class _CascadePickerState extends State<CascadePicker> {
  String selectedProvince = '北京';
  String selectedCity = '朝阳区';
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DropdownButton<String>(
          value: selectedProvince,
          onChanged: (String? newValue) {
            setState(() {
              selectedProvince = newValue!;
              selectedCity = cities[newValue]!.first;
            });
          },
          items: provinces.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        DropdownButton<String>(
          value: selectedCity,
          onChanged: (String? newValue) {
            setState(() {
              selectedCity = newValue!;
            });
          },
          items: cities[selectedProvince]!.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ],
    );
  }
}

flutter如何实现级联选择器

1. 使用官方 flutter_cupertino_picker（iOS风格）

2. 使用第三方库 flutter_picker

3. 自定义级联选择器

推荐方案