问题标签 [flutter-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 回答
37 浏览

flutter - 如何在 SliverAppBar 上制作一个动作按钮(不是真的,它只是一个文本框)

现在我使用 SliverAppBar,如果我想将文本“Choices”(在图片中)移动到右侧,然后单击(单击文本)它会转到另一个页面。我该怎么办!!我做的那个离边界太近了,太低了,不在同一水平线上。

我的应用页面

我的用户界面

0 投票
0 回答
20 浏览

flutter-layout - Flutter SliverAppBar 内容一致?

我正在尝试创建一个AppBar在已经折叠时会显示一些内容并在展开时显示更多内容的内容。

我现在拥有的:

在此处输入图像描述

期望的结果是红色和蓝色容器在 SliverAppBar 折叠时保持可见,而在展开时绿色容器显示出来。

我努力了:

我也尝试过使用 来完成这项工作SliverPersistentHeaderDelagate,但也没有运气:

甚至可以用SliverAppBaror来实现这一点SliverPersistentHeaderDelegate吗?

0 投票
1 回答
111 浏览

flutter - 使用 SliverPersistentHeader 时,Header 会缩小,但会在 Flutter Web 中消失

我正在创建一个网站,并希望拥有像 SliverAppBar 或带有图像轮播的 SliverPersistentHeader。我完全可以做到,但我不希望图像轮播在我向下滚动时缩小。相反,我希望 SliverAppBar 消失,但宽度不会变小,而只是高度变小。我希望我的问题很清楚。如果有任何问题,请提出。这是我的代码:

这是我的图像轮播:

这是带有 SliverPersistentHeader 的代码:

0 投票
1 回答
60 浏览

flutter - Flutter:SliverAppBar 禁用滚动

我的应用程序中有 SliverAppBar,带有expandedHeight: 200,. 在它下面我有 ListView 动态显示内容并且可以有不同的长度。如果 ListView 有 7 个或更多项目,它的工作完美,但如果它低于 7 个项目,SliverAppBar 仍然滚动并且有很多黑色空间(屏幕截图)。如何禁用 SliverAppBar 滚动属性?我尝试physics: NeverScrollableScrollPhysics(),在 ListView 本身中使用,它没有帮助。

在此处输入图像描述

0 投票
3 回答
407 浏览

flutter - 带有 SliverAppBar 的 NestedScrollView 会导致意外的正文填充

当我运行此代码时,ListView 将有一个意外的顶部填充。(见截图)为什么会这样,有没有办法避免这种情况?

我已经尝试过 SliverOverlapAbsorber、SafeArea 和 MediaQuery 来修复填充,但到目前为止似乎没有任何效果。

在此处输入图像描述

0 投票
2 回答
234 浏览

flutter - Flutter:如何将 BackdropFilter 添加到 SliverAppBar

我想将 a 添加BackdropFilter()SliverAppbar().

我希望它看起来像 iOS App Library App Bar:https ://cln.sh/eP8wfY 。

标题条不浮动在 NestedScrollView 中的列表上,但只浮动到标题,我希望titleactions在背景模糊时可见。

谢谢!

编辑

页面是什么样的:https ://cln.sh/vcCY4j 。

Github Gist 和我的代码:https ://gist.github.com/HadyMash/21e7bd2f7e202de02837505e1c7363e9 。

0 投票
1 回答
95 浏览

flutter - 如何通过单击 SliverAppbar 颤振中的按钮来最小化 SliverList

如何通过单击 SliverAppBar 中的按钮自动最小化 Sliver 列表

我在 SliverAppbar 中有最小化按钮,在 SliverList 中有多个 ListTiles。我想通过单击此最小化按钮以动画方式最小化所有列表项在此处输入图像描述

这是主类的代码

SliverAppbar 的代码包含最小化按钮

具有多个项目的 Sliver List 的代码

我是 Flutter 的新手,感谢您的阅读。

0 投票
1 回答
73 浏览

flutter - 无法在 Flutter sliverappbar 中使用 Google 字体

我在我的应用程序中使用 Google 字体。我已经在我的应用程序中成功地做到了这一点,但由于某种原因,我无法在 SliverAppBar 中使用它。我得到的错误是:

The constructor being called isn't a const constructor.

我试图更改字体的代码是:

如果我是您在代码中看到的简单文本框, // Text('Inventory'),那么我没有问题。您如何在 SliverAppbar 中使用 Google 字体?

0 投票
0 回答
235 浏览

flutter - 即使在使用键后 Flutter TabbarView 也不会保持滚动位置

问题

在 Imgur 上观看视频:Imgur

您也可以在这里观看视频:Cloudinary

正如您在视频中看到的那样,滚动位置没有被保持。看起来页面正在一起滚动。

基本应用结构

我正在使用带有 SliverAppBar 和 TabBarView 的 NestedScrollView 来实现简单的滚动效果。标签栏显示不同的页面,这些页面反过来使用Provider进行状态管理,我正在返回 CustomScrollView。

主页 :

标签栏查看页面

笔记 :

  1. 在所有 tabbarview 页面中,我使用AutomaticKeepAliveClientMixin来确保该页面只创建一次。
  2. 在所有 tabbarview 页面中,我都返回了 CutomScrollView。

到目前为止我尝试过的

我尝试了不同的方法来保持 tabbarview 内的滚动位置。

  1. PageStorageKey('page')
  2. PageStorageKey('page')PageStorage()
  3. ScrollController使用 CustomScrollView
  4. 通过小部件构造函数传递PageStorageKey给 CustomScrollView

我尝试了以上所有方法来保留滚动位置,但正如您在视频中看到的那样,滚动位置没有保持不变。只有直接将 CustomScrollView 添加到 TabbarView 时,滚动位置才会被保留。但在我的情况下,CustomScrollView 嵌套在一个有状态的小部件中,该小部件使用 Stacked(提供)进行状态管理和未维护的滚动位置。

但是,如果我在每个页面中为 CustomScrollView 分配一个控制器,那么我就会失去 SliverAppBar 的滚动动画。

那么有什么方法可以保持嵌套滚动视图中的状态吗?

0 投票
1 回答
170 浏览

flutter - 在 Flutter 中滚动时如何在 SliverAppBar 中固定 TextField?

SliverAppBar 包含文本字段搜索框,但滚动时会向上滚动。如何在滚动时显示搜索框。我做了我自己的工作,但没有工作。如果有任何关于 Sliverappbar 和 Slivergrid 的资源,它也很有用。但是现在如何固定 appbar 文本字段?