Flutter 底部彈窗如何實現(xiàn)多項選擇

更新時間：2021年06月15日 09:06:57 作者：島上碼農(nóng)

在Flutter中提供了一個showModelBottomSheet方法用于彈出底部彈窗，本篇基于這個方法介紹實現(xiàn)底部彈窗多選的思路和方式。

多選和單選的不同之處

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

實現(xiàn)方式

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

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

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

界面變更

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

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();
            }),
      ],
    ),
  );
}

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

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

最后是確認事件的回調(diào)，確認后將 Set 的元素轉(zhuǎn)換為數(shù)組返回，然后供上級業(yè)務使用選中的下標數(shù)組判斷選擇了那些數(shù)據(jù)。

代碼實現(xiàn)

關(guān)鍵代碼實現(xiàn)如下，重點關(guān)注一下StatefulBuilder的使用和利用 Set 這一數(shù)據(jù)類型對應的選擇和取消選擇的操作業(yè)務邏輯。

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,
              ),
            ),
          ]),
        );
      });
    },
  );
}