flutter - 确定滚动小部件高度
问题描述
我想确定“可滚动”小部件是否确实需要滚动。我最终想展示类似“Scroll for more”之类的东西。我如何实现这一目标?
我可以使用 LayoutBuilder 和 ScrollController 的组合。但是,ScrollController 仅在发生任何事件后才给我 maxScrollExtent 和 minScrollExtent - 例如用户尝试滚动
我想在“构建”期间知道,以便我可以根据屏幕尺寸确定是否显示“滚动更多”
class _MyHomePageState extends State<MyHomePage> {
int value = 0;
String text = 'You have pushed the button 0 times\n';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 9,
child: SingleChildScrollView(
child: Text(text),
),
),
Expanded(
flex: 1,
child: Text('Scroll for more')),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
value += 1;
text = text + 'You have pushed the button $value times \n';
});
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
我想动态显示
Text('Scroll for more'),
仅当 SingleChildScrollView 需要滚动以查看整个内容时。请注意,我只是以上面的代码为例。
在我的真实案例中,我在 SingleChildScrollView 中有一个 StreamBuilder,我无法确定有多少数据将从流中流入。我也没有任何按钮或点击或任何手势来访问控制器和 setState
提前感谢您的帮助
解决方案
class _MyHomePageState extends State<MyHomePage> {
bool showMore = false;
final scrollController = ScrollController();
@override
Widget build(BuildContext context) {
SchedulerBinding.instance.addPostFrameCallback((_) {
setState(() {
showMore = scrollController.position.maxScrollExtent > 0;
});
});
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 9,
child: SingleChildScrollView(
controller: scrollController,
child: SizedBox(height: 650, child: Text('blah')),
),
),
if (showMore) Expanded(flex: 1, child: Text('Scroll for more')),
],
),
),
);
}
}
推荐阅读
- javascript - Uncaught SyntaxError: Unexpected token < in ejs
- python - PyCharm 在我开始输入时崩溃
- ios - 如何在 UIScrollView 中使 UIImage 可滚动?
- c++ - 在保持多态性的同时,我应该如何正确使用 unique_ptrs 向量?
- c# - 即使 POCO 具有从 xsd2code++ 工具生成的正确 xml 属性,XML 反序列化也会返回空数组
- android - iTextPdf:从 PrintJob 中提取文本
- media-queries - 如何区分 Iphone x 媒体查询与 Iphone 6、7、8 plus?
- python - 如何在使用 Pandas 保持数据框形状相同的同时删除丢失的数据和 0?
- python-3.x - 如何计算或绘制 CNN 中每个类的误差?
- google-cloud-dataflow - 如何在 Apache Beam 管道中记录传入消息