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

如何使用tabBar实现sliverAppBar

SliverAppBar 是 Flutter 中的一个组件,通常用于实现可滚动的应用栏,而 TabBar 则用于在应用栏中显示标签页。将这两者结合使用,可以创建一个带有标签页的可滚动应用栏,这在很多应用中都非常常见,比如新闻应用、社交媒体应用等。

基础概念

  • SliverAppBar:是 Flutter 的 CustomScrollView 中的一个组件,它可以随着滚动而改变高度,通常用于实现 Material Design 中的可滚动应用栏。
  • TabBar:是一个用于显示标签页的组件,用户可以通过点击标签页在不同的视图之间切换。

实现步骤

  1. 创建 CustomScrollView:这是包含 SliverAppBar 和其他滚动内容的容器。
  2. 添加 SliverAppBar:在 CustomScrollView 中添加 SliverAppBar,并设置其属性。
  3. SliverAppBar 中添加 TabBar:使用 TabBar 组件来显示标签页。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> _tabs = ['Tab 1', 'Tab 2', 'Tab 3'];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _tabs.length,
      child: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('My App'),
              background: Image.asset('assets/image.jpg', fit: BoxFit.cover),
            ),
            bottom: TabBar(
              tabs: _tabs.map((tab) => Tab(text: tab)).toList(),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(title: Text('Item $index'));
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

应用场景

  • 新闻应用:顶部显示不同类别的新闻标签,用户可以滚动查看不同类别的新闻。
  • 社交媒体应用:顶部显示不同的功能标签,如“首页”、“消息”、“个人中心”等。
  • 电商应用:顶部显示不同的商品类别标签,用户可以快速切换查看不同类别的商品。

可能遇到的问题及解决方法

  1. TabBar 标签页不显示:确保 TabBar 已经正确添加到 SliverAppBarbottom 属性中,并且 DefaultTabControllerlength 属性与 TabBartabs 属性长度一致。
  2. SliverAppBar 不随滚动变化:检查 SliverAppBarpinned 属性是否设置为 true,如果设置为 false,则 SliverAppBar 不会固定在顶部。
  3. SliverAppBar 背景图片不显示:确保背景图片的路径正确,并且图片格式支持。

参考链接

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

相关·内容

SliverAppBar

Android中的toolbar,但是熟悉Android开发的童鞋应该知道在Android中还有个Collapsing Toolbar的东西,就是一个可以折叠的标题栏效果,不知道长什么样子的童鞋问下周围的小伙伴如何...接下来我们来介绍下SliverAppBar SliverAppBar ---- 我看还是先来看下SliverAppBar的构造方法 构造方法也是非常的简单,但是我们却不能直接使用它,由官方文档可以看到我们通常结合...首先我们使用了NestedScrollView中的headerSliverBuilder属性添加了SliverAppBar 然后我们设置展开的高度为200,不让标题栏随着滑动滚动出可视区域 我们使用flexibleSpace...当然我们是希望这个TabBarSliverAppBar下方,并且随着SliverAppBar滚动的,但是我们还是来看下效果吧 ?...很丑有没有,由于TabBar的高度所以我们并不能让SliverAppBar滑动到顶部,所以要想实现随着SliverAppBar的移动,把TabBar放在bottom也不是很合适的。

1.8K30

Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果

Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar...的结合使用。...在本节中是使用 NestedScrollView 结合 SliverAppBarTabBar 、TabBarView 实现的折叠头部效果undefined 【x1】微信公众号的每日提醒 随时随记...*** 本 Demo 实现的最终效果如下: [在这里插入图片描述] 首先页面的主体 使用的是 Scaffold 脚手架来构建,因为使用到了 TabBar 与 TabBarView ,标签的左右切换是一个动画效果...的联动的,当然 TabBar是配置在 SliverAppBar 中的 bottom 属性下,通过 buildTabBar 方法来封装的, 代码如下: TabBar buildTabBar() {

2.7K11
  • Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

    SliverAppBar 相信很多 Android 开发的小伙伴会用到 MaterialDesign 的 CollapsingToolbarLayout 来实现折叠头部,既然 Android 有的,那么...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢,可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理,当然没问题。...属性 this.floating = false, }) SliverPersistentHeaderDelegate 这个代理比较特殊,是个抽象类,也就是需要我们自己进行继承后再实现方法...糟透了的翻译 X 2:最常用的情况,就是在其 headerSliverBuilder 中使用携带 TabBarSliverAppBar(就是使用 SliverAppBar 的 bottom 属性添加...分析完源码后,例子的目标很明确,使用 SliverAppBar + TabBar + TabBarView,先看下最后的效果图吧 ?

    2.2K30

    Vue之Tabbar实现

    Tabbar实现 一、实现思路   最终的效果如下图所示,下面小编一一为大家解析每个部分如何实现,并附上最终的实现代码。...3.5 align-item:定义项目在交叉轴上如何对齐。...中实现了,你尽管的大胆放心的使用便是。   ...3.实现过程   根据上面的思路,我们知道在tabbar-item中应该再多使用一个插槽来存放图片,然后通过设置标志位和v-if语句来判断该显示哪张图片。比如: <!...中实现active图片和文字的主要代码和思路,总结如下: 1.active图片是一开始就传入所有的图片,然后根据不同的条件显示不同的图片,而并不是真正使用时才传入的 2.随着图片的数量的增加,也需要添加相应的插槽数量

    2.4K31

    flutter组件6【AppBar的使用

    actions → List - 一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示;对于不常用的菜单通常使用 PopupMenuButton...bottom → PreferredSizeWidget - 一个 AppBarBottomWidget 对象,通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。...elevation → double - 控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar...flexibleSpace → Widget - 一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar使用。...改值通常和下面的三个属性一起使用

    1.2K20

    小程序中tabBar使用

    今天说说tabBar使用,先看看官方说法:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面...备注: 当设置 position 为 top 时,将不会显示 icon tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。...(tabBar图例讲解) 今天在做投一个小程序时,也用到了tabBar,先看一下示例: 为什么没有自己实现tabBar?...因为自己实现tabBar,没有官方的常驻底部的效果好,官方的组件也有限制:不能完全满足自定义需求。比如不支持iconfont图标,也不能展示其他样式风格。...的页面,必须使用wx.swichTab(),使用wx.navigateTo()和wx.redirectTo()都无效~

    2.7K80

    6详解AppBar小部件

    您可以使用它来显示图标、图像、形状或使用布局小部件(例如row和 )的任意组合column。...Flutter 中使用 AppBar 的布局 ( leading, title, 和actions) 如何自定义 AppBar 的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题.../标题文本 this.actions,//右侧item this.flexibleSpace,//显示在 AppBar 下方的控件,高度和 AppBar 高度一样, // 可以实现一些特殊的效果...,该属性通常在 SliverAppBar使用 this.bottom,//一个 AppBarBottomWidget 对象,通常是 TabBar。...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件的 z 坐标顺序,默认值 4,对于可滚动的 SliverAppBar,当 SliverAppBar

    16.4K10

    实战教程 | 小程序自定义TabBar 如何实现“keep-alive”

    自定义TabBar方案 我们可以新建一个home文件夹,在home/index.wxml中写一个tabBar,然后把TabBar页面写成组件,然后点击TabBar切换相应的组件展示就可以。...如何实现keep-alive 我们知道,这里主要是避免组件反复创建和渲染,有效提升系统性能。...实现思路 在tab每个选项增加两个值:status和show,show控制组件是否需要渲染,status控制组件display 初始化时候设置首页的status和show,其他都为false 当我们切换时...activeIndex }) } }, }) 这样基本就大功告成了,来看一下效果: 当我们点击切换时候,如果当前组件没有渲染就会进行渲染,如果渲染过后进行切换只是改变display,完美实现了需求...实际业务场景分析 在实际使用中还有两种种情况: 情况1:比如某些数据并不希望他首次加载后就数据保持不变,当切换页面时候希望数据进行更新,比如笔者做的电商小程序,在首页点击商品加入购物车,然后切换到购物车

    1.1K20

    Flutter中的AppBar、TabBar和TabController——顶部切换栏是如何实现

    也就是说,我们可以将AppBar的bottom属性值配置为一个TabBar组件,以实现在顶部添加TabBar的效果。...好,我们现在来考虑一下,在有两个Scaffold的场景下,如何实现顶部TabBar的效果。...好,现在我们已经知道该如何利用AppBar和TabBar实现顶部Tabbar的视觉效果了。在本文的最后,我们来了解一下如何个性化设置顶部TabBar导航条。...TabBar的常用属性如下: tabs,显示的标签内容,一般使用Tab对象,也可以是其他的Widget isScrollable,是否可滚动 indicatorColor,底部指示条的颜色 indicatorWeight...顶部TabBar切换栏实现的第二种方式 上面我们已经实现了顶部TabBar切换栏的UI效果,但是上面这种方式我们不好监听页面切换,当页面中有网络请求、上拉刷新下拉加载等需求的时候,我们利用第一种方式就不容易实现

    10.3K20
    领券