flutter_sticky_header

Flutter 中的粘性头部实现，以 sliver 作为子项。

sticky_header_all

特点

  • 接受一个 Sliver 作为内容。
  • Header 可以与其 sliver 重叠（例如，用于粘性侧边栏）。
  • 当 Header 滚动到视口外时进行通知。
  • 可以向任何方向滚动。
  • 支持重叠（例如，AppBars）。
  • 支持非粘性 Header（使用 sticky: false 参数）。
  • 支持一个控制器，该控制器通知当前粘性 Header 的滚动偏移量。

入门

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  ...
  flutter_sticky_header:

在您的库中添加以下导入

import 'package:flutter_sticky_header/flutter_sticky_header.dart';

要开始使用 Flutter，请查看在线 文档。

SliverStickyHeader

您可以在 CustomScrollView 中放置一个或多个 SliverStickyHeader。

SliverStickyHeader(
  header: Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: Text(
      'Header #0',
      style: const TextStyle(color: Colors.white),
    ),
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

SliverStickyHeader.builder

如果您想在滚动时更改 Header 的布局，可以使用 SliverStickyHeader.builder 构造函数。

下面的示例显示了当 Header 滚动离开视口时其透明度的变化。

SliverStickyHeader.builder(
  builder: (context, state) => Container(
        height: 60.0,
        color: (state.isPinned ? Colors.pink : Colors.lightBlue)
            .withOpacity(1.0 - state.scrollPercentage),
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          'Header #1',
          style: const TextStyle(color: Colors.white),
        ),
      ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

您可以在 示例 项目中找到更多示例。

GitHub

https://github.com/letsar/flutter_sticky_header