我制作了一个 sliverappbar,我想在这个 sliverappbar 上放一张卡片。如何在 sliverappbar 上放一张卡片,然后这张卡片与 sliverappbar 一起折叠?
卡片应该一半在appbar,一半在'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
小部件来做到这一点,请查看我的示例:
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;
}
}
结果:
https://stackoverflow.com/questions/55769270/