有一个关于颤动的CustomScrollView
的问题
我现在拥有的是:
@override
Widget build(BuildContext context) {
return Container(
child: CustomScrollView(
shrinkWrap: true,
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(0),
sliver: SliverList(
delegate: SliverChildListDelegate(
<Widget>[
Card(),
Card(),
Container(
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
),
)
],
),
),
),
],
),
);
}
*代码被简化,因为它是一个例子。
正如你所看到的,里面有2个Cards()
和一个带Container
的ListView
。两张卡都有固定的高度,带有列表的容器有动态高度。它现在如何工作:随着ListView的成长,我们可以滚动到列表的底部。所以通常两个Card
小部件变得不可见,因为List
的元素占据了所有的屏幕。
这个想法是强迫第二个Card()
固定在屏幕的顶部。所以基本上它应该在它自己的位置,但随着越来越多的滚动它应该固定在屏幕的顶部,而我滚动列表越来越多。问题是我该怎么做这样的事情?
谢谢!
你可以使用SliverPersistentHeader
,我为你准备了这个样本:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text("index: $index"),
);
},
childCount: 3,
)),
),
SliverPersistentHeader(
pinned: true,
delegate: PersistentHeader("Card 1"),
),
SliverPersistentHeader(
pinned: true,
delegate: PersistentHeader("Card 2"),
),
SliverPadding(
padding: EdgeInsets.all(0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
title: Text("index: $index"),
);
})),
),
],
),
),
);
}
}
class PersistentHeader extends SliverPersistentHeaderDelegate {
final String title;
PersistentHeader(this.title);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
color: Colors.white,
child: Card(
color: Colors.white,
elevation: 7.0,
child: SizedBox(height: 100.0, child: Center(child: Text(title))),
),
);
}
@override
double get maxExtent => 100.0;
@override
double get minExtent => 100.0;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}
更多信息:https://docs.flutter.io/flutter/widgets/SliverPersistentHeader-class.html