如何限制一列内多个TextField的宽度？用SizedBox包装后者不起作用

Question

这是我的树：

Scaffold(-> Column(-> Expanded(-> ListView(-> Column(-> TextFields)))));

我想将这些TextField的宽度（例如，限制为200px），但是使用SizedBox / Container / ConstrainedBox并在Column上设置width / maxWidth无效；我必须用SizedBox包裹每个单独的TextField才能使其工作-这给我的代码增加了很多不足。

有更好的方法吗？

Answer 1

如果用容器包装列并将其设置为200px，则不必再分别指定/包装TextField。

还要查看您的层次结构，扩展小部件将决定最大宽度。

Scaffold(-> Column(-> Expanded(-> ListView(-> Container(width:200 -> Column(-> TextFields))))));

body: Container(    
          width: 200,
          color: Colors.deepOrange,
          child: Column(
            children: [
              TextField(),
            ],
          ),
        ),

Answer 2

我在观看https://www.youtube.com/watch?v=XcnP3_mO_Ms时找到了答案。

“如果将AspectRatio放入Expanded之类的内容中，被其父母强迫扩张。紧密配合的小部件，例如扩展不会给孩子一个选择-苛刻。如果发生这种情况对您而言，只需在“展开的”和“AspectRatio。

[对齐方式将由扩展强制填充该区域，但是它将使其孩子要承担自己的责任。谢谢，对齐！“

我必须将Column包裹在Container中，然后将Container包裹在Align中以摆脱Expanded的影响。

Answer 3

问题是TextField没有定义的宽度，因此Column不知道如何处理它，并且Column需要知道其子元素的大小才能正确呈现它们。最好的选择是将TextField包装在：1）扩展小部件（此处的TextField将扩展为填充可用空间）2）灵活小部件，或3）最好还是将其包装在容器中，因为您已经知道想要的宽度（即200px）。