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

最新推荐文章于 2024-04-09 16:45:28 发布

置顶

jlanglang

最新推荐文章于 2024-04-09 16:45:28 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： Flutter TabBar 悬浮滑动隐藏 listview

本文链接：https://blog.youkuaiyun.com/jlanglang/article/details/90029121

本文介绍如何在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