为什么文本在颤动中没有对齐中心答案

【问题标题】：Why the text is not align center in flutter为什么文本在颤动中没有对齐中心
【发布时间】：2021-08-14 13:33:33
【问题描述】：

大家好，我正在学习颤动，我希望文本在列内居中对齐，但属性 crossAlignmentCenter 不起作用，任何人都可以看看并告诉我在这里做错了什么


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              Container(
                child: Text("Log In", style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.w400,
                  color: Colors.black,
                ),),
              )
          ],
        ),
      ),
      backgroundColor: Colors.teal,
    );
  }
}```

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

原因是默认情况下，列不会占用交叉轴上的所有可用空间。因此，在您的示例中，该列仅与它所包含的子项一样厚。因此，居中它不会改变任何东西。如果您正在寻找解决方案，请转到Why CrossAxisAligment not Working in Flex,Row and Column?

【讨论】：

【解决方案2】：

如果您希望将其设为column 的垂直中心，请为您的column 小部件添加mainAxisAlignment 。

mainAxisAlignment: MainAxisAlignment.center,

如果想让它水平居中，请将您的column 小部件替换为row，并确保将mainAxisAlignment 和crossAxisAlignnment 设置为center

【讨论】：

【解决方案3】：

您需要用SizedBox 或Container 用width 的double.infinity 包装Column 小部件。这允许Column 尽可能多地扩展父级。

用这个替换 Padding 小部件，


Container(
        width: double.infinity,
        padding: const EdgeInsets.only(left: 32, right: 32, top: 32), 
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "Log In",
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.w400,
                color: Colors.black,
              ),
            )
          ],
        ),
      ),

【讨论】：

【解决方案4】：

您可以将 Text 小部件包装在 Align 小部件中来执行此操作。这是你的固定代码：

import 'package:flutter/cupertino.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              Container(
                child: Align(
                  alignment: Alignment.center,
                  child:Text("Log In", style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.w400,
                  color: Colors.black,
                ),)
                ) ,
              )
          ],
        ),
      ),
      backgroundColor: Colors.teal,
    );
  }
}

【讨论】：