Flutter 實現相似美團外賣店鋪頁面滑動效果

時間 2020-02-11

標籤 flutter 實現相似外賣店鋪頁面滑動效果简体版

原文原文鏈接

首先，咱們看看目標和實現效果

我這邊是把放活動的地方放在了TabBar上方。至於爲何，哈哈，我怕麻煩，由於美團外賣的放活動的組件和下方商品的組件一併點菜、評價、商家頁面的切換而消失，可是這玩意兒又隨商品頁面的上滑而消失，算上主滑動組件，咱們得作讓從商品列表組件上的滑動穿透兩級，實在是麻煩。因此我便把活動的組件放在了TabBar上方。git

而後咱們來分析一下頁面結構

看了前面的動態圖片，咱們知道， TabBar下方的內容(即結構圖中的 Body部分)隨頁面上滑而延伸，內部也包括了滑動組件。看到這種結構，咱們天然很容易想到 NestedScrollView這個組件。可是直接使用 NestedScrollView有一些問題。舉個例子，先看例子代碼：

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              pinned: true,
              title: Text("首頁",style: TextStyle(color: Colors.black)),
              backgroundColor: Colors.transparent,
              bottom: TabBar(
                controller: _tabController,
                labelColor: Colors.black,
                tabs: <Widget>[
                  Tab(text: "商品"),
                  Tab(text: "評價"),
                  Tab(text: "商家"),
                ],
              ),
            )
          ];
        },
        body: Container(
          color: Colors.blue,
          child: Center(
            child: Text("Body部分"),
          ),
        ),
      ),
    );
  }
複製代碼

看代碼，我將 SliverAppBar的背景設置爲透明。當頁面上滑的時候，問題出現了，Body部分穿過了 SliverAppBar和 狀態欄下方，到達了屏幕頂部。這樣的話，作出來的效果確定不是咱們想要的。另外，因爲 NestedScrollView內部裏面只有一個 ScrollController(下方代碼中的 innerController)， Body裏面的全部列表的 ScrollPosition都將會 attach到這個 ScrollController上，那麼就又有問題了，咱們的 商品頁面裏面有兩個列表，若是共用一個控制器，那麼 ScrollPosition也使用的同一個，這可不行啊，畢竟列表都不同，因此由於 NestedScrollView內部裏面只有一個 ScrollController這一點，就決定了咱們不能憑藉 NestedScrollView來實現這個效果。可是， NestedScrollView對咱們也不是沒有用，它但是爲咱們提供了關鍵思路。爲何說 NestedScrollView依然對咱們有用呢？由於它的特性呀， Body部分會隨頁面上滑而延伸， Body部分的底部始終在屏幕的底部。那麼這個 Body部分的高度是怎麼來的？咱們去看看 NestedScrollView的代碼:

List<Widget> _buildSlivers(BuildContext context,
      ScrollController innerController, bool bodyIsScrolled) {
    return <Widget>[
      ...headerSliverBuilder(context, bodyIsScrolled),
      SliverFillRemaining(
        child: PrimaryScrollController(
          controller: innerController,
          child: body,
        ),
      ),
    ];
  }
複製代碼

NestedScrollView的body放到了SliverFillRemaining中，而這SliverFillRemaining的的確確是NestedScrollView的body可以填滿在前方組件於NestedScrollView底部之間的關鍵。好的，知道了這傢伙的存在，咱們能夠試試本身來作一個跟NestedScrollView有些相似的效果了。我選擇了最外層滑動組件CustomScrollView，嘿嘿，NestedScrollView也是繼承至CustomScrollView來實現的。github

實現一個 NestedScrollView 相似的效果

首先咱們寫一個跟NestedScrollView結構相似的界面ShopPage出來，關鍵代碼以下：app

class _ShopPageState extends State<ShopPage>{
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
          body: CustomScrollView(
            controller: _pageScrollController,
            physics: ClampingScrollPhysics(),
            slivers: <Widget>[
              SliverAppBar(
                  pinned: true,
                  title: Text("店鋪首頁", style: TextStyle(color: Colors.white)),
                  backgroundColor: Colors.blue,
                  expandedHeight: 300),
              SliverFillRemaining(
                  child: ListView.builder(
                      controller: _childScrollController,
                      padding: EdgeInsets.all(0),
                      physics: ClampingScrollPhysics(),
                      shrinkWrap: true,
                      itemExtent: 100.0,
                      itemCount: 30,
                      itemBuilder: (context, index) => Container(
                          padding: EdgeInsets.symmetric(horizontal: 1),
                          child: Material(
                            elevation: 4.0,
                            borderRadius: BorderRadius.circular(5.0),
                            color:
                            index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
                            child: Center(child: Text(index.toString())),
                          ))))
            ],
          ),
        );
    }
}


               頁面結構                           滑動效果
複製代碼

由動圖能夠看到，滑動下面的 ListView不能帶動 CustomScrollView中的 SliverAppBar伸縮。咱們應該怎麼實現呢？首先想一想咱們要的效果:

向上滑動ListView時，若是SliverAppBar是展開狀態，應該先讓SliverAppBar收縮，當SliverAppBar不能收縮時，ListView纔會滾動。
向下滑動ListView時，當ListView已經滑動到第一個不能再滑動時，SliverAppBar應該展開，直到SliverAppBar徹底展開。

SliverAppBar應不該該響應，響應的話是展開仍是收縮。咱們確定須要根據滑動方向和CustomScrollView與ListView已滑動距離來判斷。因此咱們須要一個工具來根據滑動事件是誰發起的、CustomScrollView與ListView的狀態、滑動的方向、滑動的距離、滑動的速度等進行協調它們怎麼響應。ide

至於這個協調器怎麼寫，咱們先不着急。咱們應該搞清楚滑動組件原理，推薦文章：函數

從零開始實現一個嵌套滑動的PageView(一)工具

從零開始實現一個嵌套滑動的PageView(二)post

Flutter的滾動以及sliver約束測試

看了這幾個文章，結合咱們的使用場景，咱們須要明白：flex

當手指在屏幕上滑動時，ScrollerPosition中的applyUserOffset方法會獲得滑動矢量；
當手指離開屏幕時， ScrollerPosition中的goBallistic方法會獲得手指離開屏幕前滑動速度；
至始自終，主滑動組件上發起的滑動事件，對子滑動部件無干擾，那麼咱們在協調時，只須要把子部件的事件傳給協調器分析、協調。

簡單來講，咱們須要修改 ScrollerPosition, ScrollerController。修改ScrollerPosition是爲了把手指滑動距離或手指離開屏幕前滑動速度傳遞給協調器協調處理。修改ScrollerController是爲了保證滑動控制器在建立ScrollerPosition建立的是咱們修改事後的ScrollerPosition。那麼，開始吧！ui

實現子部件上下滑動關聯主部件

首先，假設咱們的協調器類名爲ShopScrollCoordinator。

滑動控制器 ShopScrollerController

咱們去複製ScrollerController的源碼，而後爲了方便區分，咱們把類名改成ShopScrollController。控制器須要修改的部分以下：

class ShopScrollController extends ScrollController {
  final ShopScrollCoordinator coordinator;

  ShopScrollController(
    this.coordinator, {
    double initialScrollOffset = 0.0,
    this.keepScrollOffset = true,
    this.debugLabel,
  })  : assert(initialScrollOffset != null),
        assert(keepScrollOffset != null),
        _initialScrollOffset = initialScrollOffset;

  ScrollPosition createScrollPosition(ScrollPhysics physics,
      ScrollContext context, ScrollPosition oldPosition) {
    return ShopScrollPosition(
      coordinator: coordinator,
      physics: physics,
      context: context,
      initialPixels: initialScrollOffset,
      keepScrollOffset: keepScrollOffset,
      oldPosition: oldPosition,
      debugLabel: debugLabel,
    );
  }
  ///其餘的代碼不要動
}
複製代碼

滑動滾動位置 ShopScrollPosition

原版的ScrollerController建立的ScrollPosition 是 ScrollPositionWithSingleContext。咱們去複製ScrollPositionWithSingleContext的源碼，而後爲了方便區分，咱們把類名改成ShopScrollPosition。前面說了，咱們主要是須要修改applyUserOffset,goBallistic兩個方法。

class ShopScrollPosition extends ScrollPosition 
    implements ScrollActivityDelegate {
  final ShopScrollCoordinator coordinator; // 協調器

  ShopScrollPosition(
      {@required this.coordinator,
      @required ScrollPhysics physics,
      @required ScrollContext context,
      double initialPixels = 0.0,
      bool keepScrollOffset = true,
      ScrollPosition oldPosition,
      String debugLabel})
      : super(
          physics: physics,
          context: context,
          keepScrollOffset: keepScrollOffset,
          oldPosition: oldPosition,
          debugLabel: debugLabel,
       ) {
    if (pixels == null && initialPixels != null) correctPixels(initialPixels);
    if (activity == null) goIdle();
    assert(activity != null);
  }

  /// 當手指滑動時，該方法會獲取到滑動距離
  /// [delta]滑動距離，正增量表示下滑，負增量向上滑
  /// 咱們須要把子部件的 滑動數據 交給協調器處理，主部件無干擾
  @override
  void applyUserOffset(double delta) {
    ScrollDirection userScrollDirection =
        delta > 0.0 ? ScrollDirection.forward : ScrollDirection.reverse;
    if (debugLabel != coordinator.pageLabel)
      return coordinator.applyUserOffset(delta, userScrollDirection, this);
    updateUserScrollDirection(userScrollDirection);
    setPixels(pixels - physics.applyPhysicsToUserOffset(this, delta));
  }

  /// 以特定的速度開始一個物理驅動的模擬，該模擬肯定[pixels]位置。
  /// 此方法聽從[ScrollPhysics.createBallisticSimulation]，該方法一般在當前位置超出
  /// 範圍時提供滑動模擬，而在當前位置超出範圍但具備非零速度時提供摩擦模擬。
  /// 速度應以每秒邏輯像素爲單位。 
  /// [velocity]手指離開屏幕前滑動速度，正表示下滑，負向上滑
  @override
  void goBallistic(double velocity, [bool fromCoordinator = false]) {
    if (debugLabel != coordinator.pageLabel) {
      // 子部件滑動向上模擬滾動時纔會關聯主部件
      if (velocity > 0.0) coordinator.goBallistic(velocity);
    } else {
      if (fromCoordinator && velocity <= 0.0) return;
    }
    assert(pixels != null);
    final Simulation simulation =
        physics.createBallisticSimulation(this, velocity);
    if (simulation != null) {
      beginActivity(BallisticScrollActivity(this, simulation, context.vsync));
    } else {
      goIdle();
    }
  }

  /// 返回未使用的增量。 
  /// 從[NestedScrollView]的自定義[ScrollPosition][_NestedScrollPosition]拷貝
  double applyClampedDragUpdate(double delta) {
    assert(delta != 0.0);
    final double min =
        delta < 0.0 ? -double.infinity : math.min(minScrollExtent, pixels);
    final double max =
        delta > 0.0 ? double.infinity : math.max(maxScrollExtent, pixels);
    final double oldPixels = pixels;
    final double newPixels = (pixels - delta).clamp(min, max) as double;
    final double clampedDelta = newPixels - pixels;
    if (clampedDelta == 0.0) return delta;
    final double overScroll = physics.applyBoundaryConditions(this, newPixels);
    final double actualNewPixels = newPixels - overScroll;
    final double offset = actualNewPixels - oldPixels;
    if (offset != 0.0) {
      forcePixels(actualNewPixels);
      didUpdateScrollPositionBy(offset);
    }
    return delta + offset;
 }

 /// 返回過分滾動。
 /// 從[NestedScrollView]的自定義[ScrollPosition][_NestedScrollPosition]拷貝
 double applyFullDragUpdate(double delta) {
   assert(delta != 0.0);
   final double oldPixels = pixels;
   // Apply friction: 施加摩擦：
   final double newPixels =
       pixels - physics.applyPhysicsToUserOffset(this, delta);
   if (oldPixels == newPixels) return 0.0;
   // Check for overScroll: 檢查過分滾動：
   final double overScroll = physics.applyBoundaryConditions(this, newPixels);
   final double actualNewPixels = newPixels - overScroll;
   if (actualNewPixels != oldPixels) {
     forcePixels(actualNewPixels);
     didUpdateScrollPositionBy(actualNewPixels - oldPixels);
   }
   return overScroll;
 }
}
複製代碼

滑動協調器 ShopScrollCoordinator

class ShopScrollCoordinator {
  /// 頁面主滑動組件標識
  final String pageLabel = "page";
  
  /// 獲取主頁面滑動控制器
  ShopScrollController pageScrollController([double initialOffset = 0.0]) {
    assert(initialOffset != null, initialOffset >= 0.0);
    _pageInitialOffset = initialOffset;
    _pageScrollController = ShopScrollController(this,
        debugLabel: pageLabel, initialScrollOffset: initialOffset);
  return _pageScrollController;
  }
  /// 建立並獲取一個子滑動控制器
  ShopScrollController newChildScrollController([String debugLabel]) =>
      ShopScrollController(this, debugLabel: debugLabel);

  /// 子部件滑動數據協調
  /// [delta]滑動距離
  /// [userScrollDirection]用戶滑動方向
  /// [position]被滑動的子部件的位置信息
  void applyUserOffset(double delta,
      [ScrollDirection userScrollDirection, ShopScrollPosition position]) {
    if (userScrollDirection == ScrollDirection.reverse) {
      /// 當用戶滑動方向是向上滑動
      updateUserScrollDirection(_pageScrollPosition, userScrollDirection);
      final innerDelta = _pageScrollPosition.applyClampedDragUpdate(delta);
      if (innerDelta != 0.0) {
        updateUserScrollDirection(position, userScrollDirection);
        position.applyFullDragUpdate(innerDelta);
      }
    } else {
      /// 當用戶滑動方向是向下滑動
      updateUserScrollDirection(position, userScrollDirection);
      final outerDelta = position.applyClampedDragUpdate(delta);
      if (outerDelta != 0.0) {
        updateUserScrollDirection(_pageScrollPosition, userScrollDirection);
        _pageScrollPosition.applyFullDragUpdate(outerDelta);
      }
    }
  }
}
複製代碼

如今，咱們在_ShopPageState裏添加代碼:

class _ShopPageState extends State<ShopPage>{
  // 頁面滑動協調器
  ShopScrollCoordinator _shopCoordinator;
  // 頁面主滑動部件控制器
  ShopScrollController _pageScrollController;
  // 頁面子滑動部件控制器
  ShopScrollController _childScrollController;
    
  /// build 方法中的CustomScrollView和ListView 記得加上控制器！！！！

  @override
  void initState() {
    super.initState();
    _shopCoordinator = ShopScrollCoordinator();
    _pageScrollController = _shopCoordinator.pageScrollController();
    _childScrollController = _shopCoordinator.newChildScrollController();
  }

  @override
  void dispose() {
    _pageScrollController?.dispose();
    _childScrollController?.dispose();
    super.dispose();
  }
}
複製代碼

這個時候，基本實現了實現子部件上下滑動關聯主部件。效果如圖:

實現美團外賣點菜頁面的Body結構

修改_ShopPageState中SliverFillRemaining中內容:

/// 注意添加一個新的控制器！！

SliverFillRemaining(
              child: Row(
            children: <Widget>[
              Expanded(
                  child: ListView.builder(
                      controller: _childScrollController,
                      padding: EdgeInsets.all(0),
                      physics: ClampingScrollPhysics(),
                      shrinkWrap: true,
                      itemExtent: 50,
                      itemCount: 30,
                      itemBuilder: (context, index) => Container(
                          padding: EdgeInsets.symmetric(horizontal: 1),
                          child: Material(
                            elevation: 4.0,
                            borderRadius: BorderRadius.circular(5.0),
                            color: index % 2 == 0
                                ? Colors.cyan
                                : Colors.deepOrange,
                            child: Center(child: Text(index.toString())),
                          )))),
              Expanded(
                  flex: 4,
                  child: ListView.builder(
                      controller: _childScrollController1,
                      padding: EdgeInsets.all(0),
                      physics: ClampingScrollPhysics(),
                      shrinkWrap: true,
                      itemExtent: 150,
                      itemCount: 30,
                      itemBuilder: (context, index) => Container(
                          padding: EdgeInsets.symmetric(horizontal: 1),
                          child: Material(
                            elevation: 4.0,
                            borderRadius: BorderRadius.circular(5.0),
                            color: index % 2 == 0
                                ? Colors.cyan
                                : Colors.deepOrange,
                            child: Center(child: Text(index.toString())),
                          ))))
            ],
          ))
複製代碼

看效果

看來還有些問題，什麼問題呢？當我只上滑右邊的子部件，當 SliverAppBar的最小化時，咱們能夠看到左邊的子部件的第一個竟然不是0。如圖:

跟前面的 NestedScrollView中的問題同樣。那咱們怎麼解決呢？改唄！靈感來自於，Flutter Candies 一桶天下協調器添加方法:

/// 獲取body前吸頂組件高度
double Function() pinnedHeaderSliverHeightBuilder;

bool applyContentDimensions(double minScrollExtent, double maxScrollExtent,
    ShopScrollPosition position) {
  if (pinnedHeaderSliverHeightBuilder != null) {
    maxScrollExtent = maxScrollExtent - pinnedHeaderSliverHeightBuilder();
    maxScrollExtent = math.max(0.0, maxScrollExtent);
  }
  return position.applyContentDimensions(
      minScrollExtent, maxScrollExtent, true);
}
複製代碼

修改ShopScrollPosition的applyContentDimensions方法：

@override
bool applyContentDimensions(double minScrollExtent, double maxScrollExtent,
    [bool fromCoordinator = false]) {
  if (debugLabel == coordinator.pageLabel && !fromCoordinator)
    return coordinator.applyContentDimensions(
        minScrollExtent, maxScrollExtent, this);
  return super.applyContentDimensions(minScrollExtent, maxScrollExtent);
}
複製代碼

這個時候，咱們只須要在頁面的初始化協調器後，給協調器賦值一個返回body以前的全部鎖頂組件摺疊後的高度之和的函數就能夠了。

實現美團外賣店鋪頁面頭部全屏化展開顯示店鋪信息效果

目標如圖:

爲何說是全屏化，這個相信不須要我多講，展開的卡片周圍的灰色就是個 padding而已。用過 SliverAppBar的人基本上都能想到，將它的 expandedHeight設置成屏幕高度就能夠實現頭部在展開的時候填充滿整個屏幕。可是，頁面中 SliverAppBar默認並非徹底展開狀態，固然也不是徹底收縮狀態，徹底收縮狀態的話，這玩意兒就只剩個AppBar在頂部了。那麼咱們應該怎麼讓它默認顯示成相似美團那樣的呢？還記得咱們的 ScrollController的構造函數有個名稱爲 initialScrollOffset可傳參數吧，嘿嘿，只要咱們把頁面主滑動部件的控制器設置了 initialScrollOffset，頁面豈不是就會默認定在 initialScrollOffset對應的位置。好的，默認位置能夠了。但是，從動圖能夠看到，當咱們下拉部件，使 默認位置 < 主部件已下滑距離 < 最大展開高度並鬆開手指時， SliverAppBar會繼續展開至 最大展開高度。那麼咱們確定要捕捉手指離開屏幕事件。這個時候呢，咱們可使用 Listener組件包裹 CustomScrollView，而後在 Listener的 onPointerUp中獲取手指離開屏幕事件。好的，思路有了。咱們來看看怎麼實現吧：

協調器外部添加枚舉：

enum PageExpandState { NotExpand, Expanding, Expanded }
複製代碼

協調器添加代碼:

/// 主頁面滑動部件默認位置
double _pageInitialOffset;

/// 獲取主頁面滑動控制器
ShopScrollController pageScrollController([double initialOffset = 0.0]) {
    assert(initialOffset != null, initialOffset >= 0.0);
    _pageInitialOffset = initialOffset;
    _pageScrollController = ShopScrollController(this,
        debugLabel: pageLabel, initialScrollOffset: initialOffset);
  return _pageScrollController;
}

/// 當默認位置不爲0時，主部件已下拉距離超過默認位置，但超過的距離不大於該值時，
/// 若手指離開屏幕，主部件頭部會回彈至默認位置
double _scrollRedundancy = 80;

/// 當前頁面Header最大程度展開狀態
PageExpandState pageExpand = PageExpandState.NotExpand;    

/// 當手指離開屏幕
void onPointerUp(PointerUpEvent event) {
  final double _pagePixels = _pageScrollPosition.pixels;
  if (0.0 < _pagePixels && _pagePixels < _pageInitialOffset) {
    if (pageExpand == PageExpand.NotExpand &&
        _pageInitialOffset - _pagePixels > _scrollRedundancy) {
      _pageScrollPosition
          .animateTo(0.0,
              duration: const Duration(milliseconds: 400), curve: Curves.ease)
          .then((value) => pageExpand = PageExpand.Expanded);
    } else {
      pageExpand = PageExpand.Expanding;
      _pageScrollPosition
          .animateTo(_pageInitialOffset,
              duration: const Duration(milliseconds: 400), curve: Curves.ease)
          .then((value) => pageExpand = PageExpand.NotExpand);
    }
  }
}
複製代碼

這個時候，咱們把協調器的onPointerUp方法傳給Listener的onPointerUp，咱們基本實現了想要的效果。 But，通過測試，其實它還有個小問題，有時候手指鬆開它並不會按照咱們想象的那樣自動展開或者回到默認位置。問題是什麼呢？咱們知道，手指滑動列表而後離開屏幕時，ScrollPosition的goBallistic方法會被調用，因此onPointerUp剛被調用立馬goBallistic也被調用，當goBallistic傳入的速度絕對值很小的時候，那麼列表的模擬滑動距離就很小很小，甚至爲0.0。那麼結果是怎麼樣的，天然而然出如今腦殼中了吧。

咱們還須要繼續修改一下ShopScrollPosition的goBallistic方法：

@override
void goBallistic(double velocity, [bool fromCoordinator = false]) {
  if (debugLabel != coordinator.pageLabel) {
    if (velocity > 0.0) coordinator.goBallistic(velocity);
  } else {
    if (fromCoordinator && velocity <= 0.0) return;
    if (coordinator.pageExpand == PageExpandState.Expanding) return;
  }
  assert(pixels != null);
  final Simulation simulation =
      physics.createBallisticSimulation(this, velocity);
  if (simulation != null) {
    beginActivity(BallisticScrollActivity(this, simulation, context.vsync));
  } else {
    goIdle();
  }
}
複製代碼

記得頁面initState中，初始化_pageScrollController的時候，記得傳入默認位置的值。此時須要注意一下，默認位置的值並非頁面在默認狀態下SliverAppBar底部在距屏幕頂部的距離，而是屏幕高度減去其底部距屏幕頂部的距離，即initialOffset = screenHeight - x,而這個x咱們根據設計或者本身的感受來設置即是。這裏我取200。來來來，咱們看看效果怎麼樣！！