在 Flutter 中将 RaisedButton 居中

Question

我正在研究如何将这个按钮居中。

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      color: Colors.pinkAccent,
      home:new Scaffold(
        appBar: new AppBar(backgroundColor: Colors.white,),
        body: new Column(
            children: <Widget>[

               new Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.0),
              ),
              new RaisedButton(

                splashColor: Colors.pinkAccent,
                color: Colors.black,
                child: new Text("Scan",style: new TextStyle(fontSize: 20.0,color: Colors.white),),
                onPressed: scan,
              ),
              new Padding(padding: const EdgeInsets.symmetric(vertical: 10.0), ),
              new Text('$_reader',softWrap: true, style: new TextStyle(fontSize: 30.0,color: Colors.black),),

         ],
        ),
      ),
    );
  }

这是从这里：https : //pub.dartlang.org/packages/barcode_scan#-example-tab-。

请帮我解决这个问题，谢谢。

编辑：如何将所有内容都集中在“身体”中？

Answer 1

您可以使用mainAxisAlignment和crossAxisAlignment属性。或者您可以Column使用小部件包装Center小部件，但这只会使横轴居中，因为Column它扩展到它的父级，因此您也必须使用mainAxisAlignment. Column当您想要对齐/的子元素时，您还可以受益于其他元素Row，例如：

//[MainAxisAlignment][1].start
//MainAxisAlignment.center
//MainAxisAlignment.end
//MainAxisAlignment.spaceAround
//MainAxisAlignment.spaceEvenly
//MainAxisAlignment.spaceBetween
//....
//[CrossAxisAlignment][1].baseline
//CrossAxisAlignment.start
//CrossAxisAlignment.center
//CrossAxisAlignment.end
//CrossAxisAlignment.stretch

另一件事是，我看到你使用小部件来添加小部件和小部件Padding之间的边距。也只是一个像. 因此，您可以简单地使用or与 some来获得两者之间的余量。RaisedButtonTextPaddingContainerPaddingContainerSizedBoxheight

简单的例子：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    new RaisedButton(
      child: new Text("Click"),
      onPressed: (){},
    ),
    Container(height: 20.0),//SizedBox(height: 20.0),
    new Text('Hello'),
  ],
),

更新：

由于您直接添加到正文Scaffold，因此Column使用Center小部件包装并删除crossAxisAlignment. 这必须有效。

如果您尝试我的代码示例（使用Container），则不必使用Center小部件进行包装，因为我没有width为此添加Container。

Answer 2

您可以在列中传递轴对齐

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,

纵轴为纵轴，横轴为横轴。它将将此对齐应用于所有子项。

编辑：

如果您希望孩子像图片描述的那样在垂直轴上均匀分布，则可以使用Expanded.

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Barcode Scanner Example'),
          ),
          body: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(child: Container(),),
              new RaisedButton(
                splashColor: Colors.pinkAccent,
                color: Colors.black,
                child: new Text(
                  "Scan",
                  style: new TextStyle(fontSize: 20.0, color: Colors.white),
                ),
                onPressed: () {},
              ),
              new Expanded(
                child: Container(),
              ),
              new Text(
                "Reader",
                softWrap: true,
                style: new TextStyle(fontSize: 30.0, color: Colors.black),
              ),
              new Expanded(
                child: Container(),
              ),
            ],
          ),
        ));