gpt4 book ai didi

flutter - SliverAppBar 不在 AppBar 中淡入淡出

转载 作者:行者123 更新时间:2023-12-04 10:20:43 27 4
gpt4 key购买 nike

我真的很喜欢使用 Sliver,但 SliverAppBar 确实有问题:通常,我使用 SliverAppBar 小部件来创建一个 AppBar,该 AppBar 具有带视差效​​果的背景图像。所以我只使用灵活的空间,不幸的是,每当您向下滚动时,它就会被 AppBar 部分挡住。我尝试通过将颜色值设置为透明来使 AppBar 部分透明,但它所做的只是使整个事物(包括灵活空间)变得透明。

有没有办法在向下滚动时只使用 SliverAppBar 的灵活空间而不在 AppBar 部分淡出?

这是我使用的代码:

SliverAppBar(
expandedHeight: 220,
pinned: false,
forceElevated: true,
backgroundColor: Colors.transparent,
stretch: true,
leading: Container(),
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background:Stack(
children: <Widget>[
Image(
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
image: AssetImage('assets/images/image2.png'),
),
Positioned(
bottom: 0,
child: Container(
height: 110,
width: MediaQuery.of(context).size.width,
color: Colors.grey,
),
),
Positioned(
bottom: 10,
left: 10,
child: CircleAvatar(
radius: 45,
backgroundImage: AssetImage('assets/images/image.png'),
),
),
Positioned(
bottom: 77,
left: 110,
child: Container(
width: MediaQuery.of(context).size.width -110 -60,

child: Text(
'Name...',
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize: 20,
color: Colors.white
),
),
),
),
Positioned(
bottom: 63,
left: 110,
child: Container(
width: MediaQuery.of(context).size.width -110 -60,

child: Text(
'description...',
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize: 14,
color: Colors.white70
),
),
),
),

Positioned(
bottom: 5,
left: 110,
child: Container(
width: MediaQuery.of(context).size.width-110,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,

children: <Widget>[

],
),
),
),

],
),
),

),

希望这些图片有助于解释我的问题:灵活空间如下所示:Image 1但是一旦向下滚动,灵活的空间就会消失,如下图所示:Image 2我不想让弹性空间消失。

最佳答案

您可能已经找到了答案,但我想如果像我这样的人遇到您的问题,这可能就是您正在寻找的答案。

FlexibleSpaceBar 包含淡出动画,排除它的唯一方法是编写自己的 LayoutBuilder 来处理折叠。

这是一个代码示例,说明如何使用 LayoutBuilder 创建自定义 flexibleSpace 小部件。

NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
titleSpacing: 0,
pinned: false,
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
elevation: 0.0,
actions: [
IconButton(
splashRadius: 20,
icon: Icon(
FontAwesomeIcons.cog,
color: Colors.grey[200],
),
onPressed: () {

},
),
],
toolbarHeight: kToolbarHeight,
expandedHeight: maxExtent,
flexibleSpace: LayoutBuilder(
builder: (context, constraints) {
double currentExtent = constraints.maxHeight;
final double deltaExtent = maxExtent - minExtent;
// 0.0 -> Expanded
// 1.0 -> Collapsed to toolbar
final double t =
(1.0 - (currentExtent - minExtent) / deltaExtent)
.clamp(0.0, 1.0) as double;

return Stack(
fit: StackFit.loose,
overflow: Overflow.clip,
children: [
Positioned(
top: _getCollapsePadding(t),
left: 0.0,
right: 0.0,
height: maxExtent,
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.start,
children: [
//Insert Widgets add to your flexible space
],
),
),
],
);
},
),
),
];
},
body: Container()
),

double get maxExtent => 300;
double get minExtent => kToolbarHeight;

double _getCollapsePadding(double t) {
final double deltaExtent = maxExtent - minExtent;
return -Tween<double>(begin: 0.0, end: deltaExtent / 4).transform(t);
}

关于flutter - SliverAppBar 不在 AppBar 中淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60869962/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com