如何使容器在颤振中垂直居中？

Question

我正在开发一个扑扑的项目。我有一个如下界面，

现在，它水平居中。现在我也要垂直居中。我尝试使用 mainAxisAlignment：MainAxisAlignment.center和crossAxisAlignment：CrossAxisAlignment.center ，但UI中没有任何变化（仍如上图所示）。以下是我的实现。有人可以告诉我在这里我需要做什么更改吗？

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:pan_asia_bank_app/widgets/NavDrawer.dart';

class ChangePassword extends StatelessWidget{

   Widget _inputField(String title, Color border) {
    return TextField(
      decoration: InputDecoration(
        hintText: title,
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
      ),
    );
  }

  Widget _buttons(name, BuildContext context){
    return Center(
        child: ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ButtonTheme(
                minWidth: 200,
                child:RaisedButton(
                  child: new Text(name),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                      side: BorderSide(color: Colors.red)
                  ),
                  color: Colors.red,
                  textColor: Colors.white,
                  onPressed: (){},
                )
            ),
          ],
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        drawer: NavDrawer(),
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Image.asset("assets/logo.png", fit: BoxFit.cover),
        ),
        body: Column(
          children: [
            Container(
                margin: const EdgeInsets.only(top: 10),
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      Container(
                        alignment: Alignment.topLeft,
                        margin: const EdgeInsets.only(left: 15, top: 20, bottom: 20),
                        child: HtmlWidget("""<h2 style='color:red;'>Change Password</h2>"""),
                      ),
                      Container(

                        child:
                          Column(
                            //mainAxisAlignment: MainAxisAlignment.center,  <------ did not worked for me
                            //crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: _inputField('Current Password', Colors.grey),
                              ),
                              Container(
                                alignment: Alignment.center,
                                child: _inputField('New Password', Colors.grey),
                              ),
                              Container(
                                alignment: Alignment.center,
                                child: _inputField('Re - New Password', Colors.grey),
                              ),
                              Container(
                                  child: _buttons('Change Password', context)
                              ),
                            ],
                          )
                      )



                    ],
                  ),
                )
            )
          ],
        )
    );
  }

}

Answer 1

在ListView的顶部添加shrinkWrap: true

body: Center(
          child: ListView(
            shrinkWrap: true,
            // Rest code....

输出：

Answer 2

我可以给你个主意。

尝试为父Container设置约束，以便它可以确定对齐方式。

 Container(
           width: MediaQuery.of(context).size.width, // Full Width of Screen
           height: 800.0, // Desired Height
           child:
              Column( mainAxisAlignment: MainAxisAlignment.center, children: [])
    )   

Answer 3

您添加了太多列。这是解决方案的完整代码。

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
    import 'package:pan_asia_bank_app/widgets/NavDrawer.dart';
    
    class ChangePassword extends StatelessWidget {
      Widget _inputField(String title, Color border) {
        return TextField(
          decoration: InputDecoration(
            hintText: title,
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: border),
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: border),
            ),
            border: UnderlineInputBorder(
              borderSide: BorderSide(color: border),
            ),
          ),
        );
      }
    
      Widget _buttons(name, BuildContext context) {
        return Center(
            child: ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ButtonTheme(
                minWidth: 200,
                child: RaisedButton(
                  child: new Text(name),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                      side: BorderSide(color: Colors.red)),
                  color: Colors.red,
                  textColor: Colors.white,
                  onPressed: () {},
                )),
          ],
        ));
      }
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            drawer: NavDrawer(),
            appBar: AppBar(
              title: Image.asset("assets/logo.png", fit: BoxFit.cover),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  margin: const EdgeInsets.only(left: 15, top: 20, bottom: 20),
                  child:
                      HtmlWidget("""<h2 style='color:red;'>Change Password</h2>"""),
                ),
                Container(
                    margin: const EdgeInsets.only(top: 10),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                    child: SingleChildScrollView(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Container(
                              child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Container(
                                alignment: Alignment.center,
                                child: _inputField('Current Password', Colors.grey),
                              ),
                              Container(
                                alignment: Alignment.center,
                                child: _inputField('New Password', Colors.grey),
                              ),
                              Container(
                                alignment: Alignment.center,
                                child:
                                    _inputField('Re - New Password', Colors.grey),
                              ),
                              Container(
                                  child: _buttons('Change Password', context)),
                            ],
                          ))
                        ],
                      ),
                    )),
                SizedBox(
                  height: 10,
                )
              ],
            ));
      }
    }