有一个关于 flutter 的问题 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(),
),
)
],
),
),
),
],
),
);
}
*代码被简化,因为它是一个例子。
正如你可以看到有2Cards()
和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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句