如何在 Flutter 中水平居中 Column 小部件

Question

我正在学习Flutter，想学习如何结构布局。因此，我决定使用列小部件，并想询问如何水平居中具有以下代码的列小部件： import

'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.teal,
            body: SafeArea(
                child: Column(

              children: <Widget>[
                CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage('images/avatar.jpeg'),
                ),
                Text('SAM',
                    style: TextStyle(
                        fontFamily: 'Pacifico',
                        fontSize: 50.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold)),
                Text('Flutter developer',
                    style: TextStyle(
                        // fontFamily: 'Pacifico',
                        fontSize: 30.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold))
              ],
            ))),
      ),
    );
  }
}

Answer 1

您可以通过将Column crossAxisAlignment属性设置为来做到这一点CrossAxisAlignment.center

尝试将您的内容包装Column在Container小部件中并为其指定宽度属性。

检查下面的代码：它完美运行：

'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.teal,
            body: SafeArea(
                Container(
                // set the height property to take the screen width
                width: MediaQuery.of(context).size.width,
                child: Column(
              // set the crossAxisAlignment property to center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage('images/avatar.jpeg'),
                ),
                Text('SAM',
                    style: TextStyle(
                        fontFamily: 'Pacifico',
                        fontSize: 50.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold)),
                Text('Flutter developer',
                    style: TextStyle(
                        // fontFamily: 'Pacifico',
                        fontSize: 30.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold))
              ],
            ))),
      ),
    ),
    );
  }
}

我希望这有帮助。