Flutter textFormfield不在中心

Question

我需要居中包装在列中的Textformfield小部件居中，尝试将crossAxisaligment居中，但不知道为什么它不能仅显示在左侧

Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width:  width * 0.9,
            child: TextFormField(
              decoration: new InputDecoration(
                labelText: "Email",
                labelStyle: TextStyle(color: Color(0xff1bb273)),
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Color(0xff1bb273), width: 2.0),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Color(0xff1bb273), width: 2.0),
                ),

                border: new OutlineInputBorder(
                  borderRadius: new BorderRadius.circular(8),
                  borderSide: new BorderSide(color: Color(0xff1bb273)),
                ),
                //fillColor: Colors.green
              ),
              validator: (val) {
                if (val.length == 0) {
                  return "Email cannot be empty";
                } else {
                  return null;
                }
              },
              keyboardType: TextInputType.emailAddress,
              style: new TextStyle(color: Color(0xff1bb273)),
            ),
          ),
        ],
      ),

如您所见，我已将容器包装在Column中。我只需要居中

Answer 1

无需为crossAxisAlignment设置Column。只需用Container将Center包裹起来即可。

Answer 2

您的列左对齐，并被孩子（容器）的宽度占据。 CrossAxisAlignment.center 使Column的子项与中心对齐。但不是专栏本身。

要使 Column 小部件居中，必须将其包装在 Center 或 Align 小部件中。

  Align(
    alignment: Alignment.center,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
      ... 

我想您打算在列中添加更多字段。因此，通过更改 Column 小部件的 Align 和 crossAxisAlignment 参数的 alignment 参数，您可以实现所需的结果