Question

我对扑朔迷离非常陌生，我正在尝试用3个按钮实现UI。在这里，我想在垂直和水平方向上将这些按钮居中。但我无法实现

我尝试了here中给定的示例，也尝试使用了Center标签，但都没有用。我认为我在错误的位置添加了这些行，但我不知道这是否是问题所在

下面是我的实现：-

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/screens/ChangePassword.dart';
import 'package:pan_asia_bank_app/widgets/NavDrawer.dart';

class ManageAccount extends StatelessWidget{

  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: (){
                    if(name == 'Change Password'){
                      Navigator.push(context, MaterialPageRoute(builder: (context) => ChangePassword()));
                    }
                  },
                )
            ),
          ],
        )
    );
  }

  @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: Container(
            margin: const EdgeInsets.only(top: 10),
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: SingleChildScrollView(
                child: Center(
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.topLeft,
                        margin: const EdgeInsets.only(left: 15, top: 20, bottom: 20),
                        child: HtmlWidget("""<h2 style='color:red;'>Manage Account</h2>"""),
                      ),
                      Container(
//                        margin: const EdgeInsets.only(left: 25, top: 200, right: 25),
                        alignment: Alignment.center,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            _buttons('Change Username', context)
                          ],
                        ),
                      ),
                      Container(
//                        margin: const EdgeInsets.only(left: 110, top: 25, right: 25),
                        alignment: Alignment.centerLeft,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            _buttons('Change Password', context)
                          ],
                        ),
                      ),
                      Container(
//                        margin: const EdgeInsets.only(left: 110, top: 25, right: 25),
                        alignment: Alignment.centerLeft,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            _buttons('Change Contact No', context)
                          ],
                        ),
                      ),
                    ],
                  ),

                ),
            ),
        )
    );
//    Container(
//      child: Align(
//        alignment: Alignment.center,
//          _buttons()
//      ),
//    );
  }

}

要获得预期的UI，需要进行哪些更改？非常感谢您的帮助！

Answer 1

用Column小部件包装Row并在行中写入：

mainAxisAlignment: MainAxisAlignment.center

请参阅以下示例了解更多信息：

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: <Widget>[

如何在颤动中使列居中？

1 个答案: