Flutter底部彈窗怎么實現多項選擇

小編給大家分享一下Flutter底部彈窗怎么實現多項選擇，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

多選和單選的不同之處

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

實現方式

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

以上是“Flutter底部彈窗怎么實現多項選擇”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！