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

如何在Flutter上的SliverAppBar中添加标签条?

在Flutter中,可以通过使用SliverAppBar和TabBar来实现在SliverAppBar中添加标签条。

首先,需要在Flutter项目中引入flutter/material.dart库。然后,创建一个StatefulWidget,并在其build方法中使用CustomScrollView来创建一个可滚动的视图。在CustomScrollView的slivers属性中,可以添加一个SliverAppBar作为头部,并设置其属性,如标题、背景颜色等。

接下来,在SliverAppBar的bottom属性中,可以添加一个PreferredSizeWidget,例如PreferredSize和TabBar组合,来实现标签条。TabBar是一个用于显示多个标签的小部件,可以通过设置tabs属性来定义标签的内容。

下面是一个示例代码,演示如何在Flutter的SliverAppBar中添加标签条:

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('My App'),
            backgroundColor: Colors.blue,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network(
                'https://example.com/image.jpg',
                fit: BoxFit.cover,
              ),
            ),
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(48),
              child: TabBar(
                controller: _tabController,
                tabs: <Widget>[
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                ],
              ),
            ),
          ),
          SliverFillRemaining(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                // Content for Tab 1
                Container(
                  color: Colors.red,
                ),
                // Content for Tab 2
                Container(
                  color: Colors.green,
                ),
                // Content for Tab 3
                Container(
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个带有SliverAppBar和标签条的CustomScrollView。SliverAppBar作为头部,包含一个标题和一个背景图像。在SliverAppBar的bottom属性中,我们使用PreferredSize来定义了一个高度为48的TabBar,并将其与TabController关联起来。然后,我们使用SliverFillRemaining来填充剩余的空间,并在其中放置了一个TabBarView,用于显示与每个标签对应的内容。

这样,我们就在Flutter的SliverAppBar中成功添加了标签条。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

何在keras添加自己优化器(adam等)

\Anaconda3\envs\tensorflow-gpu\Lib\site-packages\tensorflow\python\keras 3、找到keras目录下optimizers.py文件并添加自己优化器...找到optimizers.pyadam等优化器类并在后面添加自己优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...super(Adamsss, self).get_config() return dict(list(base_config.items()) + list(config.items())) 然后修改之后优化器调用类添加我自己优化器...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

44.9K30

Flutter实战 | 从 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)

前期回顾: •Flutter实战 | 从 0 搭建「网易云音乐」APP(一、创建项目、添加插件、通用代码)•Flutter实战 | 从 0 搭建「网易云音乐」APP(二、Splash Page、登录页、...1.SliverAppBar2.SliverAppBar bottom3.SliverList 整个页面就是用 CustomScrollView 来做,但是有一点不同: 平时我们在使用 SliverAppBar...1.标题,不用多说,是一样2.SliverAppBar 展开状态时内容,是不是可以由外部传入3.播放全部,也是一样,后面有个「共多少首」,也可以由调用者传入4.最下面的歌单,是不是也可以封装出一个组件来...5.忘记了,还有一个是SliverAppBar展开时模糊背景,也可以由调用者传入 so,我们从上往下来封装。...先封装SliverAppBar bottom 确定一下需求,看看需要传入哪些参数: 1. count:共多少首歌 2. tail:尾部控件 3. onTap:点击播放全部时回调 bottom 需要是一个

1.4K20

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

题记 —— 执剑天涯,从你点滴积累开始,所及之处,必精益求精。 *** Flutter是谷歌推出最新移动开发框架。...Flutter NestedScrollView 滑动组件是用来处理复杂情况下滑动应用场景,向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar...在本节是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现折叠头部效果undefined 【x1】微信公众号每日提醒 随时随记...///这里 3 代表有三个子 Item ///应用到 TabBarView ,对应其中3个子Item ///应用到 TabBar,对应其中32子Item tabController...是配置在 SliverAppBar bottom 属性下,通过 buildTabBar 方法来封装, 代码如下: TabBar buildTabBar() { return TabBar(

2.6K11

flutter 起步

flutter简介Flutter是谷歌移动UI框架,可以运行在ios与android系统,可以以完成app开发,使用情况页面大多数涉及到flutter 开发app 都是混合开发,占比并不多。...基本都是原生+Flutter混合开发模式,不是使用纯Flutter开发起步基于dartdart 不用单独安装,flutter 会自带环境,且dart 语言较简单,可以在flutter使用中学习安装环境...图片注意点:官网下载flutter包完成将安装包zip解压到你想安装Flutter SDK路径(:C:\src\flutter;注意,不要将flutter安装到需要一些高权限路径C:\Program...pubspec.yaml添加第三方库名称及版本号。...elevation → double - 控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当 SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar

4.4K20

Flutter | 滚动组件,ListView,GridVIew等

默认情况下,Flutter 会根据具体平台分别使用不同 ScrollPhysics 对象,应用不同显示效果,在 IOS 上会出现弹性效果,而在 android 则会出现微光效果,如果你想在所有的平台下使用同一个效果...风格滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需要将 Scroolbar 作为可滚动组件任意一个父级组件即可,: Scrollbar( child: SingleChildScrollView...其实此属性本质是决定可滚动组件初始滚动位置是在 头 还是在 尾 , false 时,初始位置在头,反之则在 尾 primary:指是否使用 widget 树默认 PrimaryScrollController...因此,为了能让可滚动组件能和 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件 Sliver 版, SliverList,SliverGrid 等,实际 Sliver...:SliverAppBar 对应 AppBar,两者不同之处在于 SliverAppBar 可以集成到 CustomScrollView SliverAppBar 可以结合 FlexibleSpaceBar

8.4K20

Flutter开发实战分析-animation_demo瞎复写总结

以下代码基本参考于 flutter_galleryanimation_demo示例。(可以结合本文看源码) 题外话:这个demo是最炫酷了 ?...自定义动画过程 自定义动画过程,在Flutter其实相对简单。提供了很多帮助计算方式。需要做是确定要初始值,和最终值,中间过度变量可以考虑使用lerp就可以完成。...监听事件 之前文章,我们分析过Flutter数据传递。...添加PageScrolPhysics,这样就是按照页面滚动。添加BounceScrollPhysics,就实现ios弹性滚动了。 好。这边文章,我们就暂时到这里。...下一遍文章,我们先介绍一个Flutter整体视图树,然后回顾一下我们遇到过组件。

2.5K30

Flutter 首页必用组件NestedScrollView

老孟导读:昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...:内容超过一屏 拉有回弹效果 ClampingScrollPhysics :包裹内容 不会有回弹

4.1K10

Flutter | Slivers 系列

概述 CustomScrollView:一个滚动容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动列表, Appbar, 列表,网格...最主要原因就是可以在 slives 添加多个组件,如在列表上面和下面添加更多内容。...在 SliverPrototypeExtentList ,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕,在运行过程Flutter 会将原型尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型尺寸...在 slivers 系列SliverAppbar 可以说是使用频率比较高组件了,SliverAppbar 为应用栏提供了自定义滚动行为,下面我们来看一下 class _MyHomePageState...SliverAppbar,并没有实现任何特殊效果,默认效果如下: 可以看到在滑动过程SliverAppbar 被顶上去了,这也是非常正常

1.4K11

Flutter开发实战分析-pesto_demo解析

入门介绍完,今天我们,先来分析几个官方提供示例。 以下代码基本参考于 flutter_gallerypesto_demo示例。(可以结合本文看源码) 1. PESTO菜谱 ?...因为是MDCard样式,所以需要在最外层包裹一层Card 同时,图中未标注是,padding部分。在Flutter,要实现padding,只要在它包裹在外面一层布局下就可以了。...image.png 添加onTap事件监听 确实达到了我们效果。 我们还预期点击item,跳转到详情页。那我们给RecipeCard添加手势,并将点击事件传入。...SliverAppBarflexibleSpace来存放appBar内显示其他控件 默认 SliverAppBarpined为false,故他会跟着滚上去。...还有一个就是SizedBox定义Rect来控制占用控件。

2.3K20

初识顶部导航栏【flutter20个实例之一】

,//Toolbar 主要内容,通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表,代表 Toolbar 中所显示菜单,对于常用菜单,通常使用 IconButton...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当...SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值 this.backgroundColor...默认值为 ThemeData.primaryIconTheme this.textTheme,//App bar 文字样式。...this.toolbarOpacity = 1.0, this.bottomOpacity = 1.0, }) */ 2.leading默认是一个返回箭头,有时候我们需要定义,有时候也仅是简单返回一层

1.3K20

不一样角度带你了解 Flutter 滑动列表实现

本篇主要帮助剖析理解 Flutter列表和滑动组成,用比较通俗易懂方式,从常见 ListView 到 NestedScrollView 内部实现,帮助你更好理解和运用 Flutter滑动列表...本篇不是教你如何使用 API ,而是一些日常开发不常接触,但是很重要内容。...Flutter 滑动列表 在 Flutter 里我们常见滑动列表场景,简单地说其实是由三部分组成: Viewport : 它是一个 MultiChildRenderObjectWidget 控件...RenderSliver 我们都知道 Flutter 整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样过程,而 Flutter布局和绘制逻辑都在...NestedScrollView 里使用 SliverAppBar,本质 SliverAppBar 实现靠就是 SliverPersistentHeader。

2.1K41

Flutter

布局 Flutter 采用深度优先机制遍历渲染对象树,决定渲染对象树各渲染对象在屏幕位置和尺寸。...绘制 布局完成后,渲染对象树每个节点都有了明确尺寸和位置。Flutter 会把所有的渲染对象绘制到不同图层。与布局过程一样,绘制过程也是深度优先遍历,而且总是先绘制自身,再绘制子节点。...四、Dart 基础 未初始化变量值都是 null,所有类型都是对象类型,都继承自顶层类型 Object Dart 内置了一些基本类型, num、bool、String、List 和 Map Dart...(比如,网络数据回包),并体现在 UI 。...值得注意是,页面切换时,由于 State 对象在视图树位置发生了变化,需要先暂时移除后再重新添加,重新触发组件构建,因此这个函数也会被调用。

1.9K40
领券