Flutter - 底部多选弹框组件

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

有时需要弹框选择多个数据，因此写了个底部多选弹框组件
支持搜索，设置默认选中数据，暗黑模式适配

效果图

使用方法

final multiDictArr = [
  {'label': '类型一', 'value': '1'},
  {'label': '类型二', 'value': '2'},
  {'label': '类型三', 'value': '3'},
  {'label': '类型四', 'value': '4'},
  {'label': '类型五', 'value': '5'},
  {'label': '类型六', 'value': '6'},
  {'label': '类型七类型七类型七类型七', 'value': '7'},
  {'label': '类型八类型八类型八类型八类型八类型八类型八类型八类型八类型八', 'value': '8'},
  {'label': '类型九', 'value': '9'},
];

 JhMultiPicker.show(context, data: multiDictArr, values: ['3', '5'], title: '选择类型',
     clickCallBack: (selectValues, selectItemArr) {
   print('selectValues==  $selectValues');
   print('selectItemArr==  $selectItemArr');
   showText(selectValues);
 });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

jh_multi_picker代码

///  jh_multi_picker.dart
///
///  Created by iotjin on 2023/08/28.
///  description: 底部多选弹框

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '/jh_common/jh_form/jh_searchbar.dart';
import '/jh_common/utils/jh_common_utils.dart';
import '/project/configs/colors.dart';
import '/project/provider/theme_provider.dart';
import '/project/routes/jh_nav_utils.dart';

const String _labelKey = 'label';
const String _valueKey = 'value';
const String _titleText = '请选择';
const String _cancelText = '取消';
const String _confirmText = '确定';
const String _searchHintText = '搜索';

const double _headerHeight = 50.0;
const double _headerRadius = 10.0;
const double _headerLineHeight = 0.5;
const double _titleFontSize = 18.0;
const double _btnFontSize = 17.0;
const double _textFontSize = 16.0;

/// 选择回调，返回所有选中的values数组和所有item数组
typedef _ClickCallBack = void Function(dynamic selectValues, dynamic selectItemArr);

class JhMultiPicker {
  static bool _isShowPicker = false;

  static void show(
    BuildContext context, {
    required List data, // 数据源数组
    String labelKey = _labelKey, // 数据源数组的文字字段
    String valueKey = _valueKey, // 数据源数组的数值字段
    String title = _titleText,
    List values = const [], // 默认选中的数组(一维数组)，通过valuesKey确定是根据value还是label进行比较，最好使用唯一值作为元素
    String valuesKey = _valueKey, // 选中数组内元素使用的字段，对应valueKey或者labelKey
    bool isShowSearch = true,
    String searchHintText = _searchHintText,
    bool isShowRadius = true,
    _ClickCallBack? clickCallBack,
  }) {
    if (_isShowPicker || data.isEmpty) {
      return;
    }

    var radius = isShowRadius ? _headerRadius : 0.0;

    showModalBottomSheet<void>(
      context: context,
      // 使用true则高度不受16分之9的最高限制
      isScrollControlled: false,
      // 设置圆角
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(radius),
          topRight: Radius.circular(radius),
        ),
      ),
      // 抗锯齿
      clipBehavior: Clip.antiAlias,
      builder: (BuildContext context) {
        return SafeArea(
          child: JhMultiPickerView(
            data: data,
            labelKey: labelKey,
            valueKey: valueKey,
            title: title,
            values: values,
            valuesKey: valuesKey,
            isShowSearch: isShowSearch,
            searchHintText: searchHintText,
            clickCallBack: clickCallBack,
          ),
        );
      },
    ).then((value) => _isShowPicker = false);
  }
}

class JhMultiPickerView extends StatefulWidget {
  const JhMultiPickerView({
    Key? key,
    required this.data,
    this.labelKey = _labelKey,
    this.valueKey = _valueKey,
    this.title = _titleText,
    this.values = const [],
    this.valuesKey = _valueKey,
    this.isShowSearch = true,
    this.searchHintText = _searchHintText,
    this.clickCallBack,
  }) : super(key: key);

  final List? data; // 数据源数组
  final String labelKey; // 数据源数组的文字字段
  final String valueKey; // 数据源数组的数值字段
  final String title;
  final List values; // 默认选中的数组(一维数组)，通过valuesKey确定是根据value还是label进行比较，最好使用唯一值作为元素
  final String valuesKey; // 选中数组内元素使用的字段，对应valueKey或者labelKey
  final bool isShowSearch;
  final String searchHintText;
  final _ClickCallBack? clickCallBack;

  @override
  State<JhMultiPickerView> createState() => _JhMultiPickerViewState();
}

class _JhMultiPickerViewState extends State<JhMultiPickerView> {
  late List<dynamic> _selectedValues = [];

  // 搜索数据
  List _searchData = [];
  bool _isShowSearchResult = false;
  String _searchKeyword = '';

  @override
  void initState() {
    super.initState();
    _selectedValues = List.from(widget.values);
  }

  @override
  Widget build(BuildContext context) {
    return _body();
  }

  _body() {
    // 默认颜色
    var bgColor = KColors.dynamicColor(context, KColors.kPickerBgColor, KColors.kPickerBgDarkColor);
    var lineColor = KColors.dynamicColor(context, KColors.kLineColor, KColors.kLineDarkColor);

    return Container(
      color: bgColor,
      child: Column(
        children: <Widget>[
          _header(),
          SizedBox(height: _headerLineHeight, child: Container(color: lineColor)),
          _searchBar(),
          _mainWidget(),
        ],
      ),
    );
  }

  _header() {
    // 默认颜色
    var headerColor = KColors.dynamicColor(context, KColors.kPickerHeaderColor, KColors.kPickerHeaderDarkColor);
    var titleColor = KColors.dynamicColor(context, KColors.kPickerTitleColor, KColors.kPickerTitleDarkColor);
    var btnColor = KColors.dynamicColor(context, KColors.kPickerBtnColor, KColors.kPickerBtnDarkColor);

    return Container(
      height: _headerHeight,
      color: headerColor,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            child: Container(
              padding: const EdgeInsets.only(left: 15),
              child: Text(_cancelText, style: TextStyle(fontSize: _btnFontSize, color: btnColor)),
            ),
            onTap: () {
              widget.clickCallBack?.call([], []);
              JhNavUtils.goBack(context);
            },
          ),
          Text(widget.title, style: TextStyle(fontSize: _titleFontSize, color: titleColor)),
          GestureDetector(
              child: Container(
                padding: const EdgeInsets.only(right: 15),
                child: Text(_confirmText, style: TextStyle(fontSize: _btnFontSize, color: btnColor)),
              ),
              onTap: () {
                widget.clickCallBack?.call(_selectedValues, _getSelectItemList());
                JhNavUtils.goBack(context);
              }),
        ],
      ),
    );
  }

  Widget _mainWidget() {
    List dataArr = _isShowSearchResult ? _searchData : (widget.data ?? []);
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: dataArr.length,
        itemBuilder: (BuildContext context, int index) {
          return _buildItem(dataArr[index], index);
        },
      ),
    );
  }

  _buildItem(item, index) {
    // TODO: 通过ThemeProvider进行主题管理
    final provider = Provider.of<ThemeProvider>(context);
    var themeColor = KColors.dynamicColor(context, provider.getThemeColor(), KColors.kThemeColor);

    var selectValue = widget.valuesKey == widget.valueKey ? item[widget.valueKey] : item[widget.labelKey];
    return CheckboxListTile(
      title: Text(item[widget.labelKey].toString(), style: const TextStyle(fontSize: _textFontSize)),
      value: _selectedValues.contains(selectValue),
      activeColor: themeColor,
      onChanged: (bool? checked) {
        setState(() {
          if (checked ?? false) {
            _selectedValues.add(selectValue);
          } else {
            _selectedValues.remove(selectValue);
          }
          // widget.clickCallBack?.call(_selectedValues, _getSelectItemList());
        });
      },
    );
  }

  _getSelectItemList() {
    var newList = (widget.data ?? []).where((item) => _selectedValues.contains(item[widget.valueKey])).toList();
    return newList;
  }

  Widget _searchBar() {
    Widget searchbar = JhSearchBar(
      hintText: widget.searchHintText,
      text: _searchKeyword,
      inputCallBack: (value) {
        JhCommonUtils.debounce(() {
          setState(() {
            _searchKeyword = value;
            if (value.isNotEmpty) {
              _searchData = _getSearchData(value);
              _isShowSearchResult = _searchData.isNotEmpty;
            } else {
              _isShowSearchResult = false;
            }
          });
        }, 500);
      },
    );
    return !widget.isShowSearch ? Container() : searchbar;
  }

  /// 根据搜索文字过滤数据
  _getSearchData(keyword) {
    var newList = (widget.data ?? [])
        .where((item) => item[widget.labelKey].toLowerCase().contains(keyword.toLowerCase()))
        .toList();
    return newList;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259