用Flutter构建京东首页吸顶Tab，轻而易举——NestedScrollView深入剖析

2023-09-14 01:46:36

京东首页的吸顶Tab效果是其流畅用户体验的标志性特征。作为Flutter开发人员，掌握如何在您的应用中重现这种效果至关重要。

本指南将引导您深入了解Flutter的NestedScrollView小部件，它正是京东首页吸顶Tab效果背后的关键。我们将探索NestedScrollView的工作原理，并逐步构建一个自定义的小部件，在您的Flutter应用中轻松实现类似的效果。

NestedScrollView简介

NestedScrollView是一个Flutter小部件，它允许您嵌套多个可滚动的子小部件，并协调它们的滚动行为。它在处理嵌套滚动场景时非常有用，例如当您有一个包含滚动列表的页面，并且该列表中包含其他可滚动的元素时。

京东首页的吸顶Tab效果正是利用了NestedScrollView的这种能力。通过将Tab小部件嵌套在可滚动的主体内容中，NestedScrollView确保Tab在用户向下滚动时保持固定在屏幕顶部。

构建自定义小部件

要构建一个类似于京东首页的自定义吸顶Tab小部件，我们将遵循以下步骤：

1. 创建一个滚动内容视图：

这是您将放置所有滚动内容的位置。在京东示例中，这是一个包含列表的ScrollView。

class MyContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, index) {
        return Text('Item $index');
      },
    );
  }
}

2. 创建Tab栏：

这是您将放置Tab的区域。它将是NestedScrollView的headerSliverBuilder。

class MyTabBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(
      pinned: true,
      delegate: MyTabBarDelegate(),
    );
  }
}

class MyTabBarDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: TabBar(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
    );
  }

  @override
  double get maxExtent => kToolbarHeight;

  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(covariant MyTabBarDelegate oldDelegate) => false;
}

3. 组合两个小部件：

现在，我们可以将内容视图和Tab栏组合到NestedScrollView中：

class MyCustomTabBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) => [
        MyTabBar(),
      ],
      body: MyContent(),
    );
  }
}

4. 使用自定义小部件：

现在您可以在您的Flutter应用中使用MyCustomTabBar小部件来实现吸顶Tab效果：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyCustomTabBar(),
      ),
    );
  }
}