快捷導(dǎo)航

Flutter 利用CustomScrollView實(shí)現(xiàn)滑動(dòng)效果

更新時(shí)間：2021年06月15日 08:45:04 作者：島上碼農(nóng)

我們可以使用ListView將幾個(gè)GridView組合在一起實(shí)現(xiàn)了不同可滑動(dòng)組件的粘合，但是這里必須要設(shè)置禁止 GridView 的滑動(dòng)，防止多個(gè)滑動(dòng)組件的沖突。這種方式寫(xiě)起來(lái)不太方便，事實(shí)上 Flutter 提供了 CustomScrollView 來(lái)粘合多個(gè)滑動(dòng)組件，并且可以實(shí)現(xiàn)更有趣的滑動(dòng)效果。

CustomScrollView 簡(jiǎn)介

CustomScrollView的常用屬性如下：

slivers：最重要的屬性，由多個(gè)SliverXX組件組成的數(shù)組，包括如 SliverList（對(duì)應(yīng) ListView），SliverGrid（對(duì)應(yīng) GridView）等，如果普通組件無(wú)法直接使用，而需要使用SliverToBoxAdapter包裹。
reverse：是否反向滾動(dòng)，如果為 true，則反方向滾動(dòng)。
scrollDirection：滾動(dòng)方向，可以是橫向或縱向。

改造原代碼

頁(yè)面結(jié)構(gòu)需要重新調(diào)整，將原先的 GridView 改成 SliverGrid，然后頂部區(qū)域需要使用 SliverToBoxAdapter進(jìn)行包裹。每個(gè)區(qū)域的標(biāo)題欄也需要單獨(dú)使用SliverToBoxAdapter 包裹起來(lái)。SliverToBoxAdapter使用很簡(jiǎn)單，只需要將原有的組件設(shè)置為其 child 屬性即可。

Widget _headerGridButtons() {
  double height = 144;
  List<Map<String, String>> buttons = GridMockData.headerGrids();
  return SliverToBoxAdapter(
    child: Container(
      height: height,
      margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.0),
        gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF56AF6D),
              Color(0xFF56AA6D),
            ]),
      ),
      child: Center(
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: buttons
                .map((item) => _getMenus(item['icon'], item['name'],
                    color: Colors.white))
                .toList()),
      ),
    ),
  );
}

Widget _getMenuTitle(String title) {
  return SliverToBoxAdapter(
    child: Container(
      margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
      padding: EdgeInsets.all(MARGIN),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.0),
        color: Colors.white,
      ),
      child: Text(
        title,
        style: TextStyle(color: Colors.grey[700]),
      ),
    ),
  );
}

GridView 我們之前使用的是 Grid.count() 方法，這里只需要更換為 SliverGrid.count()即可，參數(shù)基本相同，只是我們可以將之前禁止滑動(dòng)的代碼刪除了。

//在 SliverGrid 中無(wú)需下面兩行代碼禁止滑動(dòng)
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

讓導(dǎo)航欄更有趣

在 Flutter 中提供了一個(gè) SliverAppBar專(zhuān)門(mén)用于 CustomScrollView，該導(dǎo)航欄基本屬性和 AppBar 類(lèi)似，但有些其他的屬性：

floating：浮動(dòng)，即便是滾動(dòng)視圖不在頂部，SliverAppBar也會(huì)跟隨滾動(dòng)出現(xiàn)。
snap：手指放開(kāi)時(shí)會(huì)根據(jù)當(dāng)前狀態(tài)決定是否展開(kāi)或收起。如果為 false，則導(dǎo)航欄會(huì)停留在上次滑動(dòng)位置。
pinned：滾動(dòng)到頂部后，導(dǎo)航欄是否可見(jiàn)，默認(rèn)是 false。若為 false，則滾動(dòng)出頂部后導(dǎo)航欄將消失。
expandedHeight：導(dǎo)航欄展開(kāi)后的高度。
flexibleSpace：擴(kuò)展彈性空間，即導(dǎo)航欄滑動(dòng)時(shí)的收起或展開(kāi)組件，可以有背景圖片和導(dǎo)航欄文字，當(dāng)滑動(dòng)到頂部后只顯示文字導(dǎo)航欄，當(dāng)下滑后，會(huì)逐步顯示背景內(nèi)容，從而實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄的效果。

SliverAppBar _getAppBar(String title) {
  return SliverAppBar(
    pinned: true,
    expandedHeight: 200,
    brightness: Brightness.dark,
    flexibleSpace: FlexibleSpaceBar(
      title: Text(title),
      background: Image.network(
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718,308119011&fm=26&gp=0.jpg',
        fit: BoxFit.cover,
      ),
    ),
  );
}

改造后的代碼

改造后需要使用 Container 包裹，以設(shè)置背景顏色，多個(gè) SliverXX 組件依次排列就可以完成拼接后一起滾動(dòng)，相比使用 ListView 來(lái)說(shuō)會(huì)更簡(jiǎn)便，且效果更好。

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomScrollView(
        slivers: [
          _getAppBar('個(gè)人中心'),
          _headerGridButtons(),
          _getMenuTitle('金融理財(cái)'),
          _gridButtons(GridMockData.financeGrids()),
          _getMenuTitle('生活服務(wù)'),
          _gridButtons(GridMockData.serviceGrids()),
          _getMenuTitle('購(gòu)物消費(fèi)'),
          _gridButtons(GridMockData.thirdpartyGrids()),
        ],
      ),
    );
  }

其他效果

除了上述的效果外，F(xiàn)lutter 還提供了SliverPersistentHeader懸停頭部組件用于顯示懸停的表頭。具體可以參考對(duì)應(yīng)文檔，這在需要展示頂部的功能切換欄或者表格表頭的時(shí)候很有用。

總結(jié)

本篇介紹了 CustomScrollView 的基本用法以及 SliverAppBar 的使用，通過(guò) SliverAppBar 可以讓導(dǎo)航欄的滑動(dòng)更有趣。在實(shí)際開(kāi)發(fā)過(guò)程中，推薦在有多個(gè)滑動(dòng)組件組合的時(shí)候優(yōu)先使用 CustomScrollView。

以上就是Flutter 利用CustomScrollView實(shí)現(xiàn)滑動(dòng)效果的詳細(xì)內(nèi)容，更多關(guān)于Flutter 用CustomScrollView實(shí)現(xiàn)滑動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: