Flutter 滑动列表隐藏头部 ListView+TabBar悬浮的实现

最新推荐文章于 2025-04-12 19:49:26 发布

原创

最新推荐文章于 2025-04-12 19:49:26 发布 · 置顶 · 7.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #TabBar #悬浮 #滑动隐藏 #listview

本文介绍如何在Flutter中通过NestedScrollView、SliverAppBar和SliverPersistentHeader实现列表滑动时TabBar悬浮及顶部隐藏的效果。详细探讨了SliverAppBar和SliverPersistentHeader的使用，并提供了相关代码示例，帮助开发者解决此类布局问题。

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

先来张效果图

在这里插入图片描述

我的需求是,列表滚动到顶部,Tabbar停留,置顶.

实际写起来,绕了不少弯路.

最开始我使用的:

CustomScrollView

代码如下:

import 'package:flutter/material.dart';


const url =
    'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg';

class TestPage2 extends StatefulWidget {
   
   
  @override
  _TestPage2State createState() => _TestPage2State();
}

class _TestPage2State extends State<TestPage2> {
   
   
  var tabTitle = [
    '页面1',
    '页面2',
    '页面3',
  ];

  @override
  Widget build(BuildContext context) {
   
   
    return new DefaultTabController(
        length: tabTitle.length,
        child: Scaffold(
          body: new CustomScrollView(
            slivers: <Widget>[
              new SliverAppBar(
                expandedHeight: 200.0,
                floating: true,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      "我是可以跟着滑动的title",
                    ),
                    background: Image.network(
                      url,
                      fit: BoxFit.cover,
                    )),
              ),
              new SliverToBoxAdapter(
                child: new TabBar