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

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

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

在實(shí)際開發(fā)過程中，經(jīng)常會(huì)用到底部彈窗來進(jìn)行快捷操作，例如選擇一個(gè)選項(xiàng)，選擇下一步操作等等。在 Flutter 中提供了一個(gè) showModelBottomSheet 方法用于彈出底部彈窗，本篇介紹如何使用底部彈窗。

實(shí)現(xiàn)效果

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

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

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

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

基本使用

基本使用對(duì)于全屏和默認(rèn)只差一個(gè)參數(shù)，演示代碼中，我們使用了一組模擬的數(shù)據(jù)構(gòu)建選項(xiàng)數(shù)據(jù)，然后再傳給顯示底部彈窗的方法，實(shí)際這組數(shù)據(jù)大部分是從后臺(tái)獲取的。當(dāng) isScrollControlled 是 true 時(shí)，則是全屏彈窗，默認(rèn)是 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,
        );
      },
    );
  }

需要注意的有四點(diǎn)：

彈窗需要上下文的 context，這是因?yàn)閷?shí)際頁面展示是通過 Navigator 的 push 方法導(dǎo)航的新的頁面完成的。
彈窗的組件構(gòu)建的 builder 方法，這里可以返回自己自定義的組件，后面的自定義組件就是在這里做文章。
在列表的元素的選中點(diǎn)擊事件 onTap 方法中，需要使用 Navigator的 pop 方法返回上一個(gè)頁面，這里可以攜帶選中的下標(biāo)（或其他值）返回，上一個(gè)頁面可以使用 await 的方式接收對(duì)應(yīng)返回的結(jié)果。
點(diǎn)擊蒙層也可以消失，這時(shí)候?qū)嶋H調(diào)用的方法是 Navigator.of(context).pop()。因?yàn)闆]有攜帶參數(shù)，所以接收的結(jié)果是 null，需要特殊處理一下。

自定義底部彈窗

在自定義底部彈窗中，我們做了如下自定義項(xiàng)：

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

這里有幾個(gè)額外需要注意的點(diǎn)：

獲取屏幕的尺寸可以使用MediaQuery.of(context).size屬性完成。
Stack 組件根據(jù)子元素的次序依次堆疊，最后面的在最頂層。textDirection 用于排布起始位置。
由于 Column 下面嵌套了一個(gè) ListView，因此需要使用 Expanded 將 ListView 包裹起來，以便有足夠的空間供 ListView 的內(nèi)容區(qū)滾動(dòng)，否則會(huì)報(bào)布局溢出警告。

總結(jié)

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

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

您可能感興趣的文章: