本文介绍了我如何将卡片放入Sliver应用栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我做了一个sliverappbar,我想在该sliverappbar上放一张卡片。我如何将卡放在sliverappbar上,而这张卡却随着sliverappbar折叠?
i make a sliverappbar, and i want to put a card over this sliverappbar. How can i put a card over the sliverappbar and this card collapse with the sliverappbar?
该卡应在appbar中停留一半,在身体中停留一半
The card should stay half in appbar and half in the 'body'
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 100.0,
floating: true,
snap: true,
backgroundColor: Colors.green,
elevation: 0.0,
flexibleSpace: FlexibleSpaceBar(
title: const Text(
"test",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 60.0,
color: Colors.black,
)
],
)
],
)
),
SliverFillRemaining(
child: new Text("data"),
)
],
),
推荐答案
您可以使用 SliverPersistentHeaderDelegate
和 Stack
小部件,检查我的示例:
You can do it using SliverPersistentHeaderDelegate
and Stack
widget, check my sample :
class PlayingSliversState extends State<PlayingSlivers> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CustomScrollView(
slivers: <Widget>[
SliverPersistentHeader(
pinned: true,
floating: true,
delegate: CustomSliverDelegate(
expandedHeight: 120,
),
),
SliverFillRemaining(
child: Center(
child: Text("data"),
),
),
],
),
),
);
}
}
class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
final double expandedHeight;
final bool hideTitleWhenExpanded;
CustomSliverDelegate({
@required this.expandedHeight,
this.hideTitleWhenExpanded = true,
});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
final appBarSize = expandedHeight - shrinkOffset;
final cardTopPosition = expandedHeight / 2 - shrinkOffset;
final proportion = 2 - (expandedHeight / appBarSize);
final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
return SizedBox(
height: expandedHeight + expandedHeight / 2,
child: Stack(
children: [
SizedBox(
height: appBarSize < kToolbarHeight ? kToolbarHeight : appBarSize,
child: AppBar(
backgroundColor: Colors.green,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
elevation: 0.0,
title: Opacity(
opacity: hideTitleWhenExpanded ? 1.0 - percent : 1.0,
child: Text("Test")),
),
),
Positioned(
left: 0.0,
right: 0.0,
top: cardTopPosition > 0 ? cardTopPosition : 0,
bottom: 0.0,
child: Opacity(
opacity: percent,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 30 * percent),
child: Card(
elevation: 20.0,
child: Center(
child: Text("Header"),
),
),
),
),
),
],
),
);
}
@override
double get maxExtent => expandedHeight + expandedHeight / 2;
@override
double get minExtent => kToolbarHeight;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}
结果:
这篇关于我如何将卡片放入Sliver应用栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!