ListView在列表顶部时与元素重叠
ListView在列表顶部时与元素重叠
提问于 2018-05-25 02:42:52
在我的Flutter应用中使用ListView时，我遇到了一个奇怪的视觉故障。我已经在最小的代码中重现了这个问题(如下所示)。
当列表滚动到顶部时，列表将与其下面的元素重叠。只要我向下滚动一点，列表就会遵守它所在的Expanded元素的边界，重叠的部分就会停止。
上面的左图显示了这个缺陷。请注意这些元素是如何重叠红色区域的。右边的图片显示了这种情况，我滚动了一下，现在我们可以看到红色区域上方出现了正确的空间。
是我做错了什么，还是这里有个bug？
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new ExampleWidget()));
}
class ExampleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new AspectRatio(
child: new Container(
height: MediaQuery.of(context).size.width,
),
aspectRatio: 1.0,
),
new Expanded(
child: new ListView(
children: <Widget>[
new Card(child: new ListTile(title: new Text("a"))),
new Card(child: new ListTile(title: new Text("b"))),
new Card(child: new ListTile(title: new Text("c"))),
new Card(child: new ListTile(title: new Text("d"))),
new Card(child: new ListTile(title: new Text("e"))),
],
),
flex: 10,
),
new Expanded(child: new Container(), flex: 3),
new Container(
height: 60.0,
color: Colors.red,
),
new Expanded(child: new Container(), flex: 2),
],
);
}
}当我在手机上运行应用程序时，也会出现这个问题。
Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale en-GB)
回答 2
Stack Overflow用户
发布于 2018-05-28 10:35:36
我今天遇到了这个bug -我在beta分支上，但是切换到master并重新构建并没有解决这个问题。似乎当ListView的位置相对于顶部的偏移量为0时，即当Android上出现“不再滚动”动画时(而不是iOS上的spring动作)，无论出于什么原因，磁贴都会溢出列表视图的容器。希望他们能尽快修补它！我试过把它包装在Flex容器和合适的盒子里，用层覆盖溢出的地方，等等，都不起作用。抱歉，我帮不上更多的忙！
Stack Overflow用户
发布于 2018-05-25 17:14:22
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new ExampleWidget()));
}
class ExampleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Column(
children: <Widget>[
new Expanded(child: new Container(),),
new Expanded(
child: Column(
children: <Widget>[
new Expanded(
flex: 10,
child: new ListView(
children: <Widget>[
new Card(child: new ListTile(title: new Text("a"))),
new Card(child: new ListTile(title: new Text("b"))),
new Card(child: new ListTile(title: new Text("c"))),
new Card(child: new ListTile(title: new Text("d"))),
new Card(child: new ListTile(title: new Text("e"))),
],
),
),
new Expanded(
flex: 2,
child: new Container(
color: Colors.red,
),
),
],
),
),
],
),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50516141
复制相关文章
相似问题