问题标签 [sliverappbar]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
flutter - 带有 SliverAppBar 的 ScrollablePositionedList 无法正常工作
这是一个用于创建最小可重现示例的存储库。
我想在滚动SliverAppBar
时隐藏ScrollablePositionedList.builder
。这是我在这里包含的相关代码。
到目前为止,我尝试了两种方法都没有正常工作,
方法一
我添加
physics: ScrollPhysics(),
到ScrollablePositionedList.builder
输出:
方法 2
我添加
physics: NeverScrollableScrollPhysics(),
到ScrollablePositionedList.builder
SliverAppBar
这次隐藏了,但现在我无法滚动到ScrollablePositionedList.builder
列表的最后,我有 500 个项目,但它只能滚动到第 14 个项目,请参阅输出。此外,它在滚动上滞后太多
输出:
提前致谢。
flutter - 我可以为我的各种 SliverPersistentHeader 分配一个 onClick() 函数以跳转到 CustomScrollView 中的那个位置吗?
我已经成功构建CustomScrollView()
了包含SliverGrid()
项目并且SliverPersistentHeaders()
已固定的我的项目。我想点击任何SliverPersistentHeader()
滚动到确切的位置。我想知道这在颤动中是否可行。
flutter - NestedScrollView 标头中的 Flutter SliverAppbar 不会像在 CustomScrollView 中那样拉伸和缩放
如果 SliverAppbar 在 customScrollView 中,它将拉伸和缩放,但在 NestedScrollView 中则不会。只有 NestedScrollView 的 body 有 BouncingScrollPhysics,NestedScrollView 的 header 怎么也有 BouncingScrollPhysics 才能拉伸和缩放 SliverAppBar。
但是,如果我在 body/inner scrollView 中添加 scrollController 则标题 SliverAppBar 会拉伸,但随后它们会变成两个单独的滚动视图,并且当 body 滚动时标题不会向上滚动。检查 屏幕录制
flutter - Flutter - SliverAppBar 带有捕捉工具栏和嵌套滚动视图
我正在尝试重现一个 UX 设计,其中我们有以下组件:
- 包含文本“Desmos”的顶部栏
- 一个主要的帖子内容,由
- 标题(用户图标、用户名、发布日期、选项按钮)
- 发布消息
- 任何可能存在的帖子图片
- 一个标签栏,允许用户显示评论列表或反应列表。
这种 UX 的特点是,当用户滚动评论或反应列表(基于他当前正在查看的内容)时,垂直滚动列表会捕捉到标签栏。
从那里,用户将能够向下滚动评论列表,或者通过额外的滚动再次显示帖子。请注意,应放置原始帖子,以便用户再次显示它,需要更大的滚动力。
我整理了一个视频,您可以在这里看到,以便更好地了解它应该如何工作:
我已经实现了一个名为的小部件PostContent
,其中包含上述所有帖子的主要内容。我也已经尝试为想要的 UX 编写一些代码,如下所示:
通过单击以下预览可以看到结果:
此实现的问题如下:
- 由于
PostContent
is aColumn
,我怎样才能得到它的高度,这样我就不必在SliverAppBar
'sexpandedHeight
属性中指定一个固定值? - 如何避免在向上
ListView
滚动时,滚动在到达时停止AppBar
而不进一步向上滚动?
android - Flutter App中使用Sliver App Bar时状态栏和导航栏颜色不切换
这是我用来在暗模式和亮模式之间切换的代码。一切正常,但是当我的小部件子树包含“Sliver App Bar”时,导航栏和状态栏的颜色不会自动改变。
PS:只要我删除 Sliver 应用栏,一切正常
.
我用来在主题之间切换的代码。
.
我用于 Sliver App Bar 的代码
flutter - Flutter 中的条子是否可以同时具有“扩展”和“收缩”效果?
我已经使用,实现了一个屏幕,CustomScrollView
如下所示:SliverAppBar
FlexibleSpaceBar
现在,我试图通过尝试复制以下效果来进一步扩展功能:
这样的事情可以通过使用slivers
in Flutter 来完成吗?
基本上,我希望屏幕打开时图像的初始大小,但根据滚动方向,它应该动画-> 收缩/淡入淡出(保持列表滚动功能)或扩展到全屏(也许到新路线?)。
请帮忙,因为我不确定我应该往哪个方向走。
这是上面屏幕的代码:
flutter - SliverAppBar without fading in the AppBar
I really love using Slivers, but really have a Problem with SliverAppBar: usually, I use the SliverAppBar Widget for creating a AppBar that has a Background Image with the Parallax effect. So all I use is the flexible space, which unfortunately gets blocked by the AppBar Portion whenever you scroll down. I tried making the AppBar portion transparent by setting the color value to transparent, but all it does is make the whole thing, including the flexiblespace, transparent..
Is there a way to use only the flexiblespace of a SliverAppBar without fading in the AppBar portion when scrolling down?
here is the code I use:
Hope these Images help explain my problem: The flexiblespace looks as follows:Image 1 but once you scroll down, the flexible space fades away as seen in this picture:Image 2 I don't want to flexiblespace to fade away.
flutter - 如何制作类似于 Google News 的 SliverAppBar?
当应用程序启动时,我想要一个标准的 AppBar,但是,一旦用户开始滚动,我希望应用程序栏向上滑动并滑出屏幕。但是,当这种情况发生时,状态栏(在 iOS 上)没有背景。我不想使用类似flutter_statusbarcolor之类的东西直接为状态栏设置一个恒定的背景,因为这会留下纯色,这不是小部件。
我现在唯一的解决方案是保持 AppBar 固定。
然而,我真正想做的是谷歌新闻所做的。AppBar 几乎一直向上滑动,但是,它保持在应用程序栏下方,具有一定的不透明度。
谷歌新闻是如何做到的:
有没有什么办法可以用 Flutter 和 SliverAppBar 做到这一点,而无需采用 hacky 方式?我唯一在想的就是用一个堆栈来做,但是,我怎么知道如何将它保存在状态栏下,因为 Android 在状态栏下已经有一些不透明性。