Flutter SliverAppBar中的堆栈式效果
我需要以某种方式将Flutter SliverAppBar中的堆栈式效果,flutter,dart,Flutter,Dart,我需要以某种方式将ClipRRect从SliverToBoxAdapter向上移动,使其堆叠在顶部Hero的底部。我不知道如何在滑动应用栏中执行此操作 slivers: <Widget>[ SliverAppBar( expandedHeight: 300, backgroundColor: Color(0xff151825), elevation: 0, iconTh
ClipRRect
从SliverToBoxAdapter
向上移动,使其堆叠在顶部Hero
的底部。我不知道如何在滑动应用栏中执行此操作
slivers: <Widget>[
SliverAppBar(
expandedHeight: 300,
backgroundColor: Color(0xff151825),
elevation: 0,
iconTheme: IconThemeData(color: Theme.of(context).primaryColor),
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.parallax,
background: Hero(
tag: 'location-name',
child: ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xff151825), Colors.transparent],
).createShader(
Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: Image.network(
'https://placeimg.com/640/480/any',
height: 350,
fit: BoxFit.cover,
),
),
),
),
),
SliverToBoxAdapter(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.center,
child: ClipRRect(
borderRadius: BorderRadius.circular(90.0),
child: Image.network(
"https:...",
height: 100.0,
width: 100.0,
),
),
),
],
),
),
],
),
),
],
条子:[
滑杆(
扩展高度:300,
背景颜色:颜色(0xff151825),
海拔:0,
iconTheme:IconThemeData(颜色:Theme.of(context.primaryColor)),
flexibleSpace:FlexibleSpaceBar(
collapseMode:collapseMode.视差,
背景:英雄(
标记:“位置名称”,
孩子:沙德尔马斯克(
着色器回调:(rect){
返回线半径(
开始:Alignment.topCenter,
结束:对齐。底部中心,
颜色:[颜色(0xff151825),颜色.透明],
).createShader(
矩形从LTRB(0,0,矩形宽度,矩形高度));
},
blendMode:blendMode.dstIn,
孩子:Image.network(
'https://placeimg.com/640/480/any',
身高:350,
适合:BoxFit.cover,
),
),
),
),
),
滑动双轴适配器(
孩子:排(
crossAxisAlignment:crossAxisAlignment.center,
儿童:[
扩大(
子:列(
mainAxisAlignment:mainAxisAlignment.start,
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
容器(
对齐:对齐.center,
孩子:ClipRRect(
边界半径:边界半径。圆形(90.0),
孩子:Image.network(
“https:…”,
高度:100.0,
宽度:100.0,
),
),
),
],
),
),
],
),
),
],
我设法这样改变了它
background: Hero(
tag: 'location-name',
child: Stack(
children: [
ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xff151825), Colors.transparent],
).createShader(
Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: Image.network(
'https://placeimg.com/640/480/any',
height: 350,
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomCenter,
child: ClipRRect(
borderRadius: BorderRadius.circular(90.0),
child: Image.network(
"https:...",
height: 130.0,
width: 130.0,
),
),
)
],
),
),