flutter如何实现多级选择器

在Flutter中如何实现多级联动选择器？比如省市区三级联动的效果，需要支持用户逐级选择数据，并且下一级数据根据上一级的选择动态加载。目前尝试了使用DropdownButton嵌套，但层级多了之后代码很难维护，有没有更优雅的实现方案？最好能支持自定义UI样式和数据源。

2 回复

Flutter实现多级选择器有几种常见方式：

  1. 使用第三方库：

    • flutter_picker：支持多列联动选择
    • city_pickers：专门用于省市区选择
    • multi_select_flutter：支持多选功能

  2. 自定义实现：

    • 使用ListView或GridView嵌套
    • 通过StatefulWidget管理选中状态
    • 数据联动：上级选择后更新下级选项

  3. 简单示例代码：

List<String> _selectedItems = [];

void _showMultiLevelPicker() {
  showDialog(
    context: context,
    builder: (ctx) => AlertDialog(
      content: Column(
        children: [
          // 这里放置多级选择器UI
          _buildLevel1(),
          _buildLevel2(),
        ],
      ),
    ),
  );
}

建议根据具体需求选择合适方案，省市区选择推荐直接用现成库，自定义需求可以组合使用ListView+Checkbox实现。

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


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

1. 使用第三方库

推荐使用 flutter_picker 库：

dependencies:
  flutter_picker: ^2.1.13

import 'package:flutter_picker/flutter_picker.dart';

// 显示三级选择器
void showMultiLevelPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(pickerdata: [
      ['北京', '上海', '广州'],
      ['朝阳区', '海淀区', '东城区'],
      ['街道1', '街道2', '街道3']
    ]),
    title: Text('请选择地区'),
    onConfirm: (Picker picker, List value) {
      // 获取选择结果
      String province = picker.getSelectedValues()[0];
      String city = picker.getSelectedValues()[1];
      String district = picker.getSelectedValues()[2];
      print('选择结果: $province - $city - $district');
    },
  ).showDialog(context);
}

2. 自定义实现

使用 ListView 或 Column + ListView 组合：

class MultiLevelPicker extends StatefulWidget {
  @override
  _MultiLevelPickerState createState() => _MultiLevelPickerState();
}

class _MultiLevelPickerState extends State<MultiLevelPicker> {
  List<List<String>> data = [
    ['选项1-1', '选项1-2', '选项1-3'],
    ['选项2-1', '选项2-2'],
    ['选项3-1', '选项3-2', '选项3-3']
  ];
  
  List<int> selectedIndexes = [0, 0, 0];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(data.length, (level) {
        return Expanded(
          child: ListView.builder(
            itemCount: data[level].length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(data[level][index]),
                selected: selectedIndexes[level] == index,
                onTap: () {
                  setState(() {
                    selectedIndexes[level] = index;
                    // 重置下级选择
                    for (int i = level + 1; i < selectedIndexes.length; i++) {
                      selectedIndexes[i] = 0;
                    }
                  });
                },
              );
            },
          ),
        );
      }),
    );
  }
}

3. 使用 showModalBottomSheet

结合底部弹窗实现：

void showCustomPicker(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: 300,
        child: MultiLevelPicker(),
      );
    },
  );
}

推荐方案

  • 简单需求：使用 flutter_picker 库
  • 复杂定制：自定义实现，灵活性更高
  • 数据联动：确保选择上级时重置下级选项

这些方法都能有效实现多级选择器功能，根据具体需求选择合适的方案。

回到顶部