Flutter - 堆棧對齊不能在內部垂直工作擴展為包裹在列內的行的子項

Question

我正在使用簡單的小部件創建自定義 Stepper 標頭。 我需要將數字之間的線（容器）對齊到 centerRight、center 和 centerLeft，分別用於第一個、中間和最后一個項目。

問題是 Stack 被包裹在 Exapanded 小部件中，該小部件是 Row 的子級，而 Row 又是列的子級。 只要我們不使用列，Stack 的垂直對齊就可以正常工作。

但是，當我將Row包裝在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