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的真正位置。

在那之后，您可以采取一些解决方法，因为您的孩子（文本）的行为不像您期望的那样，问题在于父母的过错。记住这个比喻。

考虑到这一点，您可以检查每个组件的父亲，首先是AnimatedBuilder，可以将其包装在Center组件中，或者执行相同的技巧来传递颜色并将其包装在Container检查他在堆叠中的位置，依此类推，等等。

如果不是您的AnimatedBuilder的行为失误，请在树上检查其父母，直到找到它。

希望这对您有所帮助

如何将文本对齐到父“对齐”小部件的中心

1 个答案: