将列表磁贴放在一行中

Question

我现在正在研究更多小时，但不明白为什么不可能将带有一堆ListTiles的图像和卡片放在一排中。 我得到的错误是：

在 performLayout(( 期间抛出了以下断言： BoxConstraint强制使用无限宽度。 违规约束是： BoxConstraint(w=Infinity， 0.0<=h<=Infinity(

但我真的不明白盒子里到底应该是什么，应该是带有列表瓷砖的卡片吗？ 有人可以帮助我吗？

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child:
/* card == null
? loadCards()
: ListTile() */
SingleChildScrollView(
child: Card(
child: Row(mainAxisSize: MainAxisSize.min, children: [
Image.network(
"widget.card.imageUrl",
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
),
);
},
),
Card(
child: Column(mainAxisSize: MainAxisSize.min, children: [
ListTile(
trailing: Icon(Icons.play_arrow),
title: Text("Black Lotus"),
subtitle: Text("Name"),
),
Container(
child: Row(
children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
),
),
ListTile(
title: Text("Hello"),
),
ListTile(
title: Text("Hello"),
),
]),
),
]),
),
),
),
);
}

Answer 1

你的ListTile需要约束，所以它知道它的边界在哪里。

只需给它一些约束(例如，通过用width包裹SizedBox(，或者，如果您想占用尽可能多的空间，只需使用Flex小部件(例如Flexible或Expanded(包裹每个ListTile如果您想与该Column上的所有瓷砖均匀共享空间。

Answer 2

扩展/灵活包装卡，这将解决您的约束问题， 此外，提供图像宽度也非常重要，因为在剩余空间处放置其他小部件。

return Scaffold(
appBar: AppBar(
title: Text('Sample'),
),
body: SingleChildScrollView(
child: Card(
child: Row(mainAxisSize: MainAxisSize.min, children: [
Image.network(
"https://cdn.pixabay.com/photo/2018/07/11/21/51/toast-3532016_1280.jpg",
width: 40,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
),
);
},
),
Expanded(
child: Card(
child: Column(mainAxisSize: MainAxisSize.min, children: [
ListTile(
trailing: Icon(Icons.play_arrow),
title: Text("Black Lotus"),
subtitle: Text("Name"),
),
Container(
child: Row(
children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
),
),
ListTile(
title: Text("Hello"),
),
ListTile(
title: Text("Hello"),
),
]),
),
),
]),
),
),
);