在 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

您可以在列中傳遞軸對齊

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

Answer 2

您可以使用mainAxisAlignment和crossAxisAlignment屬性。 或者，您可以使用Center小部件包裝Column小部件，但這只會使橫軸居中，因為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小部件在RaisedButton小部件和Text小部件之間添加邊距。 Padding也只是一個像Container一樣的小部件。 因此，您可以簡單地使用具有一定height Container或SizedBox來代替Padding來獲得邊距。

簡單的例子：

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主體，因此使用Center小部件包裹Column並刪除crossAxisAlignment 。 這必須工作。

如果，您嘗試我的代碼示例（使用Container ），則不必使用Center小部件進行包裝，因為我沒有為該Container添加width 。

Answer 3

您可以將 Column 包裹在一個 Center 中，並將mainAxisAlignment: MainAxisAlignment.center設置為 Column。 檢查以下代碼：

@override
Widget build(BuildContext context) {
  return new MaterialApp(
      home: new Scaffold(
    appBar: new AppBar(
      title: new Text('Barcode Scanner Example'),
    ),
    body: new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new RaisedButton(
            splashColor: Colors.pinkAccent,
            color: Colors.black,
            child: new Text(
              "Scan",
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
            ),
            onPressed: () {},
          ),
          new Padding(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
          ),
          new Text(
            "Reader",
            softWrap: true,
            style: new TextStyle(fontSize: 30.0, color: Colors.black),
          ),
        ],
      ),
    ),
  ));
}

Answer 4

您可以將其包裹在new Container() 中，用於水平居中，垂直居中取消注釋 mainAxisAlignment: MainAxisAlignment.center 和 crossAxisAlignment: CrossAxisAlignment.center，位於 Center 內的 Column 中。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(

      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

 @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      color: Colors.pinkAccent,
      home:new Scaffold(
        appBar: new AppBar(backgroundColor: Colors.white,),
        body: new Center(
          child: new Column(
            //mainAxisAlignment: MainAxisAlignment.center,
            //crossAxisAlignment: CrossAxisAlignment.center,
            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: (){},
              ),
              new Padding(padding: const EdgeInsets.symmetric(vertical: 10.0), ),
              new Text('_reader',softWrap: true, style: new TextStyle(fontSize: 30.0,color: Colors.black),),

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

希望它有所幫助。

Answer 5

需要3件事

1. 容器

2. 主軸對齊

3. 橫軸對齊

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      color: Colors.pinkAccent,
      home: new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.white,
        ),
        body: Container(
          width: double.infinity,
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            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: () => {},
              ),
              new Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.0),
              ),
              new Text(
                'Some random text',
                softWrap: true,
                style: new TextStyle(fontSize: 30.0, color: Colors.black),
              ),
            ],
          ),
        ),
      ),
    );
  }
}