Question

我正在重新编写一个计算平均值的简单应用。但是，我很难使用TextField。我希望它与第一个屏幕截图完全一样。

TextField的宽度被拉伸了，我不想要那样。我希望它与屏幕截图完全一样。

所需外观：

我所拥有的：

代码：

setorder(dt, timestamp)

Answer 1

这将帮助您在所有设备上设置通用宽度，因此这里width * 0.3表示它将占用屏幕宽度的30％

 Container(
          width: MediaQuery.of(context).size.width * 0.3,
          child: TextField(),
        )

Answer 2

使用“行”小部件，并将“扩展的部件”作为子部件，并在其中放置部件，因为“扩展”将占用相等的空间。

return Row(
  children: [
    Expanded(
       child: TextField();
    ),
    Expanded(
       child: Button();
    )
  ],
);

Answer 3

任何时候您都可以使用高度和宽度来玩，可以使用小部件容器。如果要使用在小部件中找不到的属性，则可以使用带有该属性的小部件将其包装起来对您有所帮助。 / p>

Container(
  margin: const EdgeInsets.only(right: 150),
  child: new TextField(
  decoration: new InputDecoration(
    hintText: 'Grade',
   )
  )
 )

Answer 4

您可以尝试使用两个Flexible窗口小部件包装TextField和Button并应用所需的比例，例如1：2将为您带来以下结果：

                Row(
                  children: [
                    Flexible(
                      flex: 1,
                      child: TextField(),
                    ),
                    Flexible(
                      flex: 2,
                      child: RaisedButton(
                          child: Text('Hello'), onPressed: () {}),
                    )
                  ],
                )
              ],

您还可以将第一个Flexible替换为SizedBox并设置一个精确值，例如：

                Row(
                  children: [
                    SizedBox(
                      width: 100.0,
                      child: TextField(),
                    ),
                    Flexible(
                      flex: 2,
                      child: RaisedButton(
                          child: Text('Hello'), onPressed: () {}),
                    )
                  ],
                )
              ],

TextField没有固有的大小（宽度）约束，因此它将始终尝试占据所有水平空间。灵活允许将其限制为所需的行宽度。

完整示例on DartPad。

如何调整TextField的宽度？

4 个答案: