问题标签 [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 投票
2 回答
1297 浏览

flutter - 如何在 SliverAppBar 中为项目的位置设置动画以在关闭时围绕标题移动它们

我对 Appbar 有这些要求,但我找不到解决它们的方法。

  • 拉伸时,AppBar 必须显示两个图像,一个在另一个之上,并且标题必须被隐藏。
  • 关闭时,AppBar 必须显示标题,并且两个图像在滚动时必须按比例缩小并移动到标题的两侧。滚动时标题变为可见。

我创建了几个模型来帮助获得所需的结果。

这是拉伸时的 Appbar:

在此处输入图像描述

这是关闭时的 Appbar:

在此处输入图像描述

0 投票
1 回答
281 浏览

flutter - 在 Flutter 中,当 SliverAppBar 不是主要的时,如何使 SliverAppBar 尊重浮动状态的顶部安全区域

我有一个 SliverAppBar 看起来这是我想要的正常状态:

SliverAppBar 处于正常状态

但是当向下滚动时,应用栏不尊重其浮动状态的顶部安全区域:

SliverAppBar 处于浮动状态

这是我的构建方法代码

0 投票
0 回答
160 浏览

android - Flutter Sliver Appbar 在滚动和文本视图上有多个图标

我正在尝试使用 sliver 应用栏来实现设计,那里有一个图像、一些文本细节和右侧的两个按钮。

我在这里面临的困难是,我必须在滚动时将一些文本移动到应用栏并隐藏一个图标。

我自己试过这个

在此处输入图像描述

我从这段代码中得到了这个设计我在这里得到的设计你可以看到左边的人字形和右边的图标不在一行中,滚动后问题图标在某些设备上会显示在顶部

这在我的设备上看起来非常好,但在其他设备上会发生变化

我想要这样的设计

在此处输入图像描述 在此处输入图像描述

我希望有人能帮助找到解决这个问题的方法。谢谢 :)

0 投票
1 回答
173 浏览

flutter - 有没有办法在 Flutter 的应用栏操作按钮后面添加阴影?

我正在使用SliverAppBar带有一些背景图像的小部件。由于我将加载的图像是动态的,因此有时它可能具有浅色并且可能导致后退按钮(或任何其他操作按钮)几乎不可见。

TextStyle正如您在下面的屏幕截图中看到的那样,我使用&小部件给应用栏标题添加了一点阴影Shadow,因此它比后退按钮更明显。

示例图片

0 投票
0 回答
112 浏览

flutter - 带有标签的 Flutter Sliver Appbar - 滚动控制器功能问题

在我的颤振应用程序中,我正在尝试开发一个带有 3 个选项卡和 sliver 持久应用栏的屏幕,它会在向下滚动时展开,在任何选项卡中向上滚动时会折叠。我发现实现起来很麻烦,因为在一个选项卡中我有一个项目列表,在 initState 上应该关注列表中的特定高度。在其他选项卡中,我有几个项目列表,它们有一个展开和折叠按钮,单击该按钮将展开或折叠与其关联的列表,并在单击时滚动页面。

我用 NestedScrollView 包裹了整个屏幕,用 CustomScrollView 包裹了选项卡。

最初,我给每个 ScrollView 一个不同的滚动控制器,它负责视图功能。但不幸的是,它阻止了 sliver appbar 调整大小和折叠。

后来,当我意识到问题可能是因为我必须给整个屏幕一个滚动控制器时,我在不同的场景中遇到了问题:

  1. 无法将相同的滚动控制器附加到一些小部件时出现错误。
  2. 当我在一个选项卡上应用滚动跳转时,它也在另外两个选项卡上执行此操作。
  3. 滚动很慢,并且在两个选项卡上它不允许从特定高度滚动。
  4. appbar sliver 效果在带有滚动视图的选项卡上不起作用,并且当它起作用时,它仅在我滚动到列表顶部并向下滚动时才起作用。

我没有附上代码,因为问题是通用的。如果您需要实现它的应用程序示例,请告诉我。

0 投票
1 回答
177 浏览

flutter - Flutter Sliver AppBar 主色

这是一个 Sliver AppBar。

应用栏

如何更改后退箭头的颜色?

我不想设置leading: Icon(Icons.arrow_back, color: Colors.red),因为(我相信)Sliver AppBar 具有根据上下文调整引导图标的好属性。

0 投票
1 回答
663 浏览

flutter - CustomScrollView:SliverAppBar下的Body滚动

颤振飞镖垫

SliverAppBar在一个内有多个CustomScrollView,屏幕的主体在 内SliverFillRemaining


顶部 SliverAppBar 已固定
中间 SliverAppBar 是一个图像,将在用户滚动时折叠
底部 SliverAppBar 是一个固定的 TabBar,在图像完全折叠后将保持在第一个 SliverAppBar 下方

目前的经验是,最初滚动时,body 滚动到最下面的 SliverAppBar 下。我已经尝试使用 SliverOverlapAbsorber/Injector,但这只是在主体顶部添加了一个空间,以便空间重叠而不是主体,但这不是我想要的。


我希望 body 和 SliverAppBars 一起滚动,直到 Middle SliverAppBar 完全折叠,然后我希望 body 滚动。

我已经为此工作了几个小时,你如何阻止身体在滚动上重叠?

0 投票
1 回答
378 浏览

flutter - Flutter:如何仅在滚动后显示 AppBar?

这就是你读到的。滚动时我不想隐藏 AppBar,有很多信息。

我想要的恰恰相反。我希望我的主页在没有 AppBar 的情况下打开,然后,当用户开始滚动时,将显示 appbar。

这个网站正是我想要复制的:https ://www.kirschnerbrasil.cc/ (在桌面版本中)。

我想我需要使用SliverAppBar,但我还没有设法这样做。任何人都可以帮忙吗?

谢谢!

0 投票
1 回答
86 浏览

flutter - 如何在滚动时为 AppBar 的颜色设置动画?

SliverAppBar当我滚动浏览时,如何为我的颜色设置动画CustomScrollView

0 投票
0 回答
396 浏览

flutter - Sliver 不允许设置容器的最大宽度?

我正在尝试制作一个在移动设备和桌面设备上运行良好的响应式页面。我在 NestedScrollView 中使用 SliverAppBar。问题是在 NestedScrollView 中完全忽略了容器的 maxwidth 约束。此行为也与 CustomScrollView 相同。

如何在 NestedScrollView body 小部件中限制 Container 的大小。

下面是代码:

在我上面的代码中,您可以注意到正在使用 maxWidth 约束,

但是这些 maxWidth 约束被完全忽略了,它占据了可用屏幕的整个宽度。

我想让 NestedScrollView 具有全屏宽度,从而使 SliverAppbar 覆盖整个屏幕宽度。

到目前为止,我了解约束根据其父项的大小获取宽度。在这种情况下,父 NestedScrollView 采用全屏宽度,因此忽略 ConstrainedBox maxWidth 属性。

那么如何使 SliverAppBar 的大小全宽并仍然设置 Max。容器的宽度?

请建议如何解决这个问题。

谢谢