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

Flutter:无法使用TabBar设置SliverPersistentHeader的首选高度

Flutter是一种跨平台的移动应用开发框架,它可以帮助开发者使用单一代码库构建高性能、美观的移动应用。在Flutter中,可以使用TabBar来创建选项卡式的导航栏,而SliverPersistentHeader可以创建一个可以在滚动视图中保持固定位置的头部。

然而,使用TabBar设置SliverPersistentHeader的首选高度可能会遇到一些问题。这是因为SliverPersistentHeader的高度是由其子组件的高度决定的,而TabBar的高度是根据其内容自动调整的。因此,无法直接使用TabBar来设置SliverPersistentHeader的首选高度。

解决这个问题的一种方法是使用PreferredSizeWidget。可以创建一个自定义的PreferredSizeWidget,将TabBar作为其子组件,并将其作为SliverPersistentHeader的子组件。然后,可以通过设置PreferredSizeWidget的preferredSize属性来指定SliverPersistentHeader的首选高度。

以下是一个示例代码:

代码语言:txt
复制
class CustomTabBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return TabBar(
      tabs: [
        // TabBar的选项卡
      ],
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPersistentHeader(
            delegate: MySliverPersistentHeaderDelegate(
              preferredSize: Size.fromHeight(kToolbarHeight),
              child: CustomTabBar(),
            ),
          ),
          // 其他Sliver组件
        ],
      ),
    );
  }
}

class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Size preferredSize;
  final Widget child;

  MySliverPersistentHeaderDelegate({
    required this.preferredSize,
    required this.child,
  });

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => preferredSize.height;

  @override
  double get minExtent => preferredSize.height;

  @override
  bool shouldRebuild(covariant MySliverPersistentHeaderDelegate oldDelegate) {
    return child != oldDelegate.child;
  }
}

在这个示例中,我们创建了一个CustomTabBar类,它继承自PreferredSizeWidget,并将TabBar作为其子组件。然后,在MyHomePage中,我们使用CustomScrollView和SliverPersistentHeader来创建一个可滚动的视图,并将CustomTabBar作为SliverPersistentHeader的子组件。通过设置MySliverPersistentHeaderDelegate的preferredSize属性,我们可以指定SliverPersistentHeader的首选高度。

这样,我们就可以使用TabBar设置SliverPersistentHeader的首选高度了。

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

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

相关·内容

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

不过 Flutter 也提供了专门部件 SliverPadding 使用方式同 Padding,但是需要传入一个 sliver 作为子类。...SliverPersistentHeader Flutter 中,为我们提供了这么一个作为头部部件 SliverPersistentHeader,这个部件可以根据滚动距离缩小高度,有点类似 SliverAppBar...= oldDelegate.child; } } 然后我们就可以愉快使用了,不需要每个 Delegate 都重新写一遍,例如替换下刚才写死 DemoHeader SliverPersistentHeader...糟透了翻译 X 2:最常用情况,就是在其 headerSliverBuilder 中使用携带 TabBar SliverAppBar(就是使用 SliverAppBar bottom 属性添加...分析完源码后,例子目标很明确,使用 SliverAppBar + TabBar + TabBarView,先看下最后效果图吧 ?

2.2K30

SliverAppBar

首先我们使用了NestedScrollView中headerSliverBuilder属性添加了SliverAppBar 然后我们设置展开高度为200,不让标题栏随着滑动滚动出可视区域 我们使用flexibleSpace...我们把 pinned属性设置为false再看下效果 ?...很丑有没有,由于TabBar高度所以我们并不能让SliverAppBar滑动到顶部,所以要想实现随着SliverAppBar移动,把TabBar放在bottom也不是很合适。...但是有童鞋就问问了,我们怎么让这个SliverPersistentHeader内容(TabBar)不随着ListView滚动而滑动呢?...其实很简单,因为SliverPersistentHeader跟SliverAppBar一样都有一个 pinned属性,将它设置为true这里面的内容就会在到达顶部后停止跟随ListView移动了。

1.8K30
  • Flutter 首页必用组件NestedScrollView示例详解

    昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本...,建议慎重,有些人升级后项目无法运行。...与TabBar配合使用 用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled...controller为滚动控制器,可以监听滚到位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener...文章就介绍到这了,更多相关Flutter 首页必用组件NestedScrollView内容请搜索ZaLou.Cn以前文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!

    4K40

    Flutter 首页必用组件NestedScrollView

    老孟导读:昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...如果你想升级到最新版本,建议慎重,有些人升级后项目无法运行。...配合使用 用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...controller为滚动控制器,可以监听滚到位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener

    4.2K10

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

    本篇主要帮助剖析理解 Flutter列表和滑动组成,用比较通俗易懂方式,从常见 ListView到 NestedScrollView 内部实现,帮助你更好理解和运用 Flutter滑动列表...所以在 Flutter 里: ListView 使用是 SliverFixedExtentList 或者  SliverList; GridView 使用是 SliverGrid; PageView...SliverPersistentHeader 主要是具备 floating 和  pinned 两个属性,它们区别主要在于使用了不同 RenderSliver 实现,而「最终不同地方其实就是输出 ...最后需要注意是,「当你使用 SliverPersistentHeader 去固定住头部时候,作为 body列表是不知道顶部有个固定区域。」 ... SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 高度使用 SliverOverlapInjector 将这个高度配置到 body 列表中,让列表知道顶部存在一个固定高度区域

    1.1K30

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

    所以在 Flutter 里: ListView 使用是 SliverFixedExtentList 或者 SliverList; GridView 使用是 SliverGrid; PageView...NestedScrollView 里使用 SliverAppBar,本质上 SliverAppBar 实现靠就是 SliverPersistentHeader。...最后需要注意是,当你使用 SliverPersistentHeader 去固定住头部时候,作为 body 列表是不知道顶部有个固定区域。...这时候就可以通过使用 SliverOverlapAbsorber + SliverOverlapInjector 组合来解决这个问题: 在 SliverPersistentHeader 外层嵌套一个...SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 高度使用 SliverOverlapInjector 将这个高度配置到 body 列表中,让列表知道顶部存在一个固定高度区域

    2.2K51

    【FlutterUnit周边】SliverPersistentHeader使用指南

    可以看到它是抽象类,说明需要实现一些抽象方法,而一般抽象方法都会为我们回调一些有价值东西 查看他族谱,发现没有可以使用子类,那么想使用它,二话不说,先写个他子类。...,可以从日志里看出最大上滑高度为maxExtent,这是默认pinned=false,floating=false滑动效果。...封装PersistentHeaderBuilder 上面使用起来比较麻烦,可以自定义一个PersistentHeaderBuilder来简化构建 使用builder属性,将创建逻辑移交到使用时,可以回调一些有价值数据...使用 你也可以根据offset来进行一些变换处理。...基本用法就是这样,你可以基于此实现很多有意思滑动效果 最后欢迎关注我开源项目 FlutterUnit,FlutterUnit相关周边文章会陆续更新,其中包括一些Flutter组件用法,或一些FlutterUnit

    97620

    Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

    : 该组件是被导航组件 , 设置多个布局结构 , 同时只能显示一个 ; DefaultTabController : 该组件用于关联控制 TabBar 和 TabBarView 组件 ; 界面组件中...TabBar组件都是无状态组件 , 或者不同父类组件 , 导致创建 TabController 不方便时 , 就会使用该 DefaultTabController 组件 ; DefaultTabController...导航按钮组件 ---- TabBar 组件主要用于封装导航栏图标按钮 , 主要设置一组 Tab 组件 ; 通常放在 AppBar 组件底部 , 也就是赋值给 AppBar.bottom , 与 TabBarView...结合起来使用 ; TabBar 中 Tab 子组件个数 , TabController 中 length 长度 , TabBarView 中子组件个数 , 三者必须相等 ; TabBar 构造函数...组件子组件 , 每个 TabBar 组件需要设置若干个 Tab 组件 ( 至少一个 ) ; Tab 构造函数 : /// 创建一个材料设计风格选项卡. /// /// 至少设置一个 text

    2.8K40

    Flutter 专题】52 图解可折叠状态栏

    顶部状态栏在日常中是必不可少,今天和尚尝试一下可折叠状态栏使用; 和尚以前在学习滑动冲突时曾用过 Sliver 系列 Widget,和尚这次尝试用 SliverAppBar...; automaticallyImplyLeading:配合 leading 使用,若未设置 leading 且设为 false 时,标题位置整体向左移动,占据 leading 原本位置; ?...随着需求不同,对折叠栏样式要求也不相同,接下来是和尚研究重点,自定义折叠栏样式; 源码分析 const SliverPersistentHeader({ Key key,...false, }) 和尚主要实现 SliverPersistentHeaderDelegate;需要实现四个方法: build 是页面布局效果,其中 shrikOffset 为滑动距离,直到设置折叠展开高度...; maxExtent 折叠状态栏展开最大高度; minExtent 折叠状态栏收起最小高度(pinned=true);当 maxExtent=minExtent 时,状态栏不折叠; shouldRebuild

    1.4K51

    Flutter | Slivers 系列

    系列,如果要将一个普通组件放在里面,必须使用 SliverToBoxAdapter 进行适配才行 简单使用 class _MyHomePageState extends State<MyHomePage...SliverFixedExtentList 面的子元素中宽高是动态,需要手动设置高度,并且这种也不利于性能,所以我们可以使用 SliverFixedExtentList 来控制限制子元素大小: SliverFixedExtentList...,就可以提升不小性能,但是在实际项目中,想要固定元素高度是非常麻烦,就算是列表中元素只有一行文字,也有可能会出现问题,例如直接在系统层面修改字体大小,这也会导致高度固定导致渲染出来效果不尽人意...在 SliverPrototypeExtentList 中,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕上,在运行过程中,Flutter 会将原型尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型尺寸...prototype: ,使用 fixed: 从图中可以看到,尽管高度固定到 40,但是由于 Text 大小被修改了,所以渲染出来还是有问题。

    1.5K11

    Flutter Widgets大全】电子书开源

    Flutter Widgets大全】是老孟耗费大量精力整理,总共有330多个组件详细用法,开源到Github上,希望可以帮助到大家,开源不易,转发一下可不可以?。...Flutter Widgets 【Flutter Widgets 大全】 为 Flutter 老孟 网站项目,共收录 330 多个 Widgets,此电子书并不适合入门(一个一个组件学习),适合当作手册...,需要时候进行查阅。...为了方便对比学习,我将相近或相反功能组件整理到一个文件中,比如所有的 Button 类组件、弹出类组件等。 如果想系统学习入门知识,请到 Flutter 老孟 实战 查看。...在线查看 StatefulBuilder 在线查看 Stepper 在线查看 StreamBuilder 在线查看 Switch 在线查看 SwitchListTile 在线查看 Tab 在线查看 TabBar

    1.2K10

    Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

    Flutter_Chatroom聊天室项目是基于flutter+dart技术开发跨平台聊天实战案例,基本实现了登录/注册表单验证、消息表情发送、图片预览、红包/视频/朋友圈等功能。.../a/1190000022483730 flutter图标Icon及自定义IconData组件 flutter中自带图标使用非常简单 Icon(Icons.search) 可是如果想要自定义图标,如使用阿里图标...聊天页面实现|TextField编辑框插入表情 360截图20200513093616798.png flutter中TextField文本框提供maxLines属性可实现多行/换行文本,不过默认会有高度..., 可在外层加个Container容器限制最小高度,然后设置 maxLines: null keyboardType: TextInputType.multiline Container( margin...聊天消息滚动到最底部,使用是ListView里controller控制器jumpTo方法实现 ScrollController _msgController = new ScrollController

    6.8K31

    Flutter 自定义 TabBar

    TabBar常用于放在AppBar中,以标签页形式展示同一个页面不同内容主题标签。 常见属性如下: 1. tabs 标签组。值类型为Widget列表; 2. controller 标签控制器。...值类型为Colors; 5. indicatorWeight 指示器权重,即显示高度。值类型为double; 6. indicatorPadding 指示器内边距。...实现一个普通Tab选项卡 代码示例: import 'package:flutter/material.dart'; class HomePage extends StatelessWidget {...实现常见App选项卡效果 代码如下: // lib/pages/tabs/Gategory.dart import "package:flutter/material.dart"; // 分类页面...自定义带控制器Tab选项卡 代码如下: // lib/pages/tabs/Setting.dart import "package:flutter/material.dart"; // 设置页面 class

    3.1K20

    Flutter 3.13 组件更新 | 欢迎 Slivers 体系 5 位新成员

    介绍一下 5 个新 Sliver 组件 在 Flutter 3.13 更新中,增加了 5 位新 Sliver 相关组件,用于滑动视口中,完成特定功能。这篇文章将介绍一下它们作用和使用场景。...SliverCrossAxisExpanded 交叉轴延展滑片 交叉轴方向上设置某个 Sliver尺寸占比 SliverCrossAxisGroup 交叉轴分组滑片 可以容纳多个 Sliver 组件...主轴滑片分组: SliverMainAxisGroup 组件 在 《Flutter 滑动探索 - 珠联璧合#第九章》 介绍过一个分组滑动效果,当时使用flutter_sticky_header 三方库来实现...当然也可以自定义 Decoration 自己绘制,装饰详细使用可详见 《 【Flutter 组件集录】 DecoratedBox》 ,这里就不赘述了。...可以解决一些特定滑动问题。本文组件使用案例将会集成到 FlutterUnit 中,欢迎大家对项目多多关照。那本文就到这里,谢谢观看~

    95620

    Flutter 入门指北之快速搭建界面(含Flutter知识体系)

    上一篇讲完 Flutter一些基本部件,这篇就先填完上篇留下没写 AppBar 坑,以及 Scaffold 其他参数使用,在开始前,先补一张缩略版脑图 ?...,居然已经埋了那么多坑了,坑虽多,代码还是要继续),因为稍后会用到 StatefulWidget 属性,所以就直接先使用了,和 StatelessWidget 区别用法可以这么记 需要数据更新界面用...PageView + TabBar 那么如何通过 TabBar 切换界面呢,这边我们需要用到 PageView 这个部件,当然还有别的部件,例如 IndexStack 等,小伙伴可以自己尝试使用别的,这边通过...: Colors.yellow[200], // 设置指示器图片,当然也有 color 可以设置 activeThumbImage: AssetImage...~ 最后代码地址还是要: 文章 demo 地址:https://github.com/kukyxs/flutter_arts_demos_app 电影 App 地址,含括常用功能:https:/

    1.7K20
    领券