首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

flutter - Listview如何能够像往常一样在tabBar之外滚动?

在Flutter中,ListView默认会占据整个可见区域并覆盖其他部件,因此在TabBar之外滚动是一种常见需求。为了实现这个效果,可以使用NestedScrollView和SliverAppBar来创建一个可滚动的ListView。

首先,需要在页面的顶部添加一个SliverAppBar,它可以包含一个TabBar和一个FlexibleSpaceBar,用于显示标题和背景图等内容。然后,在SliverAppBar下方添加一个NestedScrollView,其中包含一个SliverList,用于显示ListView的内容。

下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: Text('My App'),
                pinned: true,
                floating: true,
                bottom: TabBar(
                  tabs: <Widget>[
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: <Widget>[
              ListView.builder(
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
              ListView.builder(
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item ${index + 100}'),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个带有两个选项卡的页面。每个选项卡下面都有一个可滚动的ListView,它们可以独立地滚动而不会影响TabBar的位置。

这里使用了DefaultTabController、NestedScrollView、SliverAppBar和TabBar等组件来实现这个效果。你可以根据实际需求进行修改和扩展。

关于Flutter的ListView和相关组件的更多信息,你可以参考腾讯云的官方文档:

希望这个答案能够满足你的需求,如果有任何问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter可滑动组件

Flutter中,我们也有对应的列表Widget,就是ListView。 注意:Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动的视图。...Flutter中我们可以使用GridView来实现,使用方式和ListView也比较相似。...Flutter官方文档中提到,ListView的默认构造器建议需要展示的元素个数较少时使用,展示的元素数量较多时,建议使用ListView.builder() 方法构造视图。...比如视图滚动到底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; Flutter中监听滚动相关的内容由两部分组成...DefaultTabController是一个Widget组件,后面示例中可以看到如何对其进行使用。 5.2 TabBar介绍 源码分析: const TabBar({ Key?

7.1K30

Flutter 首页必用组件NestedScrollView的示例详解

昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本...普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...innerBoxIsScrolled) { return <Widget [SliverAppBar( title: Text('ZaLou.Cn'), )]; }, body: ListView.builder...upload/20180918/2018091815372344164.jpg', fit: BoxFit.fitHeight, ), ), )]; }, body: ListView.builder...交流 Flutter博客地址(近200个控件用法):http://laomengit.com 总结 到此这篇关于Flutter 首页必用组件NestedScrollView的文章就介绍到这了,更多相关Flutter

3.6K40

Flutter 视图布局(二)

而且这是一个很少能够直接使用的 Widget,如果需要的话应该优先选择 ListView,因为它有相同的布局方式以及提供了滚动行为。...简单来说(翻译一下),通常在可滚动列表的容器中子项都会被装在重绘边界之内,以便列表滚动时不需要将它们进行重绘。...cacheExtent 视图可见区域之外有一个区域(即垂直是上下部分,水平是左右部分),用于缓存滚动即进入可见区域的子类。...ClampingScrollPhysics 我也不知道为什么要用 Clamping,可能是钳子一样拥有最大张合度吧。默认情况下,如果列表子元素不足以超出可视范围则不会产生可滚动行为。...Ok,那我们就来看看代码是如何实现的。 当 itemCount 设置为 null 时就可以实现无限下拉列表。少侠小伙伴们可以代码中尝试修改一下看看效果。

2.9K10

Flutter 首页必用组件NestedScrollView

老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...bool innerBoxIsScrolled) { return [SliverAppBar( title: Text('老孟'), )]; }, body: ListView.builder.../20180918/2018091815372344164.jpg', fit: BoxFit.fitHeight, ), ), )]; }, body: ListView.builder...style: TextStyle(color: Colors.white, fontSize: 20), ), ); },itemCount: 20,), ) 效果如下: 与TabBar

4.1K10

UITableViewFlutter中是什么?

这样的需求,iOS中是用UITableView实现的;而在Flutter中,实现这种需求的则是列表控件ListView。...这时,各自视图的滚动和布局模型就是相互独立、分离的,就很难保证整个页面统一一致的滑动效果。 那么,Flutter如何解决多ListView嵌套时,页面滑动效果不一致的问题的呢?...Flutter中,因为Widget并不是渲染到屏幕的最终视觉元素(RenderObject才是),所以我们无法原生的iOS或Android一样,向持有的Widget对象获取或设置最终渲染相关的视觉信息...介绍完了如何通过ScrollController来监听ListView滚动信息,以及怎样进行滚动控制之后,接下来我们再来看看如何获取ScrollNotification通知,从而感知ListView的各类滚动事件...总结 处理展示一组连续、可滚动的视图元素的场景中,Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。

5.5K10

13.Flutter学习之路AppBar实现顶部tab

AppBar 属性 描述 leading 标题前面显示一个控件,首页通常显示引用logo,在其他界面则是返回键 title 标题,通常显示当前页面的标题文字,可以放组件 actions 通常使用IconButton...来表示,可以放按钮组 bottom 通常会放TabBar标题下面显示一个Tab导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTitle...是否可以滚动 indicatorColor 指示器颜色 indicatorWeight 指示器高度 indicatorPadding 底部指示器的Padding indicator 指示器decoration...Style DefaultTabController 属性 描述 initialIndex 默认显示第几个 length 总共显示几个tab页面 child 组件 Demo 接下来我们来看一下我们的如何使用...) ], ) ), ); } } 这里提一个小知识点debugShowCheckedModeBanner可以取消flutter

1.4K10

Flutter完整开发实战详解(二、 快速开发实战篇)

作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速开发一个完整的...1、Tabbar控件实现  Tabbar 页面是常有需求,而在Flutter中: Scaffold + AppBar + Tabbar + TabbarView 是 Tabbar 页面的最简单实现,但在加上...Flutter 中 为我们提供了 RefreshIndicator 作为内置下拉刷新控件;同时我们通过给 ListView 添加 ScrollController 做滑动监听,最后增加一个 Item,...( ///保持ListView任何情况都能滚动,解决RefreshIndicator的兼容问题。...继续上一小节中的 _buildProgressIndicator方法实现,通过 flutter_spinkit 可以快速实现更不一样的 Loading 样式。

4.9K30

Flutter 构建完整应用手册-设计基础知识 顶

这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。...在这个例子中,我们将创建一个带有3个Tab小部件的TabBar,并将其放置AppBar中。...如果你手动创建一个TabController,你需要将它传递给TabBar。 3.为每个选项卡创建内容 现在我们有了选项卡,我们希望选择标签时显示内容。 为此,我们将使用TabBarView部件。...Flutter中,我们可以将Drawer小工具与Scaffold结合使用,以创建带有材质设计Drawer的布局!...在这个例子中,我们将使用一个ListView。 尽管我们可以使用Column部件,但ListView在这种情况下很方便,因为如果内容占用的空间比屏幕支持的更多,它将允许用户滚动抽屉。

7.1K10

Flutter 1.22 正式发布

如果您想使用平台视图iOS或Android上托管自己的本机UI组件,则可以了解如何在使用平台视图Flutter应用中托管本机Android和iOS视图上。...有关详细信息,我强烈推荐有关Flutter中的声明式导航和路由的文章。 另外,您对Navigator 1.0的现有使用将今天一样继续使用,并且不会在短期内被删除。如果您喜欢该模型,则可以继续使用它。...我们已经Scrollable类中提供了支持,例如ListView和SingleChildScrollView(记住用户的滚动位置)和TextField(恢复他们输入的文本),并且我们计划将其扩展到其他小部件...新的统一的Dart开发人员工具 与往常一样,对Flutter的更新不仅意味着引擎和框架,还包括工具。...EasyA联合创始人Phil Kwok 重大变化 与往常一样,我们试图将重大更改的数量保持最少。以下是Flutter 1.22版本中的列表。

7.4K20

Flutter完整开发实战详解(二、 快速开发实战篇)

作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速开发一个完整的...1、Tabbar控件实现  Tabbar 页面是常有需求,而在Flutter中: Scaffold + AppBar + Tabbar + TabbarView 是 Tabbar 页面的最简单实现,但在加上...Flutter 中 为我们提供了 RefreshIndicator 作为内置下拉刷新控件;同时我们通过给 ListView 添加 ScrollController 做滑动监听,最后增加一个 Item,...( ///保持ListView任何情况都能滚动,解决RefreshIndicator的兼容问题。...继续上一小节中的 _buildProgressIndicator方法实现,通过 flutter_spinkit 可以快速实现更不一样的 Loading 样式。

5.1K10

开始使用-编写你的第一个Flutter应用程序 顶

第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态的小部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新的屏幕 第7步:使用主题更改UI...它可以MyApp之外的文件中的任何位置使用,但解决方案将它放在文件的底部。...应用程序应该以前一样运行,每次热重新加载或保存应用程序时都会显示一个字对。 ? 问题? 如果您的应用程序运行不正常,则可以使用以下链接中的代码重新进入正轨。...当用户滚动时,ListView小部件中显示的列表将无限增长。 ListView的builder工厂构造函数允许您根据需要懒惰地构建列表视图。...用ListView和ListTiles创建一个延迟加载的无限滚动列表。 创建了一条路由并添加了主路由和新路由之间移动的逻辑。 了解如何使用主题更改应用UI的外观。

9.5K20
领券