Flutter嵌套滚动视图插件extended_nested_scroll_view的使用

extended_nested_scroll_view

NestedScrollView 是Flutter中用于实现复杂滚动效果的重要组件。但是它存在一些问题，如固定标题栏的高度问题、TabView内部可滚动组件同步问题等。extended_nested_scroll_view 插件扩展了 NestedScrollView，解决了这些问题，并且提供了更多的功能。

主要解决的问题

1. pinned sliver header issue：修复了固定标题栏高度的问题。
2. inner scrollables in tabview sync issue：修复了TabView内部可滚动组件同步的问题。
3. do without ScrollController in NestedScrollView’s body：在 NestedScrollView 的主体部分不使用 ScrollController。

Web demo for ExtendedNestedScrollView

示例代码

Example for issue 1

给定固定标题栏的总高度，在 pinnedHeaderSliverHeightBuilder 回调中返回该高度。

var tabBarHeight = primaryTabBar.preferredSize.height;
var pinnedHeaderHeight =
    // 状态栏高度
    statusBarHeight +
        // 固定 SliverAppBar 高度
        kToolbarHeight;

ExtendedNestedScrollView(
  pinnedHeaderSliverHeightBuilder: () {
    return pinnedHeaderHeight;
  },
);

Example for issue 2

我们通常通过以下方式保持列表的滚动位置：

ExtendedNestedScrollView(
  onlyOneScrollInBody: true,
)

ExtendedVisibilityDetector

提供 ExtendedVisibilityDetector 来指出哪个列表是可见的。

ExtendedVisibilityDetector(
  uniqueKey: const Key('Tab1'),
  child: ListView(),
)

Do without ScrollController in NestedScrollView’s body

由于我们不能为 NestedScrollView 的主体部分设置 ScrollController（这会破坏 InnerScrollController 在 NestedScrollView 中的行为），因此提供了以下示例来展示如何在不使用 ScrollController 的情况下实现某些功能：

• pull to refresh
• load more
• scroll to top
• pinned header height

完整示例Demo

下面是一个完整的示例代码，展示了如何使用 extended_nested_scroll_view 插件：

import 'package:flutter/material.dart';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'extended_nested_scroll_view demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  final List<String> _tabs = ['Tab 1', 'Tab 2'];
  TabController? _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('extended_nested_scroll_view Demo'),
        bottom: TabBar(
          controller: _tabController,
          tabs: _tabs.map((String name) => Tab(text: name)).toList(),
        ),
      ),
      body: ExtendedNestedScrollView(
        pinnedHeaderSliverHeightBuilder: () {
          return kToolbarHeight + MediaQuery.of(context).padding.top;
        },
        onlyOneScrollInBody: true,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverOverlapAbsorber(
              handle: ExtendedNestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                title: Text('Pinned Header'),
                floating: false,
                pinned: true,
                expandedHeight: 200.0,
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.network(
                    'https://via.placeholder.com/350x150',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: _tabs.map((String name) {
            return Builder(
              builder: (BuildContext context) {
                return ExtendedVisibilityDetector(
                  uniqueKey: Key(name),
                  child: ListView.builder(
                    itemCount: 50,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(title: Text('$name Item $index'));
                    },
                  ),
                );
              },
            );
          }).toList(),
        ),
      ),
    );
  }
}

这个示例展示了如何使用 extended_nested_scroll_view 插件创建一个带有固定标题栏和多个标签页的嵌套滚动视图。每个标签页包含一个可滚动的列表，并且可以通过 ExtendedVisibilityDetector 来检测当前可见的列表。