flutter,SliverPersistentHeader实现Tab顶部吸附固定效果

最新推荐文章于 2025-06-07 09:01:41 发布

转载

最新推荐文章于 2025-06-07 09:01:41 发布 · 6.1k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiufang/p/11314473.html

文章标签：

#移动开发

本文展示了如何使用 Flutter 的 SliverPersistentHeader 实现Tab组件顶部吸附固定的效果。随着滚动，Tab会自动吸附在顶部，再次上滑时，顶部内容会逐渐显示。详细实现可参考 SegmentFault 和 Cnblogs 上的相关博客文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码啦

import 'package:flutter/material.dart';

class StickyDemo extends StatefulWidget {
 
  @override
  _StickyDemoState createState() => _StickyDemoState();
}

class _StickyDemoState extends State<StickyDemo>
    with SingleTickerProviderStateMixin {
  TabController tabController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            elevation: 0,
            expandedHeight: 250,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver-sticky效果'),
              background: Image.network(
                'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg