如何在一行内扩展容器?

Question

我有以下代码:

return Scaffold(
body: SafeArea(
child: ListView(children: [
Container(
child: Center(
child: Row(children: [
Flexible(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
decoration: BoxDecoration(color: Colors.white),
child: Row(children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Colors.black38),
),
Expanded(   // <- does nothing. container still 0x0px
child: Container(
decoration: BoxDecoration(color: Colors.black38),
)),
]),
))
])))
]),
));

我试图将第三个容器扩展到它所在的Row的剩余大小，但不知何故，它总是保持0x0像素的大小，直到我通过使用height:或/和width:定义手动大小。

谢谢你的帮助!

Answer 1

我可能错了，但我认为它实际上不是0 x 0，而是[剩余宽度]x 0。你会看到，只要添加一个高度就会使它可见。另外，当你在行中放置第三个小部件时，你会看到它将被一直推到右边。

事情是，据我所知，一个Row期望它的孩子提供一个高度。否则它就不知道它需要多高。你希望扩展到多高?和另一个集装箱一样吗?屏幕的全部高度?如果Row中的小部件没有提供高度，它将被尽可能地变小，所以在这种情况下，是不可见的。

可能有帮助的是像这样在IntrinsicHeight中包装行:

return Scaffold(
body: SafeArea(
child: ListView(children: [
Container(
child: Center(
child: Row(children: [
Flexible(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
decoration: BoxDecoration(color: Colors.white),
child: IntrinsicHeight(child: Row(children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Colors.black38),
),
Expanded(   // <- does nothing. container still 0x0px
child: Container(
decoration: BoxDecoration(color: Colors.black38),
)),
]),
)))
])))
]),
));

Answer 2

try this

Container(
child: Center(
child: Row(children: [
Flexible(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
decoration: BoxDecoration(color: Colors.white),
child: Row(children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Colors.black38),
),
Expanded(
child: Container(
height: 20,
decoration: BoxDecoration(color: Colors.pink),
),
),
]),
))
]))),