快捷導(dǎo)航

Flutter實現(xiàn)底部彈窗效果

更新時間：2021年11月30日 10:20:57 作者：島上碼農(nóng)

本文詳細講解了Flutter實現(xiàn)底部彈窗效果的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實現(xiàn)效果

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

代碼結(jié)構(gòu)

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

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

基本使用

基本使用對于全屏和默認只差一個參數(shù)，演示代碼中，我們使用了一組模擬的數(shù)據(jù)構(gòu)建選項數(shù)據(jù)，然后再傳給顯示底部彈窗的方法，實際這組數(shù)據(jù)大部分是從后臺獲取的。當 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 方法導(dǎo)航的新的頁面完成的。
彈窗的組件構(gòu)建的 builder 方法，這里可以返回自己自定義的組件，后面的自定義組件就是在這里做文章。
在列表的元素的選中點擊事件 onTap 方法中，需要使用 Navigator的 pop 方法返回上一個頁面，這里可以攜帶選中的下標（或其他值）返回，上一個頁面可以使用 await 的方式接收對應(yīng)返回的結(jié)果。
點擊蒙層也可以消失，這時候?qū)嶋H調(diào)用的方法是 Navigator.of(context).pop()。因為沒有攜帶參數(shù)，所以接收的結(jié)果是 null，需要特殊處理一下。

自定義底部彈窗

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

彈窗的高度指定為屏幕高度的一半，這可以通過自定義組件的 Container 高度實現(xiàn)。
增加了標題欄，且標題欄有關(guān)閉按鈕：標題在整個標題欄是居中的，而關(guān)閉按鈕是在標題欄右側(cè)頂部。這可以通過 Stack堆棧布局組件實現(xiàn)不同的組件層疊及位置。
左上角和右上角做了圓角處理，這個可以通過 Container 的裝飾完成，但需要注意的是，由于底部彈窗默認是有顏色的，因此要顯示出圓角需要將底部彈窗的顏色設(shè)置為透明。

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

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 組件根據(jù)子元素的次序依次堆疊，最后面的在最頂層。textDirection 用于排布起始位置。
由于 Column 下面嵌套了一個 ListView，因此需要使用 Expanded 將 ListView 包裹起來，以便有足夠的空間供 ListView 的內(nèi)容區(qū)滾動，否則會報布局溢出警告。

總結(jié)

本篇介紹了三種 ModalBottomSheet 的方式，可以看到 ModalBottomSheet 非常靈活。實際開發(fā)過程中，還可以根據(jù)需要，利用 ModalBottomSheet的 builder 方法返回不同的組件進而定制自己的底部彈層組件，能夠滿足絕大多數(shù)場景。同時，借 ModalBottomSheet 的啟發(fā)，我們自己也可以使用 Navigator方法來實現(xiàn)其他形式的彈層，例如從底部彈出登錄頁，登錄后再返回原頁面。

以上所述是小編給大家介紹的Flutter實現(xiàn)底部彈窗效果，希望對大家有所幫助。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: