嵌套列()小部件混淆/dart/flutter中的未知结果

62o28rlo  于 5个月前  发布在  Flutter
关注(0)|答案(1)|浏览(59)

这两个代码是在这里提出的工作正常,但我无法理解是怎么回事。

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.maxcolumn()的默认属性,所以它采取了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,但它们显示的字符仍然是不同的。请详细解释,我很乐意阅读所有的评论。

ehxuflar

ehxuflar1#

一个列可以占用所有的空间,并将所有的mainAxis空间提供给它的子列。如果直接嵌套这些子列,会出现可怕的“无限内无限”错误。一个快速的解决方案是用Expanded Package 内部列,这将限制内部空间仅包含可用的空间。
编辑:内列中的任何东西也必须符合无限空间。在我的测试中,我最终得到了Column > Expanded > Column > Expanded > Placeholder,它似乎符合得很好。

相关问题