在容器内居中两个 Text 小部件答案

【问题标题】：Center two Text widgets inside the container在容器内居中两个 Text 小部件
【发布时间】：2021-08-11 00:11:54
【问题描述】：

我完全是个菜鸟，所以我有一个小问题。

我想将两个文本块居中（就像在屏幕截图上一样）

我有这样的结构：

@override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        children: [
          Container(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Hello",style: TextStyle(color: Colors.blue)),
                Text("World",style: TextStyle(color: Colors.blue))
              ],
            ),
            height: 256,
            color: Colors.deepPurpleAccent,
          )
        ],
      ),
    );
  }

但我看到的实际结果是：

【问题讨论】：

标签： flutter layout flutter-layout

【解决方案1】：

那是因为你将 2 个文本块包裹在一行中！用 Column 替换它，它会很好！ :)

@override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        children: [
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Hello",style: TextStyle(color: Colors.blue)),
                Text("World",style: TextStyle(color: Colors.blue)),
              ],
            ),
            height: 256,
            color: Colors.deepPurpleAccent,
          )
        ],
      ),
    );
  }

【讨论】：

非常感谢！另外，如果您在这种情况下阐明了围绕轴对齐的魔力，我将不胜感激:)
您可以使用 mainAxisAlignment 和 crossAxisAlignment 属性控制行或列如何对齐其子项。对于一行，主轴水平运行，交叉轴垂直运行。对于一列，主轴垂直运行，横轴水平运行。

【解决方案2】：

@override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        children: [
          Container(
      child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text("Hello",style: TextStyle(color: Colors.blue)),
                Text("World",style: TextStyle(color: Colors.blue))
              ],
            ),
            height: 256,
            color: Colors.deepPurpleAccent,
          ))
        ],
      ),
    );
  }

【讨论】：