如何在容器内居中 TextField？

Posted 2023-02-23

【中文标题】如何在容器内居中 TextField？

【英文标题】：How to center TextField inside Container?

【发布时间】：2019-09-22 15:39:13

【问题描述】：

我想将 TextField 放在 Container 内的中心，但它们是靠左对齐的。

  @override
 Widget build(BuildContext context) 
// TODO: implement build
return Scaffold(
    appBar: AppBar(
      title: Text('Login'),
    ),
    body: Container(
        child: Column(          
      children: <Widget>[
        Container(
          child: TextField(
            decoration: InputDecoration(hintText: 'Email Address'),
          ),width: MediaQuery.of(context).size.width * 0.5,
        ),
        Container(
          child: TextField(
            decoration: InputDecoration(hintText: 'Password'),
          ),
          width: MediaQuery.of(context).size.width * 0.5,
        ),
        RaisedButton(
          onPressed: () 
            print('Pressed');
          ,
          child: Text('Login'),
          textColor: Colors.white,
          color: Colors.blue,
        ),
      ],
    )));

如何将电子邮件和密码 TextField 置于主容器的中心？

编辑：我尝试使用crossAxisAlignment: CrossAxisAlignment.center，但它不起作用，尽管当我尝试mainAxisAlignment: MainAxisAlignment.center 时，它使TextFields 垂直居中。

【问题讨论】：

如果你有一个prefixIcon，设置isCollapsed为true。

【参考方案1】：

希望它对你有用。

Container(
      height: 36,
      child: TextField(
        maxLines: 1,
        style: TextStyle(fontSize: 17),
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          filled: true,
          prefixIcon:
              Icon(Icons.search, color: Theme.of(context).iconTheme.color),
          border: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(30))),
          fillColor: Theme.of(context).inputDecorationTheme.fillColor,
          contentPadding: EdgeInsets.zero,
          hintText: 'Search',
        ),
      ),
    )

【参考方案2】：

我认为你只需在 TextField 中添加 textAlign: TextAlign.center

 Container(
      child: TextField(
      textAlign: TextAlign.center,
        decoration: InputDecoration(hintText: 'Email Address'),
      ),width: MediaQuery.of(context).size.width * 0.5,
    )

【参考方案3】：

编辑：将您的每个Textfield 放入Row 小部件中，并将MainAxisAlignment.center 应用到每个小部件：

    @override
    Widget build(BuildContext context) 
      return Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child: TextField(
                      decoration: InputDecoration(hintText: 'Email Address'),
                    ),width: MediaQuery.of(context).size.width * 0.5,
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child: TextField(
                      decoration: InputDecoration(hintText: 'Password'),
                    ),width: MediaQuery.of(context).size.width * 0.5,
                  ),
                ],
              ),
              RaisedButton(
                onPressed: () 
                  print('Pressed');
                ,
                child: Text('Login'),
                textColor: Colors.white,
                color: Colors.blue,
              ),
            ],
          )));
     

我尝试实现此解决方案的其他变体，但只有将 Textfield 放在 Row 中才能使其居中。

【参考方案4】：

将crossAxisAlignment 属性赋予您的列并带有CrossAxisAlignment.center 值

Column(
   crossAxisAlignment: CrossAxisAlignment.center
.
.
.
),

【讨论】：

使用mainAxisAlignment将使所有嵌套的小部件垂直居中相反，您可以建议使用crossAxisAlignment，这也会强制按钮居中。

然后使用 align 小部件将您的按钮向左对齐

我尝试使用crossAxisAlignment，但没有将TextFields水平居中，尽管尝试mainAxisAlignment是垂直对齐TF。