如何使用 Flutter 将表单居中对齐？

Question

我有一个用 Flutter 编写的程序，我想将表单居中放置在屏幕中间，但我做不到。 我尝试使用 Align，但我认为我没有正确使用它！ 有人可以帮助我吗？谢谢

class _Defini extends State<Definicoes> {

  GlobalKey<FormState> _formkey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar:
        ...

      body: Container(
        color: Colors.amber.withOpacity(0.80),
    child: Align(
    alignment: Alignment(0, 0),
        child: Form(
          key: _formkey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                        width: 300,
                        height: 300,
                        child: TextFormField(
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                              labelText: "RaspberryPi",
                              labelStyle: TextStyle(color: Colors.white)),
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.white, fontSize: 25.0),
                          validator: (value) {
                            if (value.isEmpty){
                              return "Insira";
                            }
                          },
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                             ...
                            ),
                          ],
                        ),
                        child: FlatButton(
                          color: Colors.white,
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding: EdgeInsets.all(8.0),
                          splashColor: Colors.blueAccent,
                          onPressed: () {
                            if(_formkey.currentState.validate()){

                            }
                          },
                          child: Text(
                            "Ligar",
                          ),
                ),
              ),
            ],
          ),
        ),
      ),
      ),
    );
  }
}

Answer 1

Align 如果你只有一个 child.

要使 Form 位于中心，请将列的 mainAxisAlignment 属性 设置为 MainAxisAlignment.center

检查下面的代码：

class _Defini extends State<Definicoes> {

  GlobalKey<FormState> _formkey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar:
        ...

      body: Container(
        color: Colors.amber.withOpacity(0.80),
    child: Form(
          key: _formkey,
          child: Column(
            // set the mainAxisAlignment property here
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                        width: 300,
                        height: 300,
                        child: TextFormField(
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                              labelText: "RaspberryPi",
                              labelStyle: TextStyle(color: Colors.white)),
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.white, fontSize: 25.0),
                          validator: (value) {
                            if (value.isEmpty){
                              return "Insira";
                            }
                          },
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                             ...
                            ),
                          ],
                        ),
                        child: FlatButton(
                          color: Colors.white,
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding: EdgeInsets.all(8.0),
                          splashColor: Colors.blueAccent,
                          onPressed: () {
                            if(_formkey.currentState.validate()){

                            }
                          },
                          child: Text(
                            "Ligar",
                          ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}