Flutter 固定头部

允许您将标题放在可滚动内容上,当内容滚动时,标题将固定在容器顶部。

用法

您可以将 StickyHeaderStickyHeaderBuilder
放置在任何可滚动内容中,例如:ListViewGridViewCustomScrollView
SingleChildScrollView 或类似的组件。

依赖它

dependencies:
  sticky_headers: "^0.1.7"

导入它

import 'package:sticky_headers/sticky_headers.dart';

使用它

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ListView.builder(itemBuilder: (context, index) {
      return new StickyHeader(
        header: new Container(
          height: 50.0,
          color: Colors.blueGrey[700],
          padding: new EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: new Text('Header #$index',
            style: const TextStyle(color: Colors.white),
          ),
        ),
        content: new Container(
          child: new Image.network(imageForIndex(index), fit: BoxFit.cover,
            width: double.infinity, height: 200.0),
        ),
      );
    });
  }
}

示例

示例1 - 头部和内容

demo1

示例2 - 带内容的动画头部

demo2

示例3 - 头部覆盖内容

demo3

Bug/请求

如果您遇到任何问题,请随时打开一个 issue。如果您觉得该库
缺少某个功能,请在Github上提交一个工单,我会去处理。
Pull request 也欢迎。

GitHub

https://github.com/fluttercommunity/flutter_sticky_headers