日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter多項選擇彈窗實現詳解_Android

更新時間： 2021-12-06 編程語言

在Flutter 底部彈窗詳解一篇中介紹了底部彈窗的實現。發出后有在琢磨如何實現多選，這也是很常用的一個功能。本篇介紹實現多選的思路和實現方式。

屏幕錄制2021-06-09 下午10.57.51.gif

多選和單選的不同之處

單選的時候，選中一個就可以直接把結果返回，因此本身底部彈窗無需狀態管理。但到多選的時候，需要知道當前選中的選項，有選項被點擊的時候需要存儲下來，當再次被點擊的時候要清空這個選項，同時界面還需要同步更新，因此就涉及到狀態管理了。

實現方式

在Flutter 中提供了一個 StatefulBuilder 的類，提供了一個 builder方法構建有狀態組件，并且提供了狀態更新方法，因此在里面完成狀態管理。

StatefulBuilder(builder: (context1, setState) {
  	return Widget;
	}
)

在這個 builder 方法中，setState 其實就是對應狀態組件的setState 對應的方法，這個 state 就是用于控制 StatefulBuilder 生成的組件的狀態的。這種方式有點類似于 React 的 useState 的鉤子函數用法。

界面變更

首先底部彈窗的頭部組件要更換，需要增加確認按鈕，將構建該組件的方法抽離出來如下所示：

Widget _getModalSheetHeaderWithConfirm(String title,
      {Function onCancel, Function onConfirm}) {
  return SizedBox(
    height: 50,
    child: Row(
      children: [
        IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            onCancel();
          },
        ),
        Expanded(
          child: Center(
            child: Text(
              title,
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
            ),
          ),
        ),
        IconButton(
            icon: Icon(
              Icons.check,
              color: Colors.blue,
            ),
            onPressed: () {
              onConfirm();
            }),
      ],
    ),
  );
}

通過這個方法可以通過外部參數傳入標題，取消響應事件回調和確認事件回調，通用性更強。

其次是選項需要有圖標標記，選中時顯示為勾選框，未選中時是空白框，這需要通過狀態數據來控制。這里我們使用了 Set類型，保證選中的數據集是不重復的。在點擊選項時，如果選項對應數組的下標在 Set內，則從中移出，表示取消選擇；如果不在 Set內，則加入其中，表示選中。這個過程需要包在 state里，以更新界面。通過列表元素當前的下標是否在 Set內，如果在則顯示為選中，不在則顯示未選中。

最后是確認事件的回調，確認后將 Set的元素轉換為數組返回，然后供上級業務使用選中的下標數組判斷選擇了那些數據。

代碼實現

關鍵代碼實現如下，重點關注一下StatefulBuilder的使用和利用 Set這一數據類型對應的選擇和取消選擇的操作業務邏輯。

Future<List<int>> _showMultiChoiceModalBottomSheet(
      BuildContext context, List<String> options) async {
  Set<int> selected = Set<int>();
  return showModalBottomSheet<List<int>>(
    backgroundColor: Colors.transparent,
    isScrollControlled: true,
    context: context,
    builder: (BuildContext context) {
      return StatefulBuilder(builder: (context1, setState) {
        return Container(
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: const Radius.circular(20.0),
              topRight: const Radius.circular(20.0),
            ),
          ),
          height: MediaQuery.of(context).size.height / 2.0,
          child: Column(children: [
            _getModalSheetHeaderWithConfirm('多選底部彈窗', 
                onCancel: () {
                  Navigator.of(context).pop();
                }, 
                onConfirm: () {
                  Navigator.of(context).pop(selected.toList());
                },
            ),
            Divider(height: 1.0),
            Expanded(
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    trailing: Icon(
                        selected.contains(index)
                            ? Icons.check_box
                            : Icons.check_box_outline_blank,
                        color: Theme.of(context).primaryColor),
                    title: Text(options[index]),
                    onTap: () {
                      setState(() {
                        if (selected.contains(index)) {
                          selected.remove(index);
                        } else {
                          selected.add(index);
                        }
                      });
                    },
                  );
                },
                itemCount: options.length,
              ),
            ),
          ]),
        );
      });
    },
  );
}

總結

本篇介紹了底部彈窗實現多選的方式，其中實現的方式還可以有很多種，例如直接在自定義組件中使用有狀態組件。這里介紹的方法可以作為一個參考，通過動態構建有狀態組件能夠簡單快速地實現底部彈窗的多選功能。

原文鏈接：https://blog.csdn.net/shuijian00/article/details/121527176

欄目分類
最近更新