快捷導(dǎo)航

Fultter NestedScrollView實(shí)現(xiàn)吸頂效果以及遇到問題解析

更新時(shí)間：2023年09月07日 10:47:17 作者：光法V3

這篇文章主要為大家介紹了Fultter NestedScrollView實(shí)現(xiàn)吸頂效果以及遇到問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

1、如何利用NestedScrollView 進(jìn)行吸頂效果？

在Flutter中，你可以使用NestedScrollView和SliverAppBar來實(shí)現(xiàn)吸頂效果。以下是我們常常在搜索里面搜索到的類型模版,來使用NestedScrollView以到達(dá)實(shí)現(xiàn)吸頂效果的步驟：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      // 配置可折疊的頭布局
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        // 在這里創(chuàng)建你的SliverAppBar
        return [
          SliverAppBar(
            // 設(shè)置吸頂效果的屬性
            // 設(shè)置為true以啟用吸頂效果
            pinned: true,
            // 其他屬性設(shè)置
          ),
        ];
      },
      //頁面的主體內(nèi)容
      body: SingleChildScrollView(
        ...
      ),
    ),
  );
}

2、我們采用這樣的方式去寫的時(shí)候會發(fā)生什么問題？

以及如何一步步去解決問題

在我們使用會出現(xiàn)body被header遮擋的問題。導(dǎo)致滑動到頂部我們的body 在有一部分展示不全。如下圖：

發(fā)生以上的原因是因?yàn)镹estedScrollView滑動的時(shí)候他無法預(yù)支header的高度問題，所以我們使用“SliverOverlapAbsorber+ SliverOverlapInjector”來解決問題，這兩個(gè)小部件是在處理header和body之間的重疊問題時(shí)被使用到。

Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar(
              pinned: true,
              // 其他屬性設(shè)置
            ),
          ),
        ];
      },
      body: Builder(
        builder: (BuildContext context) {
          return CustomScrollView(
            slivers: [
              SliverOverlapInjector(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              ),
              ...
            ],
          );
        },
      ),
    ),
  );
}

3、注意事項(xiàng)

使用這個(gè)我們會發(fā)現(xiàn)如何只有一個(gè)header的時(shí)候，一般問題就會被解決。但是我們有多個(gè)header怎么辦呢？在測試的過程中發(fā)現(xiàn)雖然返回的是一個(gè)數(shù)組，但是數(shù)組里面我們只能使用一個(gè) ”SliverOverlapAbsorber“ 去監(jiān)聽，如果寫入多個(gè)SliverOverlapAbsorber會造成嚴(yán)重的卡頓，最終大概率會發(fā)生死機(jī)的情況，如何去解決這個(gè)問題，我們可以使用一下倆種方式：

3.1 使用 sliver_tools

sliver_tools

這個(gè)插件，允許將多個(gè)sliver分組在一起以便它們可以作為單個(gè)小部件返回。

@override
  Widget build(BuildContext context) {
    return MultiSliver(
      pushPinnedChildren: false, // defaults to false
      children: <Widget>[
        SliverPersistentHeader(...),
        SliverList(...),
      ],
    );
  }