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

- SAM

---

尝试使用此代码：crossAxisAlignment: CrossAxisAlignment.center, - Viren V Varasadiya

@VirenVVarasadiya，我已经尝试过了，但是由于宽度默认较窄，我认为你的建议只有在宽度设置为屏幕宽度的100%时才会奏效。我不知道如何增加宽度。 - SAM

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

我希望这对您有所帮助。

- void

---

已经尝试添加了crossAxisAlignment: CrossAxisAlignment.center，但是没有起作用。 - SAM

Answer 2

问题在于您的屏幕没有占据整个宽度，因此无论使用什么大小的小部件，它都是中心小部件。

要使用整个宽度，您可以提供容器大小到最大尺寸，这将强制小部件使用全宽并将其居中。

MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.teal,
          body: SafeArea(
              child: Container(
            width: MediaQuery.of(context).size.width, // added
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage('assets/images/crown 1.png'),
                ),
                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))
              ],
            ),
          ))),
    );

- Viren V Varasadiya

Answer 3

如果你想要将小部件在中心对齐（垂直和水平方向），你可以使用

Center(
 child: Column(
 children: <Widget>[]
 )

如果您想要水平对齐但在屏幕顶部，那么请使用以下代码：

Column(
    crossAxisAlignment: CrossAxisAlignment.stretch, // to cover all the area

    children: [
      Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [Text("test data")],
      )
    ],
  )

对我来说有效。

如果你想要垂直居中并位于屏幕顶部，则

Row(
    crossAxisAlignment: CrossAxisAlignment.stretch, // to cover all the area
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [Text("test data")],
      )
    ],

同样也有效。

- Ravish Garg

Answer 4

情况1：如果您想让列居中对齐：

//First Way: Use Column Widget inside Center Widget

    Center(
     child: Column(
     children: <Widget>[]
     )

//Second Way: Use Container Widget and set alignment to center

 Container(
   alignment: Alignment.center,
   child: Column(
     children: <Widget>[]
                )
          )

情况二：如果你想要列的子元素居中对齐

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[]
)

- Shikhar Singh