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

用户名

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

在此处输入图片说明

现在,它水平居中。现在我也要垂直居中。我尝试使用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)
                              ),
                            ],
                          )
                      )



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

}
萨利姆埋怨

在此处输入图片说明您添加了太多列。因此,这是解决方案的完整代码。


    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,
                )
              ],
            ));
      }
    }
    

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何制作一个UIImageView,以编程方式在带有约束的容器中垂直居中

来自分类Dev

如何在振颤中从List <int>再现音频?

来自分类Dev

如何计算颤振中的字符串列表的总和?

来自分类Dev

如何比较颤振中的时间?

来自分类Dev

颤振-垂直对齐按钮

来自分类Dev

颤振折叠容器

来自分类Dev

颤振如何处理异步/等待中的错误

来自分类Dev

如何在颤振中实现共面卡布局

来自分类Dev

颤振:容器内的垂直滚动

来自分类Dev

如何在颤振中实现这个下拉容器?

来自分类Dev

如何在颤振中不丢失更新的变量?

来自分类Dev

颤振平滑的颜色过渡容器

来自分类Dev

如何在颤振中绘制不同高度的垂直线?

来自分类Dev

容器中的颤振盒装饰

来自分类Dev

颤振不会在容器中着色

来自分类Dev

如何在颤振中达到这种形状?

来自分类Dev

颤振容器在行顶部

来自分类Dev

颤振容器消失

来自分类Dev

颤振底部容器向上滑动

来自分类Dev

颤振如何使容器扩展到最大高度

来自分类Dev

如何在颤振中显示2位整数

来自分类Dev

颤振:容器颜色溢出边框

来自分类Dev

颤振中的问题

来自分类Dev

MaterialButton内部的颤振容器宽度

来自分类Dev

如何正确固定颤振中的行距

来自分类Dev

如何在框/容器中水平和垂直居中对齐文本?

来自分类Dev

如何在颤振中管理状态?

来自分类Dev

哪个动画适合颤振中的可扩展容器?

来自分类Dev

如何在颤振中绘制扇区?