Flutter實(shí)現(xiàn)固定header底部滑動(dòng)頁效果示例

更新時(shí)間：2022年12月29日 10:47:00 作者：Zuo

這篇文章主要為大家介紹了Flutter實(shí)現(xiàn)固定header底部滑動(dòng)頁效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

實(shí)現(xiàn)的效果是這樣的：

剛開始的時(shí)候，是在dev上找了兩個(gè)輪子，簡(jiǎn)單測(cè)了下，都不太滿意，滑動(dòng)事件處理的比較粗糙，總有bug。就在想著，要不要拿源碼改一版的時(shí)候，讓我無意間看到了這個(gè)帖子

里面的想法，大開眼界，是通過 DraggableScrollableSheet 和 IgnorePointer 來完美實(shí)現(xiàn)上面的效果。

實(shí)現(xiàn)

這是 DraggableScrollableSheet 的代碼，

DraggableScrollableSheet(
  maxChildSize: 0.8,
  minChildSize: 0.25, // 注意都是占父組件的比例
  initialChildSize: 0.25,
  expand: true,
  builder: (BuildContext context, ScrollController controller) {
    return Stack(); // body列表和header欄都在stack內(nèi)
  },
)

這是 body 列表和 header，這里的 body 是個(gè) list，

Stack(
  children: [
    Container(
      color: Colors.blue,
      child: Body( // ListView.separated
        controller: controller,
        paddingTop: headerHeight, // 防止壓蓋
      ),
    ),
    const IgnorePointer( // 這里不接收事件，所以拖動(dòng) header 也能夠滑動(dòng)頁面
      child: Header( // Container[Center[Text]]
        height: headerHeight,
      ),
    ),
  ],
)

但如果我們想在 header 內(nèi)加點(diǎn)擊事件呢？那在 Stack header 上層再加 widget 就好了。

代碼就這點(diǎn)，我放在了 gitHub 上，感興趣的可以看下。

2022.8.23 補(bǔ)充：

這是在上面功能基礎(chǔ)上的一個(gè)小擴(kuò)展，即當(dāng)滑動(dòng)距離超過一半則自動(dòng)滾至頂部，反之回到底部，來看下效果：

思路也很簡(jiǎn)單，首先我要知道當(dāng)前滾動(dòng)的距離或其占比，DraggableScrollableController 提供了這個(gè)能力：

void _draggableScrollListener() {
  // [_currStale] 記錄下當(dāng)前的占比
  // [_controller.size] 即占比, 范圍[minChildSize,maxChildSize]
  // [_controller.pixels] 即距離
  if (_currStale != _controller.size) {
    _currStale = _controller.size;
  }
  debugPrint('[listener] size: ${_controller.size}'
      ', pixels : ${_controller.pixels}');
}

其次要知道用戶何時(shí)停止了滾動(dòng)，我們可以使用 NotificationListener 來監(jiān)聽 DraggableScrollableSheet 的滾動(dòng)狀態(tài)：

NotificationListener<ScrollNotification>(
  onNotification: (ScrollNotification notification) {
    ...
    return false;
  },
child: DraggableScrollableSheet(...),

之后在用戶停止?jié)L動(dòng)的時(shí)候，我們判斷當(dāng)前距離，并根據(jù)結(jié)果讓 DraggableScrollableSheet 自動(dòng)滾動(dòng)到頂部或底部。

onNotification: (ScrollNotification notification) {
  if (_animation) { // 動(dòng)畫中，不處理狀態(tài)
    return false;
  }
  if (notification is ScrollStartNotification) {
    debugPrint('start scroll');
  } else if (notification is ScrollEndNotification) {
    debugPrint('stop scroll');
    // 通過 [_controller.animateTo] 方法滾動(dòng)
    _scrollAnimation();
  }
  return false;

在 _scrollAnimation 內(nèi)就是滾動(dòng)的方法了，這里要注意的是，不能直接使用 await Feature，我測(cè)試在頻繁不同方向滑動(dòng)時(shí)，可能會(huì)導(dǎo)致方法被掛起。在這直接 dedelayed(duration: xx) 即可：

Future<void> _scrollAnimation() async {
  if (_animation) {
    return;
  }
  _animation = true;
  //debugPrint('async start');
  final int duration;
  // `await`ing the returned Feature(of [animateTo]) may cause the method to hang
  // So, Start a timer to set [_animation].
  if (_currStale >= (_maxScale + _minScale) * 0.5) {
    duration =
        (_duration * ((_maxScale - _currStale) / (_maxScale - _minScale)))
            .toInt();
    if (duration == 0) {
      _animation = false;
      return;
    } else {
      // [duration] control speed, Avoid situations where it's equal to 0
      _animationTo(_maxScale, duration);
    }
  } else {
    duration =
        (_duration * ((_currStale - _minScale) / (_maxScale - _minScale)))
            .toInt();
    if (duration == 0) {
      _animation = false;
      return;
    } else {
      _animationTo(_minScale, duration);
    }
  }
  Future.delayed(
    Duration(milliseconds: duration),
  ).then((value) => {
        //debugPrint('async stop'),
        _animation = false,
      });
}

其中 _animationTo 是實(shí)際控制控件滾動(dòng)的方法：

void _animationTo(double scale, int duration) {
  _controller.animateTo(
    scale,
    duration: Duration(milliseconds: duration),
    curve: Curves.ease,
  );
}

2022.9.24 補(bǔ)充：

那如果再提供一種通過點(diǎn)擊按鈕來控制 DraggableScrollableSheet 收起和彈出的方法呢？

我們可以直接這樣，是不是很簡(jiǎn)單：

Future<void> _scrollAnimation2() async {
  if (_animation) {
    return;
  }
  if (_currStale > (_maxScale + _minScale) * 0.5) {
    _animationTo(_minScale, _duration);
  } else {
    _animationTo(_maxScale, _duration);
  }
}

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

您可能感興趣的文章: