Flutter 之 嵌套可滾動組件 （二十五）

1. NestedScrollView

CustomScrollView 只能組合Sliver，有時我們需要組合的組件中有一個是可滾動組件（listView，GridView），那就需要通過SliverToBoxAdapter嵌入，但通過SliverToBoxAdapter 嵌入的組件要求和CustomScrollView滾動方向不一致，否則不能正常工作。
為了解決這個問題，F(xiàn)lutter 中提供了一個NestedScrollView 組件，它的功能時組合（協(xié)調(diào)）兩個可滾動組件，下面我們看看它的定義

const NestedScrollView({
  ... //省略可滾動組件的通用屬性
  //header，sliver構(gòu)造器
  required this.headerSliverBuilder,
  //可以接受任意的可滾動組件
  required this.body,
  this.floatHeaderSlivers = false,
})

1.1 示例

image.png

頁面有三部分組成：
1.最上面是一個 AppBar，實現(xiàn)導(dǎo)航，要能固定在頂端
2.AppBar 下面是一個 SliverList，可以有任意多個列表項。
3.最下面是一個 ListView。

預(yù)期的效果是 SliverList 和 下面的 ListView 的滑動能夠統(tǒng)一（而不是在下面ListView 上滑動時只有ListView響應(yīng)滑動），整個頁面在垂直方向是一個整體

代碼如下：

class MSHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              title: Text("嵌套ListView"),
              pinned: true, // 固定在頂部
              forceElevated: innerBoxIsScrolled, // 是否顯示陰影
            ),
            buildSliverList(5),
          ];
        },
        body: ListView.builder(
          padding: const EdgeInsets.all(8),
          // physics: const ClampingScrollPhysics(), //重要
          itemCount: 30,
          itemBuilder: (BuildContext context, int index) {
            return SizedBox(
              height: 50,
              child: Center(child: Text('Item $index')),
            );
          },
        ),
      ),
    );
  }

  Widget buildSliverList([int count = 5]) {
    return SliverFixedExtentList(
      delegate: SliverChildBuilderDelegate(
        (ctx, index) {
          return ListTile(
            leading: Text("Item $index"),
          );
        },
        childCount: count,
      ),
      itemExtent: 50,
    );
  }
}

NestedScrollView 在邏輯上將可滾動組件分為了 header 和 body 兩部分，header 部分我們可以認(rèn)為是外部可滾動組件（outer scroll view），可以認(rèn)為這個可滾動組件就是 CustomScrollView ，所以它只能接收 Sliver，我們通過headerSliverBuilder 來構(gòu)建一個 Sliver 列表給外部的可滾動組件；而 body 部分可以接收任意的可滾動組件，該可滾動組件稱為內(nèi)部可滾動組件 （inner scroll view）。

運行效果如下


25.gif

2. NestedScrollView 原理

NestedScrollView 的結(jié)構(gòu)圖如圖6-33所示：

image.png
  • NestedScrollView 整體就是一個 CustomScrollView （實際上是 CustomScrollView 的一個子類）
  • header 和 body 都是 CustomScrollView 的子 Sliver ，注意，雖然 body 是一個 RenderBox，但是它會被包裝為 Sliver 。
  • CustomScrollView 將其所有子 Sliver 在邏輯上分為 header 和 body 兩部分：header 是前面部分、body 是后面部分。
  • 當(dāng) body 是一個可滾動組件時， 它和 CustomScrollView 分別有一個 Scrollable ，由于 body 在 CustomScrollView 的內(nèi)部，所以稱其為內(nèi)部可滾動組件，稱 CustomScrollView 為外部可滾動組件；同時 因為 header 部分是 Sliver，所以沒有獨立的 Scrollable，滑動時是受 CustomScrollView 的 Scrollable 控制，所以為了區(qū)分，可以稱 header 為外部可滾動組件（Flutter 文檔中是這么約定的）。
  • NestedScrollView 核心功能就是通過一個協(xié)調(diào)器來協(xié)調(diào)外部可滾動組件和內(nèi)部可滾動組件的滾動，以使滑動效果連貫統(tǒng)一，協(xié)調(diào)器的實現(xiàn)原理就是分別給內(nèi)外可滾動組件分別設(shè)置一個 controller，然后通過這兩個controller 來協(xié)調(diào)控制它們的滾動。

綜上，在使用 NestedScrollView 有兩點需要注意：

  1. 要確認(rèn)內(nèi)部的可滾動組件（body）的 physics 是否需要設(shè)置為 ClampingScrollPhysics。比如上面的示例運行在 iOS 中時，ListView 如果沒有設(shè)置為 ClampingScrollPhysics，則用戶快速滑動到頂部時，會執(zhí)行一個彈性效果，此時 ListView 就會與 header 顯得割裂（滑動效果不統(tǒng)一），所以需要設(shè)置。但是，如果 header 中只有一個 SliverAppBar 則不應(yīng)該加，因為 SliverAppBar 是固定在頂部的，ListView 滑動到頂部時上面已經(jīng)沒有要繼續(xù)往下滑動的元素了，所以此時出現(xiàn)彈性效果是符合預(yù)期的。
  2. 內(nèi)部的可滾動組件（body的）不能設(shè)置 controller 和 primary，這是因為 NestedScrollView 的協(xié)調(diào)器中已經(jīng)指定了它的 controller，如果重新設(shè)定則協(xié)調(diào)器將會失效。

3. SliverAppBar

SliverAppBar 是 AppBar 的Sliver 版，大多數(shù)參數(shù)都相同，但 SliverAppBar 會有一些特有的功能，下面是 SliverAppBar 特有的一些配置：

const SliverAppBar({
  this.collapsedHeight, // 收縮起來的高度
  this.expandedHeight,// 展開時的高度
  this.pinned = false, // 是否固定
  this.floating = false, //是否漂浮
  this.snap = false, // 當(dāng)漂浮時，此參數(shù)才有效
  bool forceElevated //導(dǎo)航欄下面是否一直顯示陰影
  ...
})
  • SliverAppBar 在 NestedScrollView 中隨著用戶的滑動是可以收縮和展開的，因此我們需要分別指定收縮和展開時的高度。
  • pinned 為true 時 SliverAppBar 會固定在 NestedScrollView 的頂部，行為 和 SliverPersistentHeader 的 pinned功能一致。
  • floating 和 snap：floating 為 true 時，SliverAppBar 不會固定到頂部，當(dāng)用戶向上滑動到頂部時，SliverAppBar 也會滑出可視窗口。當(dāng)用戶反向滑動時，SliverAppBar 的 snap 為 true 時，此時無論 SliverAppBar 已經(jīng)滑出屏幕多遠(yuǎn)，都會立即回到屏幕頂部；但如果 snap 為 false，則 SliverAppBar 只有當(dāng)向下滑到邊界時才會重新回到屏幕頂部。這一點和 SliverPersistentHeader 的 floating 相似，但不同的是 SliverPersistentHeader 沒有 snap 參數(shù)，當(dāng)它的 floating 為 true 時，效果是等同于 SliverAppBar 的floating 和 snap 同時為 true 時的效果。

4. SnapAppBar 示例

class SnapAppBar extends StatelessWidget {
  const SnapAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            // 實現(xiàn) snap 效果
            SliverAppBar(
              floating: true,
              snap: true,
              expandedHeight: 200,
              forceElevated: innerBoxIsScrolled,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  "assets/images/fengjing3.webp",
                  fit: BoxFit.cover,
                ),
              ),
            ),
            buildSliverList(5),
          ];
        },
        body: Builder(builder: (BuildContext context) {
          return CustomScrollView(
            slivers: <Widget>[buildSliverList(100)],
          );
        }),
      ),
    );
  }

  Widget buildSliverList([int count = 5]) {
    return SliverFixedExtentList(
      delegate: SliverChildBuilderDelegate(
        (ctx, index) {
          return ListTile(
            leading: Text("Item $index"),
          );
        },
        childCount: count,
      ),
      itemExtent: 50,
    );
  }
}
26.gif

4.1 優(yōu)化

上述代碼存在一個問題：
當(dāng)我們滑動到頂部時，然后反向輕微滑動一點點，這時 SliverAppBar 就會整體回到屏幕頂部，但會遮住部分ListView

27.gif

使用SliverOverlapAbsorber 和 SliverOverlapInjector 進(jìn)行優(yōu)化

class SnapAppBar extends StatelessWidget {
  const SnapAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            // 實現(xiàn) snap 效果
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                floating: true,
                snap: true,
                expandedHeight: 200,
                forceElevated: innerBoxIsScrolled,
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.asset(
                    "assets/images/fengjing3.webp",
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            buildSliverList(5),
          ];
        },
        body: Builder(builder: (BuildContext context) {
          return CustomScrollView(
            slivers: <Widget>[
              SliverOverlapInjector(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              ),
              buildSliverList(100),
            ],
          );
        }),
      ),
    );
  }

  Widget buildSliverList([int count = 5]) {
    return SliverFixedExtentList(
      delegate: SliverChildBuilderDelegate(
        (ctx, index) {
          return ListTile(
            leading: Text("Item $index"),
          );
        },
        childCount: count,
      ),
      itemExtent: 50,
    );
  }
}

上面代碼運行后問題解決，和之前的代碼相比有兩個部分發(fā)生了變化：

1.SliverAppBar 用 SliverOverlapAbsorber 包裹了起來，它的作用就是獲取 SliverAppBar 返回時遮住內(nèi)部可滾動組件的部分的長度，這個長度就是 overlap（重疊） 的長度。
2.在 body 中往 CustomScrollView 的 Sliver列表的最前面插入了一個 SliverOverlapInjector，它會將 SliverOverlapAbsorber 中獲取的 overlap 長度應(yīng)用到內(nèi)部可滾動組件中。這樣在 SliverAppBar 返回時內(nèi)部可滾動組件也會相應(yīng)的同步滑動相應(yīng)的距離。

SliverOverlapAbsorber 和 SliverOverlapInjector 都接收有一個 handle，給它傳入的是NestedScrollView.sliverOverlapAbsorberHandleFor(context)。andle 就是 SliverOverlapAbsorber 和 SliverOverlapInjector 的通信橋梁，即傳遞 overlap 長度。

28.gif

實際上，當(dāng) snap 為 true 時，只需要給 SliverAppBar 包裹一個 SliverOverlapAbsorber即可，而無需再給 CustomScrollView 添加 SliverOverlapInjector，因為這種情況 SliverOverlapAbsorber 會自動吸收 overlap，以調(diào)整自身的布局高度為 SliverAppBar 的實際高度，這樣的話 header 的高度變化后就會自動將 body 向下?lián)危╤eader 和 body 屬于同一個 CustomScrollView），同時，handle 中的 overlap 長度始終 0。而只有當(dāng) SliverAppBar 被 SliverOverlapAbsorber 包裹且為固定模式時（pinned 為 true ），CustomScrollView 中添加SliverOverlapInjector 才有意義， handle 中的 overlap 長度不為 0

綜上 建議 SliverOverlapAbsorber 和 SliverOverlapInjector 配對使用，這樣可以避免我們?nèi)蘸髮nap模式改為固定模式后忘記添加 SliverOverlapInjector 而導(dǎo)致bug

5. 嵌套 TabBarView

我們實現(xiàn)商城主頁，它有三個Tab，為了獲得更大的商品顯示空間，我們希望用戶向上滑動時 導(dǎo)航欄能夠滑出屏幕，當(dāng)用戶向下滑動時，導(dǎo)航欄能迅速回到屏幕，因為向下滑動時可能是用戶想看之前的商品，也可能是用戶向找到導(dǎo)航欄返回

class MSTabBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<String> _tabs = ['猜你喜歡', '今日特價', '發(fā)現(xiàn)更多'];
    // 構(gòu)建 tabBar
    return DefaultTabController(
      length: _tabs.length,
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  floating: true,
                  snap: true,
                  forceElevated: innerBoxIsScrolled,
                  title: Text("商城"),
                  bottom: TabBar(
                    tabs: _tabs.map((e) {
                      return Tab(text: e);
                    }).toList(),
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: _tabs.map((e) {
              return Builder(builder: (context) {
                return CustomScrollView(
                  slivers: [
                    SliverOverlapInjector(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                            context)),
                    buildSliverList(20),
                  ],
                );
              });
            }).toList(),
          ),
        ),
      ),
    );
  }

  Widget buildSliverList([int count = 5]) {
    return SliverFixedExtentList(
      delegate: SliverChildBuilderDelegate(
        (ctx, index) {
          return ListTile(
            leading: Text("Item $index"),
          );
        },
        childCount: count,
      ),
      itemExtent: 50,
    );
  }
}
29.gif
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容