在列颤动中居中文本的问题答案

【问题标题】：Problem with centering text in Column flutter在列颤动中居中文本的问题
【发布时间】：2021-10-04 20:35:21
【问题描述】：

所以我想把这个“pow”文本移到 X 所在的位置。白色箭头只是一个例子，如果 i 而不是 alignment: Alignment.bottomCenter 输入 alignment: Alignment.bottomRight，谁能告诉我为什么这段文字有一些神奇的区域，我无法让他在那里

 body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox.fromSize(
              size: const Size(300, 300),
              child: ClipOval(
                child: Material(
                  child: Center(
                    child: Text(
                      "Start",
                      style: GoogleFonts.overpass(
                          textStyle: const TextStyle(
                              fontSize: 30.0, fontWeight: FontWeight.w100)),
                    ),
                  ),
                  color: Colors.amber,
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: TextButton(
                  onPressed: null,
                  child: Text("pow",
                      style: GoogleFonts.oxygen(
                          textStyle: const TextStyle(color: Colors.white)))),
            ),
          ],
        )

【问题讨论】：

标签： flutter dart alignment whitespace centering

【解决方案1】：

这是因为 Align 仅在 Column 内对齐其子元素，而不是整个屏幕。

你可以这样修复它：

body: Stack(
  children: [
    Align(
      alignment: Alignment.center,
      child: SizedBox.fromSize(
        size: const Size(300, 300),
        child: ClipOval(
          child: Material(
            child: Center(
              child: Text(
                "Start",
              ),
            ),
            color: Colors.amber,
          ),
        ),
      ),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: TextButton(
        onPressed: null,
        child: Text(
          "pow",
        ),
      ),
    ),
  ],
)

因为Stack 占据了整个屏幕，所以它起作用了

【讨论】：

【解决方案2】：

body:Container(
height:MediaQuery.of(context).size.height*0.80,
 child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox.fromSize(
              size: const Size(300, 300),
              child: ClipOval(
                child: Material(
                  child: Center(
                    child: Text(
                      "Start",
                      style: GoogleFonts.overpass(
                          textStyle: const TextStyle(
                              fontSize: 30.0, fontWeight: FontWeight.w100)),
                    ),
                  ),
                  color: Colors.amber,
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: TextButton(
                  onPressed: null,
                  child: Text("pow",
                      style: GoogleFonts.oxygen(
                          textStyle: const TextStyle(color: Colors.white)))),
            ),
          ],
        ),
)

【讨论】：