在 Column flutter 中居中文本的问题

Question

所以我想将这个“pow”文本移到 X 所在的位置。白色箭头只是一个例子如果我而不是 alignment: Alignment.bottomCenter typing 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)))),
            ),
          ],
        )

Answer 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 占据了整个屏幕

Answer 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)))),
            ),
          ],
        ),
)

在 Column flutter 中居中文本的问题

Problem with centering text in Column flutter

flutter

dart

alignment

whitespace

centering