flutter - 如何将文本对齐到父对齐小部件的中心

Question

我无法将文本与框的中心对齐。我尝试添加 FractionalOffset.center 以使列与父 Align 对齐，但它似乎没有什么区别。由于第二个 Align 在第一个 Align 内，我不明白为什么 FractionalOffset.center 不起作用。

图片:

代码:

  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return Container(
      height: 30.0,
      child: Padding(
        padding: EdgeInsets.all(0.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Align(
                alignment: FractionalOffset.bottomLeft,
                child: AspectRatio(
                  aspectRatio: 1.0,
                  child: Stack(
                    children: <Widget>[
                      Positioned.fill(
                        child: AnimatedBuilder(
                          animation: controller,
                          builder: (BuildContext context, Widget child) {
                            return CustomPaint(
                                painter: TimerPainter(
                              animation: controller,
                              backgroundColor: Colors.white,
                              color: themeData.indicatorColor,
                            ));
                          },
                        ),
                      ),
                      Align(
                        alignment: FractionalOffset.center,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            AnimatedBuilder(
                                animation: controller,
                                builder: (BuildContext context, Widget child) {
                                  return Text(
                                    timerString.substring(2),
                                    style: TextStyle(color: Colors.white)
                                  );
                                }),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 1

我可以给你很多建议，但我会做得更好。当您陷入这种困境时，我将向您展示如何“调试”。

你看到最新的 Align 组件了吗？将其包裹在 Container 中，为其传递一种颜色，例如 Colors.red，这样您就可以看到此 Align 的实际位置。

在那之后，您可以采取一些解决方法，因为您的 child (文本)的行为不像您期望的那样，问题是 parent 的错。记住这个类比。

考虑到这一点，您可以检查每个组件的父组件，首先是您的 AnimatedBuilder，您可以将它包装在 Center 组件中，或者通过传递color 并将其包裹在 Container 中以检查他在 Stack 中的位置，等等，等等。

如果不是您的 AnimatedBuilder 的行为错误，则在树中向上检查他的父级，直到找到它。

希望对您有所帮助