如何使ListView在flutter中可滚动

Question

这里是新手。我已经设法实现了一个只显示图像的ListView。但是ListView是不可滚动的。我尝试将其包装在SingleChildScrollView中，将物理添加到AlwaysScrollableScrollPhysics中，并尝试从布局中删除扩展小部件。我错过了什么？

布局

return Scaffold(
body: SingleChildScrollView(
child: Column(children: [
SizedBox(
height: 6,
),
StreamBuilder(
stream: ref.onValue,
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData &&
!snapshot.hasError &&
snapshot.data.snapshot.value != null) {
lists.clear();
DataSnapshot dataValues = snapshot.data.snapshot;
Map<dynamic, dynamic> values = dataValues.value as Map;
values.forEach((key, values) {
lists.add(values);
});
return new ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: lists.length,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Card(
margin: EdgeInsets.fromLTRB(2, 2, 2, 2),
elevation: 20,
child: GestureDetector(
onTap: () {
String imageurl = lists[index]["image"];
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FullScreenImageViewer(
imagurl: imageurl,
),
));
},
child: Padding(
padding: EdgeInsets.all(5),
child: Container(
width: 400,
child: Image(
image:
NetworkImage(lists[index]["image"]),
),
),
),
),
),
],
);
},
);
}

return Container();
},
),
]),
),
);

Answer 1

您可以删除single child scroll view，我认为这里的问题是因为您使用的是column，而listview没有扩展到整个屏幕。如果您想确保listview占据所有剩余空间，可以使用Flex和expanded widget。

Flex可以像column or row一样工作，这取决于您为其提供的方向。除了Expanded之外，这里放置的任何东西的行为都与放置在列或行中时完全相同，因为它们填充了剩余空间。

我在这里更改了您的代码，以适应Flex和Expanded小部件(您只需要阅读您的逻辑和流生成器即可使其工作(

return Scaffold(
body: Flex(direction: Axis.vertical, children: [
const SizedBox(
height: 6,
),
Expanded(
// Change the children to stream builder if neccesary
child: ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Card(
margin: const EdgeInsets.all(2),
elevation: 20,
child: GestureDetector(
onTap: () {
// ACTION HERE
},
child: const Padding(
padding: EdgeInsets.all(5),
child: Image(
image: NetworkImage("https://picsum.photos/200/300"),
),
),
),
),
],
);
},
),
)
]),
);

Answer 2

listView((中有一个属性告诉溢出的方向以便滚动。将其设置为

scrollDirection: Axis.horizontal