listview - 如何删除 Flutter ListView 中的剪辑?
问题描述
我有以下布局, a下面Stack
有 a ListView
,都在 a 内Column
。
当我滚动时ListView
,正如预期的那样,它会在自己的框中自行剪辑。
我想要ListView
, 滚动时向上移动并越过Stack
上方。就像它没有被剪裁在它的边界上一样。
我怎样才能做到这一点?
解决方案
您将需要一个CustomScrollView
,并且您的标题小部件必须放在SliverPersistentHeader
:
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverPersistentHeader(
delegate: MyHeader(),
pinned: true,
),
SliverList(delegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
title: Text('Test $index'),
);
}))
],
),
);
}
}
class MyHeader extends SliverPersistentHeaderDelegate {
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Stack(
children: <Widget>[
Container(color: Colors.blue.withOpacity(0.5)),
Align(
alignment: Alignment.bottomCenter,
child: Text('Hello World'),
)
],
);
}
@override
double get maxExtent => 100.0;
@override
double get minExtent => 100.0;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}
要创建浮动AppBar
,请使用SliverAppBar
小部件:
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Flutter Playground'),
pinned: true,
backgroundColor: Colors.orange.withOpacity(0.5),
),
SliverList(delegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
title: Text('Test $index'),
);
}))
],
),
);
}
}
推荐阅读
- python - 将列值的第一行转换为标题或转行并将它们转换为标题
- python - 在 django 管理命令中异步运行函数
- javascript - HTML
- cordova - 如何在cordova插件中包含多个包的java代码?
- excel - 如果在 vb.Net 中满足条件,则更改 Excel 范围中的行颜色
- javascript - 将数组中的对象推送到 useState 数组
- python - 使用 R 或 Python 定义 Jenkins 计划构建
- python - pyparsing 异常说明:需要更准确的错误位置信息
- python - 从txt文件中获取最后10行并排序
- ansible - Playbook 无法从角色内的循环变量中找到“{{ item }}”