flutter - Flutter - 带有 CupertinoSliverNavigationBar 的 ScrollController,largeTitle 到 smallTitle 不起作用
问题描述
当我在 ListView 中使用 ScrollController 时,它会阻止 CupertinoSliverNavigationBar largeTitle 转换为 smallTitle。但是,如果我删除滚动控制器,问题就会消失。我认为这可能是库比蒂诺图书馆的一个错误
此代码演示了该问题:
ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text('Large Title'),
),
];
},
body: ListView.builder(
controller: scrollController,
itemCount: 50,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
child: Center(child: Text('Entry ${index}')),
);
}),
),
);
}
现在,如果我删除 scrollController,问题就消失了:
ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text('Large Title'),
),
];
},
body: ListView.builder(
//controller: scrollController,
itemCount: 50,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
child: Center(child: Text('Entry ${index}')),
);
}),
),
);
}
解决方案
这是一种预期的行为,因为NestedScrollView
它旨在管理所有其他子滚动视图的滚动位置:
NestedScrollView 类
一个滚动视图,其中可以嵌套其他滚动视图,它们的滚动位置是内在链接的。
因此,您无法使用个人控制其子视图的位置ScrollController
。但是,您可以提供一个NestedScrollView
来一次性管理所有内容。
通知监听器
除了使用ScrollController
. 您可以ListView
了解NotificationListener
并检查它提供的滚动信息。
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text('Large Title'),
),
];
},
body: NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification scrollInfo) {
if (scrollInfo.metrics.pixels ==
scrollInfo.metrics.maxScrollExtent) {
print('Reached the bottom');
}
return;
},
child: ListView.builder(
itemCount: 50,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
child: Center(child: Material(child: Text('Entry $index'))),
);
},
),
),
),
);
}
推荐阅读
- html - 我不知道为什么我的标题和描述之间有这么大的空白
- c# - Lazy 的二进制序列化
.net 核心中的对象 - c# - 上传到ftp C#时文件名中的西里尔字母
- reactjs - 使用反应测试库和触发函数模拟子组件
- javascript - 在 ReactJS 中保存大型表的理想数据结构
- laravel - 如何加快本地 PHP 开发?
- gitlab - Unauthorized error when using GitLab Private Token to call GitLab endpoint
- sql - SQL 时间到文本
- python - 将文件保存到输出文件夹,如果它不存在则创建它
- javascript - 为什么即使它适用于 Postman,它也不能成功发布我的数据?