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

小編給大家分享一下Flutter如何利用CustomScrollView實(shí)現(xiàn)滑動(dòng)效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

今天利用CustomScrollView實(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專門用于 CustomScrollView，該導(dǎo)航欄基本屬性和 AppBar 類似，但有些其他的屬性：

• floating：浮動(dòng)，即便是滾動(dòng)視圖不在頂部，SliverAppBar也會(huì)跟隨滾動(dòng)出現(xiàn)。

• snap：手指放開時(shí)會(huì)根據(jù)當(dāng)前狀態(tài)決定是否展開或收起。如果為 false，則導(dǎo)航欄會(huì)停留在上次滑動(dòng)位置。

• pinned：滾動(dòng)到頂部后，導(dǎo)航欄是否可見，默認(rèn)是 false。若為 false，則滾動(dòng)出頂部后導(dǎo)航欄將消失。

• expandedHeight：導(dǎo)航欄展開后的高度。

• flexibleSpace：擴(kuò)展彈性空間，即導(dǎo)航欄滑動(dòng)時(shí)的收起或展開組件，可以有背景圖片和導(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í)候很有用。

以上是“Flutter如何利用CustomScrollView實(shí)現(xiàn)滑動(dòng)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！