这两个代码是在这里提出的工作正常,但我无法理解是怎么回事。
Scaffold(
appBar: AppBar(
backgroundColor: Colors.yellow,
title: const Text('Flutter Demo Click Counter'),
),
body: Container(
color: Colors.red,
child: Column(
children: [Text("hello")],
),
),
);
字符串
这有一个输出,其中整个垂直高度是由column()
小部件,它有一个红色的背景在后面,这是容器的颜色。在这里,我的理解是,由于mainAxisSize:MainAxisSize.max
是column()
的默认属性,所以它采取了100%的垂直轴空间与宽度的child
。但对于这部分代码:
Scaffold(
appBar: AppBar(
backgroundColor: Colors.yellow,
title: const Text('Flutter Demo Click Counter'),
),
body: Container(
color: Colors.red,
child: Column(
children: [Text("parent column"),
Container(
color:Colors.blue,
child: const Column(children: [Text("child column ")]),)],
),
),
);
型
这是输出2:这里是父column()
占用整个垂直高度100%,但内部column()
没有这样做,蓝色只在它的文本周围,它没有占用100%的高度(一旦你运行这两个代码,你会清楚地理解)。内部Column()
只占用空白空间来 Package 它唯一的孩子,就好像内部列的mainAxisSize
属性被设置为最小值一样。为什么会出现这种行为?
那么为什么这里有两个列的行为,虽然mainAxisSize
属性默认设置为MainAxisSize.max
,但它们显示的字符仍然是不同的。请详细解释,我很乐意阅读所有的评论。
1条答案
按热度按时间ehxuflar1#
一个列可以占用所有的空间,并将所有的mainAxis空间提供给它的子列。如果直接嵌套这些子列,会出现可怕的“无限内无限”错误。一个快速的解决方案是用Expanded Package 内部列,这将限制内部空间仅包含可用的空间。
编辑:内列中的任何东西也必须符合无限空间。在我的测试中,我最终得到了
Column > Expanded > Column > Expanded > Placeholder
,它似乎符合得很好。