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

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

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

CustomScrollView 簡介

CustomScrollView的常用屬性如下：

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

改造原代碼

頁面結(jié)構(gòu)需要重新調(diào)整，將原先的 GridView 改成 SliverGrid，然后頂部區(qū)域需要使用 SliverToBoxAdapter進(jìn)行包裹。每個區(qū)域的標(biāo)題欄也需要單獨(dú)使用SliverToBoxAdapter 包裹起來。SliverToBoxAdapter使用很簡單，只需要將原有的組件設(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ù)基本相同，只是我們可以將之前禁止滑動的代碼刪除了。

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

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

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

floating：浮動，即便是滾動視圖不在頂部，SliverAppBar也會跟隨滾動出現(xiàn)。
snap：手指放開時會根據(jù)當(dāng)前狀態(tài)決定是否展開或收起。如果為 false，則導(dǎo)航欄會停留在上次滑動位置。
pinned：滾動到頂部后，導(dǎo)航欄是否可見，默認(rèn)是 false。若為 false，則滾動出頂部后導(dǎo)航欄將消失。
expandedHeight：導(dǎo)航欄展開后的高度。
flexibleSpace：擴(kuò)展彈性空間，即導(dǎo)航欄滑動時的收起或展開組件，可以有背景圖片和導(dǎo)航欄文字，當(dāng)滑動到頂部后只顯示文字導(dǎo)航欄，當(dāng)下滑后，會逐步顯示背景內(nèi)容，從而實(shí)現(xiàn)動態(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è)置背景顏色，多個 SliverXX 組件依次排列就可以完成拼接后一起滾動，相比使用 ListView 來說會更簡便，且效果更好。

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