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

NestedScrollView中的Flutter PageView body与SliverAppBar不隐藏appbar

NestedScrollView是Flutter中的一个可滚动视图组件,它可以包含多个子组件,并且可以在垂直方向上滚动。而SliverAppBar是一个可折叠的应用栏组件,它通常与CustomScrollView一起使用,可以实现类似于折叠效果的应用栏。

在使用NestedScrollView时,如果将PageView作为其body属性的子组件,同时希望在滚动时不隐藏SliverAppBar,可以通过以下方式实现:

  1. 将PageView包裹在SliverFillRemaining组件中,将其作为NestedScrollView的body属性的子组件。SliverFillRemaining会填充剩余的空间,并且不会影响SliverAppBar的显示。
代码语言:txt
复制
NestedScrollView(
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(
        // 设置SliverAppBar的属性
        // ...
      ),
    ];
  },
  body: SliverFillRemaining(
    child: PageView(
      // 设置PageView的属性
      // ...
    ),
  ),
)
  1. 如果希望PageView在滚动时也能隐藏SliverAppBar,可以将PageView包裹在SliverToBoxAdapter组件中,并将其作为CustomScrollView的slivers属性的子组件。这样可以将PageView作为一个可滚动的组件,同时也能与SliverAppBar一起进行协调隐藏。
代码语言:txt
复制
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      // 设置SliverAppBar的属性
      // ...
    ),
    SliverToBoxAdapter(
      child: PageView(
        // 设置PageView的属性
        // ...
      ),
    ),
  ],
)

以上是关于NestedScrollView中的Flutter PageView body与SliverAppBar不隐藏appbar的解决方案。在实际应用中,可以根据具体需求选择适合的方式来实现页面的布局和交互效果。

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

  • NestedScrollView:https://pub.dev/packages/flutter/widgets/NestedScrollView-class
  • SliverAppBar:https://api.flutter.dev/flutter/material/SliverAppBar-class.html
  • CustomScrollView:https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html
  • PageView:https://api.flutter.dev/flutter/widgets/PageView-class.html
  • SliverFillRemaining:https://api.flutter.dev/flutter/widgets/SliverFillRemaining-class.html
  • SliverToBoxAdapter:https://api.flutter.dev/flutter/widgets/SliverToBoxAdapter-class.html
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...内部任何列表都不会相互作用 外部ScrollView。...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景,当列表滚动时,隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context...文章就介绍到这了,更多相关Flutter 首页必用组件NestedScrollView内容请搜索ZaLou.Cn以前文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!

3.6K40

Flutter 首页必用组件NestedScrollView

老孟导读:昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...内部任何列表都不会相互作用 外部ScrollView。...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景,当列表滚动时,隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context

4K10

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

题记 —— 执剑天涯,从你点滴积累开始,所及之处,必精益求精。 *** Flutter是谷歌推出最新移动开发框架。...Flutter NestedScrollView 滑动组件是用来处理复杂情况下滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView SliverAppBar...在本节是使用 NestedScrollView 结合 SliverAppBar TabBar 、TabBarView 实现折叠头部效果undefined 【x1】微信公众号每日提醒 随时随记...方法就是构建了一个滑动布局 NestedScrollView ,其中两部分,头部使用SliverAppBar 来触发折叠效果, body 用来配置页面主体部分,代码如下: ///构建滑动布局...] body对应是页面主体部分,使用 TabBarView 装载了三个 Widget ,当然在实际应用场景,你也可以使用独立 StatefulWidget 来使用,代码如下: TabBarView

2.6K11

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

Flutter 也不会少,毕竟 Flutter 主打的也是 MaterialDesign 啊。...首先看下 SliverAppBar 源码吧,其实和 AppBar 参数差不多,只是多了一些比较特殊属性 const SliverAppBar({ Key key, this.leading...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部部件 SliverPersistentHeader,这个部件可以根据滚动距离缩小高度,有点类似 SliverAppBar...SliverAppbar 阴影,主要用来提醒内部内容低于 SliverAppBar (相当于给人一种物理层次感,否则很容易被认为,头部和内容是连接在一起) 接下来看下 NestedScrollView...接着请注意代码那段 assert 文字 糟透了翻译 X 5:sliverOverlapAbsorberHandleFor 传入参数 context 必须包含 NestedScrollView

2K30

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

本篇主要帮助剖析理解 Flutter列表和滑动组成,用比较通俗易懂方式,从常见 ListView到 NestedScrollView 内部实现,帮助你更好理解和运用 Flutter滑动列表...所以在 Flutter 里: ListView 使用是 SliverFixedExtentList 或者  SliverList; GridView 使用是 SliverGrid; PageView...RenderSliver 我们都知道 Flutter 整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样过程,而 「Flutter布局和绘制逻辑都在...了解完 NestedScrollView 布局和联动实现之外,最后简单介绍一下  SliverPersistentHeader , 因为经常在  NestedScrollView 里使用  SliverAppBar...所以如果这时候额外做一些处理,那么对于 body 而言,它 paintOrigin 还是从最顶部开始而不是固定区域下方。

1K30

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

本篇主要帮助剖析理解 Flutter列表和滑动组成,用比较通俗易懂方式,从常见 ListView 到 NestedScrollView 内部实现,帮助你更好理解和运用 Flutter滑动列表...所以在 Flutter 里: ListView 使用是 SliverFixedExtentList 或者 SliverList; GridView 使用是 SliverGrid; PageView...RenderSliver 我们都知道 Flutter 整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样过程,而 Flutter布局和绘制逻辑都在...NestedScrollView 里使用 SliverAppBar,本质上 SliverAppBar 实现靠就是 SliverPersistentHeader。...所以如果这时候额外做一些处理,那么对于 body 而言,它 paintOrigin 还是从最顶部开始而不是固定区域下方。 ?

2.1K41

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

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

2.5K30

Flutter》-- 6.高级组件

参阅书籍: 《Flutter跨平台开发入门实践》-- 向治洪(著) 6. 高级组件 6.1 可滚动组件 对于列表和长布局显示溢出问题,可以使用Flutter提供可滚动组件来处理。...6.1.1 Scrollable组件 在Flutter,一个可滚动组件直接或间接包含一个Scrollable组件,它是可滚动组件基础组件。...在实际使用过程Flutter提供了SliverList、SliverGrid等可滚动组件Sliver版本。...: AppBar(title: Text('高级组件--滑块切换组件')), body: PageView.builder( onPageChanged: (index...()判断依赖状态是否改变,如果已改变,则返回true并执行重绘操作,反之则返回false执行重绘; 2)绘制应尽可能多地进行分层 因为复杂自绘组件都是由很多功能构成,如果都写在一个方法,不利于阅读

10.5K20

SliverAppBar

在前面的文章我们将到了Appbar用户,它类似于Androidtoolbar,但是熟悉Android开发童鞋应该知道在Android还有个Collapsing Toolbar东西,就是一个可以折叠标题栏效果...接下来我们来介绍下SliverAppBar SliverAppBar ---- 我看还是先来看下SliverAppBar构造方法 构造方法也是非常简单,但是我们却不能直接使用它,由官方文档可以看到我们通常结合...首先我们使用了NestedScrollViewheaderSliverBuilder属性添加了SliverAppBar 然后我们设置展开高度为200,不让标题栏随着滑动滚动出可视区域 我们使用flexibleSpace...来构建了一个可以滚动区域 最后我们给NestedScrollViewbody加了一个ListView 然后我们来看下效果: ?...但是有童鞋就问问了,我们怎么让这个SliverPersistentHeader内容(TabBar)不随着ListView滚动而滑动呢?

1.8K30

6详解AppBar小部件

由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...以下是我们将介绍内容: Flutter AppBar 是什么? 应用栏布局 自定义 AppBar Flutter AppBar 是什么?...AppBar 标题图片 默认情况title下,根据 Material 指南 AppBar 左侧对齐。...), Flutter AppBar 中心标题 actions actions是 AppBar 右侧对齐小部件列表。我们通常在用作按钮应用程序中看到它们来触发下拉菜单、个人资料头像等。...关于 Flutter AppBar 必须提供所有内容完整演练。我希望这篇文章能帮助你在未来所有的 Flutter 应用程序创建漂亮 AppBars。

16.3K10

flutter 起步

flutter简介Flutter是谷歌移动UI框架,可以运行在iosandroid系统上,可以以完成app开发,使用情况页面大多数涉及到flutter 开发app 都是混合开发,占比并不多。...继承也有和Java不一样地方:Flutter子类可以访问父类所有变量和方法,因为Flutter没有公有、私有的区别上下文对象是整个APP Widget树结构Widget话柄,每个Wideget...Scaffold 有下面几个主要属性:appBar - 显示在界面顶部一个 AppBarbody - 当前界面所显示主要内容 Widget。...elevation → double - 控件 z 坐标顺序,默认值为 4,对于可滚动 SliverAppBar,当 SliverAppBar 和内容同级时候,该值为 0, 当内容滚动 SliverAppBar...flexibleSpace → Widget - 一个显示在 AppBar 下方控件,高度和 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用。

4.4K20

Flutter Widgets大全】电子书开源

Flutter Widgets大全】是老孟耗费大量精力整理,总共有330多个组件详细用法,开源到Github上,希望可以帮助到大家,开源不易,转发一下可不可以?。...,需要时候进行查阅。...为了方便对比学习,我将相近或相反功能组件整理到一个文件,比如所有的 Button 类组件、弹出类组件等。 如果想系统学习入门知识,请到 Flutter 老孟 实战 查看。...AnimatedPositioned 在线查看 AnimatedPositionedDirectional 在线查看 AnimatedSize 在线查看 AnimatedSwitcher 在线查看 AppBar...在线查看 SlideTransition 在线查看 Slider 在线查看 SliderTheme 在线查看 SliderThemeData 在线查看 SliverAnimatedList 在线查看 SliverAppBar

1.2K10

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

上一篇讲完 Flutter 一些基本部件,这篇就先填完上篇留下没写 AppBar 坑,以及 Scaffold 其他参数使用,在开始前,先补一张缩略版脑图 ?...AppBar 这一部分,我们只关注 Scaffold AppBar 剩下还是埋坑【坑4】( ?...duration 表示切换滚动时长,curve 表示滚动动画样式, // flutter 已经在 Curves 定义许多样式,可以自行切换查看效果 _pageController.animateToPage...来展示内容,body 可以传入任何 Widget,里面就是你需要展示界面内容 // 所以前面留下 Scaffold body 部分坑就解决了 body: PageView...能够使我们快速去搭建一个界面,但是,并不是所有的界面都需要 AppBar 这个标题,那么我们就不会传入 appBar 属性,我们注释 _HomePageState Scaffold appBar

1.7K20

掌握Flutter底部导航栏:畅游导航之旅

本文将深入探讨Flutter底部导航栏实现方法,从基础结构搭建到高级功能应用,带领读者逐步掌握使用Flutter构建底部导航栏技巧窍门。...在接下来章节,我们将深入探讨如何在Flutter创建和定制底部导航栏,包括基本结构构建、外观定制、页面的切换以及状态管理等方面的内容,帮助读者全面掌握底部导航栏实现技巧方法。 3....在Flutter,实现底部导航栏页面切换通常有两种常见方式:使用IndexedStack和利用PageView。本节将分别介绍这两种方式实现方法。...5.2 利用PageView实现页面滑动切换 另一种常见底部导航栏页面切换方式是利用Flutter提供PageView组件,它可以实现页面的滑动切换效果。...: AppBar( title: Text('Bottom Navigation Bar Example'), ), body: PageView(

12010

Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

组件 六、完整代码示例 七、相关资源 一、Scaffold 组件 ---- Flutter Scaffold 组件实现了基础材料设计 ( Material Design ) 可视化布局结构 ;...key, this.appBar, // 顶部标题栏 this.body, // 中间显示核心部分 , 标题栏下面的部分都是 this.floatingActionButton...组件主题 body 字段设置 PageView 组件 , 该组件主要设置 PageController?...controller 和 List children 字段 , PageController 用于控制 PageView 页面跳转 , children 中就是 PageView 封装多个界面组件..., /// 都会根据当前点击选项而改变 , /// 改变时候有切换动画 /// 选中状态下显示底部图标的文本 /// 选中状态下隐藏底部文本内容 shifting

5.6K50
领券