flutter - 如何在 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))
              ],
            ))),
      ),
    ),
    );
  }
}

希望对您有所帮助。