Question

我想将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,
        ),
      ],
    )));

}

如何将电子邮件和密码文本字段居中放置在主容器中？

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

Answer 1

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

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

Answer 2

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

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

Answer 3

希望它对你有用。

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',
        ),
      ),
    )

Answer 4

编辑：将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内，我才能将其居中。

Answer 5

alignment小部件中有一个属性container，该属性值用于设置Container小部件中要对齐的内容。

Container(
  alignment: Alignment.center,
  child: {your child Widget here},
),

如何在容器内部居中放置TextField？

5 个答案: