问题标签 [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.

0 投票
1 回答
522 浏览

flutter - 当 SliverAppBar 滚动时,flexibleSpace 内的图标不会隐藏

我在里面有“下一个”和“上一个”按钮flexibleSpace,如下所示,“下一个”和“上一个”按钮的文本在滚动时会隐藏,但前进和后退箭头不会隐藏。我希望它们在滚动时隐藏。

在此处输入图像描述

这是我的代码,

0 投票
3 回答
2743 浏览

flutter - 带有 SliverAppBar 的 ScrollablePositionedList 无法正常工作

这是一个用于创建最小可重现示例的存储库。

我想在滚动SliverAppBar时隐藏ScrollablePositionedList.builder。这是我在这里包含的相关代码。

到目前为止,我尝试了两种方法都没有正常工作,

方法一

我添加physics: ScrollPhysics(),ScrollablePositionedList.builder

输出:

在此处输入图像描述

方法 2

我添加physics: NeverScrollableScrollPhysics(),ScrollablePositionedList.builder

SliverAppBar这次隐藏了,但现在我无法滚动到ScrollablePositionedList.builder列表的最后,我有 500 个项目,但它只能滚动到第 14 个项目,请参阅输出。此外,它在滚动上滞后太多

输出:

在此处输入图像描述

提前致谢。

0 投票
0 回答
82 浏览

flutter - 我可以为我的各种 SliverPersistentHeader 分配一个 onClick() 函数以跳转到 CustomScrollView 中的那个位置吗?

我已经成功构建CustomScrollView()了包含SliverGrid()项目并且SliverPersistentHeaders()已固定的我的项目。我想点击任何SliverPersistentHeader()滚动到确切的位置。我想知道这在颤动中是否可行。

0 投票
1 回答
4514 浏览

flutter - NestedScrollView 标头中的 Flutter SliverAppbar 不会像在 CustomScrollView 中那样拉伸和缩放

如果 SliverAppbar 在 customScrollView 中,它将拉伸和缩放,但在 NestedScrollView 中则不会。只有 NestedScrollView 的 body 有 BouncingScrollPhysics,NestedScrollView 的 header 怎么也有 BouncingScrollPhysics 才能拉伸和缩放 SliverAppBar。

但是,如果我在 body/inner scrollView 中添加 scrollController 则标题 SliverAppBar 会拉伸,但随后它们会变成两个单独的滚动视图,并且当 body 滚动时标题不会向上滚动。检查 屏幕录制

0 投票
0 回答
1130 浏览

flutter - Flutter - SliverAppBar 带有捕捉工具栏和嵌套滚动视图

我正在尝试重现一个 UX 设计,其中我们有以下组件:

  1. 包含文本“Desmos”的顶部栏
  2. 一个主要的帖子内容,由
    • 标题(用户图标、用户名、发布日期、选项按钮)
    • 发布消息
    • 任何可能存在的帖子图片
  3. 一个标签栏,允许用户显示评论列表或反应列表。

这种 UX 的特点是,当用户滚动评论或反应列表(基于他当前正在查看的内容)时,垂直滚动列表会捕捉到标签栏。

从那里,用户将能够向下滚动评论列表,或者通过额外的滚动再次显示帖子。请注意,应放置原始帖子,以便用户再次显示它,需要更大的滚动力。

我整理了一个视频,您可以在这里看到,以便更好地了解它应该如何工作:

想要的用户体验

我已经实现了一个名为的小部件PostContent,其中包含上述所有帖子的主要内容。我也已经尝试为想要的 UX 编写一些代码,如下所示:

通过单击以下预览可以看到结果:

创建用户体验

此实现的问题如下:

  1. 由于PostContentis a Column,我怎样才能得到它的高度,这样我就不必在SliverAppBar'sexpandedHeight属性中指定一个固定值?
  2. 如何避免在向上ListView滚动时,滚动在到达时停止AppBar而不进一步向上滚动?
0 投票
3 回答
1321 浏览

android - Flutter App中使用Sliver App Bar时状态栏和导航栏颜色不切换

这是我用来在暗模式和亮模式之间切换的代码。一切正常,但是当我的小部件子树包含“Sliver App Bar”时,导航栏和状态栏的颜色不会自动改变。

这是预览

PS:只要我删除 Sliver 应用栏,一切正常

.

我用来在主题之间切换的代码。

.

我用于 Sliver App Bar 的代码

0 投票
1 回答
649 浏览

flutter - Flutter 中的条子是否可以同时具有“扩展”和“收缩”效果?

我已经使用,实现了一个屏幕,CustomScrollView如下所示:SliverAppBarFlexibleSpaceBar

在此处输入图像描述

现在,我试图通过尝试复制以下效果来进一步扩展功能:

滚动时将图像扩展到全屏

这样的事情可以通过使用sliversin Flutter 来完成吗?

基本上,我希望屏幕打开时图像的初始大小,但根据滚动方向,它应该动画-> 收缩/淡入淡出(保持列表滚动功能)或扩展到全屏(也许到新路线?)。

请帮忙,因为我不确定我应该往哪个方向走。

这是上面屏幕的代码:

0 投票
2 回答
3000 浏览

flutter - Flutter SliverAppBar,折叠背景填充前导空间

我想使用创建一个长条列表视图,SliverAppBar这样当我向上滚动列表时,主体内的图标会缩小以发生在leadingappBar 的空间中。

这里的图像显示了我想要实现的目标。当我向上滚动时,图表应该向上移动并在标题旁边滑动。(类似于英雄小部件的东西)

到目前为止,我尝试过SliverAppBar,但未能成功。我很高兴使用其他一些小部件来实现这一点。谢谢你。

在此处输入图像描述

0 投票
1 回答
1216 浏览

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.

0 投票
2 回答
204 浏览

flutter - 如何制作类似于 Google News 的 SliverAppBar?

当应用程序启动时,我想要一个标准的 AppBar,但是,一旦用户开始滚动,我希望应用程序栏向上滑动并滑出屏幕。但是,当这种情况发生时,状态栏(在 iOS 上)没有背景。我不想使用类似flutter_statusbarcolor之类的东西直接为状态栏设置一个恒定的背景,因为这会留下纯色,这不是小部件。

滚动前 滚动后

我现在唯一的解决方案是保持 AppBar 固定。

然而,我真正想做的是谷歌新闻所做的。AppBar 几乎一直向上滑动,但是,它保持在应用程序栏下方,具有一定的不透明度。

谷歌新闻是如何做到的:

有没有什么办法可以用 Flutter 和 SliverAppBar 做到这一点,而无需采用 hacky 方式?我唯一在想的就是用一个堆栈来做,但是,我怎么知道如何将它保存在状态栏下,因为 Android 在状态栏下已经有一些不透明性。