Flutter底部彈窗ModelBottomSheet怎么用

這篇文章給大家分享的是有關Flutter底部彈窗ModelBottomSheet怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

實現效果

最終實現效果如圖片所示，分布演示了基礎的，全屏的和自定義的底部彈窗形式。

代碼結構

在消息頁面 message.dart 中，使用 Column 組件構建了三個按鈕，點擊每個按鈕調用不同的底部彈窗顯示。這部分代碼不展示，核心注意的方式是按鈕的 onPressed 響應方法，需要使用 async 修飾，這是因為 ModalBottomSheet 的返回結果是一個 Future 對象，需要通過 await 來獲取返回結果。

onPressed: () async {
  int selectedIndex = await _showCustomModalBottomSheet(context, _options);
  print("自定義底部彈層：選中了第$selectedIndex個選項");
},
//...

基本使用

基本使用對于全屏和默認只差一個參數，演示代碼中，我們使用了一組模擬的數據構建選項數據，然后再傳給顯示底部彈窗的方法，實際這組數據大部分是從后臺獲取的。當 isScrollControlled 是 true 時，則是全屏彈窗，默認是 false。

Future<int> _showBasicModalBottomSheet(context, List<String> options) async {
    return showModalBottomSheet<int>(
      isScrollControlled: false,
      context: context,
      builder: (BuildContext context) {
        return ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
                title: Text(options[index]),
                onTap: () {
                  Navigator.of(context).pop(index);
                });
          },
          itemCount: options.length,
        );
      },
    );
  }

需要注意的有四點：

• 彈窗需要上下文的 context，這是因為實際頁面展示是通過 Navigator 的 push 方法導航的新的頁面完成的。

• 彈窗的組件構建的 builder 方法，這里可以返回自己自定義的組件，后面的自定義組件就是在這里做文章。

• 在列表的元素的選中點擊事件 onTap 方法中，需要使用 Navigator的 pop 方法返回上一個頁面，這里可以攜帶選中的下標（或其他值）返回，上一個頁面可以使用 await 的方式接收對應返回的結果。

• 點擊蒙層也可以消失，這時候實際調用的方法是 Navigator.of(context).pop()。因為沒有攜帶參數，所以接收的結果是 null，需要特殊處理一下。
  

自定義底部彈窗

在自定義底部彈窗中，我們做了如下自定義項：

• 彈窗的高度指定為屏幕高度的一半，這可以通過自定義組件的 Container 高度實現。

• 增加了標題欄，且標題欄有關閉按鈕：標題在整個標題欄是居中的，而關閉按鈕是在標題欄右側頂部。這可以通過 Stack 堆棧布局組件實現不同的組件層疊及位置。

• 左上角和右上角做了圓角處理，這個可以通過 Container 的裝飾完成，但需要注意的是，由于底部彈窗默認是有顏色的，因此要顯示出圓角需要將底部彈窗的顏色設置為透明。

自定義彈窗的代碼如下所示：

Future<int> _showCustomModalBottomSheet(context, List<String> options) async {
  return showModalBottomSheet<int>(
    backgroundColor: Colors.transparent,
    isScrollControlled: true,
    context: context,
    builder: (BuildContext context) {
      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: [
          SizedBox(
            height: 50,
            child: Stack(
              textDirection: TextDirection.rtl,
              children: [
                Center(
                  child: Text(
                    '底部彈窗',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                ),
                IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      Navigator.of(context).pop();
                    }),
              ],
            ),
          ),
          Divider(height: 1.0),
          Expanded(
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                    title: Text(options[index]),
                    onTap: () {
                      Navigator.of(context).pop(index);
                    });
              },
              itemCount: options.length,
            ),
          ),
        ]),
      );
    },
  );
}

這里有幾個額外需要注意的點：

• 獲取屏幕的尺寸可以使用MediaQuery.of(context).size屬性完成。

• Stack 組件根據子元素的次序依次堆疊，最后面的在最頂層。textDirection 用于排布起始位置。

• 由于 Column 下面嵌套了一個 ListView，因此需要使用 Expanded 將 ListView 包裹起來，以便有足夠的空間供 ListView 的內容區滾動，否則會報布局溢出警告。
  

感謝各位的閱讀！關于“Flutter底部彈窗ModelBottomSheet怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！