Flutter：使用復選框進行下拉多選

本文向您展示了在 Flutter 中使用復選框實現下拉多選的兩種不同方法。在第一種方法中，我們將從頭開始構建多選。在第二種方法中，我們將使用第三方包快速完成工作。

從頭開始使用復選框創建多選

應用預覽

我們將要構建的應用程序有一個專業的、功能齊全的多選小部件，可顯示選項列表。可以通過選中/取消選中與其關聯的復選框來選擇或取消選擇一個選項。

當按下升高的按鈕時，將顯示多選對話框。它讓用戶在編程中選擇他們最喜歡的主題。所選主題將作為籌碼顯示在屏幕上。

以下是我們的應用程序的運行方式：

構建自定義多選小部件

創建一個名為MultiSelect的可重用小部件，它可以獲取選項列表（您可以對這些項目進行硬編碼或從數據庫/API 中獲取它們）：

// Multi Select widget // This widget is reusable class MultiSelect extends StatefulWidget {final List<String> items;const MultiSelect({Key? key, required this.items}) : super(key: key);@overrideState<StatefulWidget> createState() => _MultiSelectState(); }class _MultiSelectState extends State<MultiSelect> {// this variable holds the selected itemsfinal List<String> _selectedItems = [];// This function is triggered when a checkbox is checked or uncheckedvoid _itemChange(String itemValue, bool isSelected) {setState(() {if (isSelected) {_selectedItems.add(itemValue);} else {_selectedItems.remove(itemValue);}});}// this function is called when the Cancel button is pressedvoid _cancel() {Navigator.pop(context);}// this function is called when the Submit button is tappedvoid _submit() {Navigator.pop(context, _selectedItems);}@overrideWidget build(BuildContext context) {return AlertDialog(title: const Text('Select Topics'),content: SingleChildScrollView(child: ListBody(children: widget.items.map((item) => CheckboxListTile(value: _selectedItems.contains(item),title: Text(item),controlAffinity: ListTileControlAffinity.leading,onChanged: (isChecked) => _itemChange(item, isChecked!),)).toList(),),),actions: [TextButton(child: const Text('Cancel'),onPressed: _cancel,),ElevatedButton(child: const Text('Submit'),onPressed: _submit,),],);} }

完整的代碼

這是您在上面的演示中看到的應用程序的代碼：

import 'package:flutter/material.dart';void main() {runApp(const MyApp()); }class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {const String title = "堅果";return MaterialApp(debugShowCheckedModeBanner: false,title: title,theme: ThemeData(primarySwatch: Colors.indigo,),home: const HomePage(),);} }// Multi Select widget // This widget is reusable class MultiSelect extends StatefulWidget {final List<String> items;const MultiSelect({Key? key, required this.items}) : super(key: key);@overrideState<StatefulWidget> createState() => _MultiSelectState(); }class _MultiSelectState extends State<MultiSelect> {// this variable holds the selected itemsfinal List<String> _selectedItems = [];// This function is triggered when a checkbox is checked or uncheckedvoid _itemChange(String itemValue, bool isSelected) {setState(() {if (isSelected) {_selectedItems.add(itemValue);} else {_selectedItems.remove(itemValue);}});}// this function is called when the Cancel button is pressedvoid _cancel() {Navigator.pop(context);}// this function is called when the Submit button is tappedvoid _submit() {Navigator.pop(context, _selectedItems);}@overrideWidget build(BuildContext context) {return AlertDialog(title: const Text('Select Topics'),content: SingleChildScrollView(child: ListBody(children: widget.items.map((item) => CheckboxListTile(value: _selectedItems.contains(item),title: Text(item),controlAffinity: ListTileControlAffinity.leading,onChanged: (isChecked) => _itemChange(item, isChecked!),)).toList(),),),actions: [TextButton(child: const Text('取消'),onPressed: _cancel,),ElevatedButton(child: const Text('確定'),onPressed: _submit,),],);} }// Implement a multi select on the Home screen class HomePage extends StatefulWidget {const HomePage({Key? key}) : super(key: key);@override_HomePageState createState() => _HomePageState(); }class _HomePageState extends State<HomePage> {List<String> _selectedItems = [];String _title = "堅果";void _showMultiSelect() async {// a list of selectable items// these items can be hard-coded or dynamically fetched from a database/APIfinal List<String> _items = ['Flutter','Node.js','React Native','Java','Docker','MySQL'];final List<String>? results = await showDialog(context: context,builder: (BuildContext context) {return MultiSelect(items: _items);},);// Update UIif (results != null) {setState(() {_selectedItems = results;});}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(_title),),body: Padding(padding: const EdgeInsets.all(20),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// use this button to open the multi-select dialogElevatedButton(child: const Text('選出你最喜歡的技術'),onPressed: _showMultiSelect,),const Divider(height: 30,),// display selected itemsWrap(children: _selectedItems.map((e) => Chip(label: Text(e),)).toList(),)],),),);} }

使用第三方插件

進行自定義多選既不復雜也不復雜。但是，如果您有緊急任務并且只想盡快進行多選，那么使用第三方插件是一個不錯的選擇。有幾個不錯的開源包供您使用：

• flutter_multi_select
• multiselect_formfield
• flutter_multiselect
• 多選

結論

您已經學習了不止一種向應用程序添加多選的技術。如果你想探索更多關于現代 Flutter 開發的新鮮有趣的東西，

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Flutter：使用复选框进行下拉多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。