时间戳

首页 > 解决方案 > 如何将文本对齐到父对齐小部件的中心

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

问题描述

我无法将文本与框的中心对齐。我尝试添加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)
                                  );
                                }),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

标签： flutterdart

解决方案

我可以建议你很多东西，但我会做得更好。当你被这样卡住时，我将向你展示如何“调试”。

你看到最新的Align组件了吗？把它包裹在一个 中Container，传递一个颜色，Colors.red这样你就可以看到它到底在哪里Align。

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

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

如果不是你AnimatedBuilder的行为错误，那么在树上检查他的父母直到你找到它。

希望这有帮助

推荐阅读