flutter如何实现sticky效果

在Flutter中如何实现类似网页中的sticky效果？比如滚动时让某个组件固定在屏幕顶部或底部？我尝试过使用SliverAppBar，但不太确定具体该如何配置才能达到理想效果。还有没有其他更简单的方法可以实现这个功能？求大神指点！

2 回复

Flutter中实现sticky效果可使用CustomScrollView配合SliverPersistentHeader。将需要固定的部分作为SliverPersistentHeader的子组件，设置pinned: true即可实现吸顶效果。

更多关于flutter如何实现sticky效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下几种方式实现Sticky效果：

1. SliverAppBar（推荐）

CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,        // 固定在顶部
      floating: true,      // 快速显示
      snap: true,          // 快速吸附
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Sticky Header'),
        background: Image.network('url', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 50,
      ),
    ),
  ],
)

2. StickyHeader包

首先添加依赖：sticky_headers: ^2.0.0

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return StickyHeader(
      header: Container(
        height: 50,
        color: Colors.blue,
        child: Text('Header $index'),
      ),
      content: ListTile(
        title: Text('Content $index'),
      ),
    );
  },
)

3. 自定义实现

class StickyHeaderWidget extends StatefulWidget {
  @override
  _StickyHeaderWidgetState createState() => _StickyHeaderWidgetState();
}

class _StickyHeaderWidgetState extends State<StickyHeaderWidget> {
  final ScrollController _controller = ScrollController();
  bool _isSticky = false;

  @override
  void initState() {
    super.initState();
    _controller.addListener(_scrollListener);
  }

  void _scrollListener() {
    setState(() {
      _isSticky = _controller.offset > 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
          controller: _controller,
          itemCount: 50,
          itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
        ),
        AnimatedContainer(
          duration: Duration(milliseconds: 200),
          height: 50,
          color: _isSticky ? Colors.blue : Colors.transparent,
          child: _isSticky ? Center(child: Text('Sticky Header')) : null,
        ),
      ],
    );
  }
}

推荐使用SliverAppBar，它是Flutter官方提供的方案，性能最优且实现简单。

回到顶部