在我的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)
发布于 2018-05-28 10:35:36
我今天遇到了这个bug -我在beta分支上,但是切换到master并重新构建并没有解决这个问题。似乎当ListView的位置相对于顶部的偏移量为0时,即当Android上出现“不再滚动”动画时(而不是iOS上的spring动作),无论出于什么原因,磁贴都会溢出列表视图的容器。希望他们能尽快修补它!我试过把它包装在Flex容器和合适的盒子里,用层覆盖溢出的地方,等等,都不起作用。抱歉,我帮不上更多的忙!
发布于 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,
),
),
],
),
),
],
),
);
}
}
https://stackoverflow.com/questions/50516141
复制相似问题