Flutter - 堆栈对齐无法在扩展内垂直工作，作为包裹在列内的行的子项

Question

我正在使用简单的小部件创建自定义步进标头。我需要分别将第一个、中间和最后一个项目的数字之间的线（容器）对齐到 centerRight、center 和 centerLeft。

问题在于，Stack 被包装在一个 Exapanded 小部件内，该小部件是 Row 的子级，而 Row 又是列的子级。只要我们不使用列，Stack 的垂直对齐就可以正常工作。

但是，当我包裹Rowa 的内部时Column， 的Stack垂直对齐方式仅保留在顶部。请参阅下图了解输出。目前，调试控制台没有给出有关此问题的错误或警告。

我该如何解决这个问题？

错误行为：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment.centerRight,
                      child: LayoutBuilder(
                        builder: (ctx, constraints) =>
                            Container(
                              width: constraints.maxWidth / 2.0,
                              height: 1,
                              color: Colors.black,
                            ),
                      ),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 22,
                            width: 22,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                              color: Palette.primary,
                            ),
                            child: Center(
                              child: Text(
                                '1'.substring(0, 1),
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 14, overflow: TextOverflow.clip),
                              ),
                            ))),
                  ],
                ),
              ),
              Expanded(
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: LayoutBuilder(
                        builder: (ctx, constraints) =>
                            Container(
                              width: constraints.maxWidth,
                              height: 1,
                              color: Colors.black,
                            ),
                      ),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 22,
                            width: 22,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                              color: Palette.primary,
                            ),
                            child: Center(
                              child: Text(
                                '2'.substring(0, 1),
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 14, overflow: TextOverflow.clip),
                              ),
                            )))
                  ],
                ),
              ),
              Expanded(
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment.centerLeft,
                      child: LayoutBuilder(
                        builder: (ctx, constraints) =>
                            Container(
                              width: constraints.maxWidth / 2.0,
                              height: 1,
                              color: Colors.black,
                            ),
                      ),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 22,
                            width: 22,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                              color: Palette.primary,
                            ),
                            child: Center(
                              child: Text(
                                '3'.substring(0, 1),
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 14, overflow: TextOverflow.clip),
                              ),
                            )))
                  ],
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

工作解决方案：这里，仅存在行，因此 UI 工作正常。

正确的图像：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.centerRight,
                  child: LayoutBuilder(
                    builder: (ctx, constraints) =>
                        Container(
                          width: constraints.maxWidth / 2.0,
                          height: 1,
                          color: Colors.black,
                        ),
                  ),
                ),
                Align(
                    alignment: Alignment.center,
                    child: Container(
                        height: 22,
                        width: 22,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(11.0),
                          color: Palette.primary,
                        ),
                        child: Center(
                          child: Text(
                            '1'.substring(0, 1),
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: 14, overflow: TextOverflow.clip),
                          ),
                        ))),
              ],
            ),
          ),
          Expanded(
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.center,
                  child: LayoutBuilder(
                    builder: (ctx, constraints) =>
                        Container(
                          width: constraints.maxWidth,
                          height: 1,
                          color: Colors.black,
                        ),
                  ),
                ),
                Align(
                    alignment: Alignment.center,
                    child: Container(
                        height: 22,
                        width: 22,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(11.0),
                          color: Palette.primary,
                        ),
                        child: Center(
                          child: Text(
                            '2'.substring(0, 1),
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: 14, overflow: TextOverflow.clip),
                          ),
                        )))
              ],
            ),
          ),
          Expanded(
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: LayoutBuilder(
                    builder: (ctx, constraints) =>
                        Container(
                          width: constraints.maxWidth / 2.0,
                          height: 1,
                          color: Colors.black,
                        ),
                  ),
                ),
                Align(
                    alignment: Alignment.center,
                    child: Container(
                        height: 22,
                        width: 22,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(11.0),
                          color: Palette.primary,
                        ),
                        child: Center(
                          child: Text(
                            '3'.substring(0, 1),
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: 14, overflow: TextOverflow.clip),
                          ),
                        )))
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

如果你在 Row 上提供固定高度会更好，目前使用Stack'alignment: Alignment.center,解决了这个问题，

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Align(
                      alignment: Alignment.centerRight,
                      child: LayoutBuilder(
                        builder: (ctx, constraints) => Container(
                          width: constraints.maxWidth / 2.0,
                          height: 1,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 22,
                            width: 22,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(11.0),
                                color: Colors.cyanAccent),
                            child: Center(
                              child: Text(
                                '1'.substring(0, 1),
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 14, overflow: TextOverflow.clip),
                              ),
                            ))),
                  ],
                ),
              ),
              Expanded(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: LayoutBuilder(
                        builder: (ctx, constraints) => Container(
                          width: constraints.maxWidth,
                          height: 1,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 22,
                            width: 22,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(11.0),
                                color: Colors.cyanAccent),
                            child: Center(
                              child: Text(
                                '2'.substring(0, 1),
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 14, overflow: TextOverflow.clip),
                              ),
                            )))
                  ],
                ),
              ),
              Expanded(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Align(
                      alignment: Alignment.centerLeft,
                      child: LayoutBuilder(
                        builder: (ctx, constraints) => Container(
                          width: constraints.maxWidth / 2.0,
                          height: 1,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            height: 22,
                            width: 22,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                              color: Colors.cyanAccent,
                            ),
                            child: Center(
                              child: Text(
                                '3'.substring(0, 1),
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 14, overflow: TextOverflow.clip),
                              ),
                            )))
                  ],
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

另外，您可以尝试使用单个 Stack 小部件，提供Alignment(x,0)x 为 -1,0 和 1