Flutter 列，具有相同高度的页眉和页脚元素以及扩展的中间元素

Question

在 flutter 中，我有一个

GoBackPage

，我用它来包围一些子屏幕。它基本上是一个：Column[Icon,Expanded(child: child)]

    class GoBackPage extends StatelessWidget {
      late Widget? child;
      bool deadSpace;
    
      GoBackPage({
        super.key,
        this.child,
        this.deadSpace = true,
      });
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      Align(
                        alignment: Alignment.topLeft,
                        child: IconClickable(
                          iconData: Icons.arrow_back,
                          color: MyThemeProvider.primary,
                          size: 32.0,
                          onTap: () {
                            context.pop();
                          },
                        ),
                      ),
                      if (child != null) ...[
                        Expanded(
                          child: child!,
                        ),
                      ],
                      // How to leave as much space as the first element?
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }

我遇到的唯一问题是子项，例如带有MainAxisAlignment.center的Column，或者被中心包围的按钮，会感觉垂直向下未对齐，因为图标占用了一些垂直空间。我想在孩子下面留下与第一个项目（图标）一样多的空白空间。

换句话说，一列中是否有可能有这样的分布？

    ///////////
    //
    // 1. TAKE WHAT I NEED (UNKNOWN AT COMPILATION TIME)
    //
    ///////////
    ///////////
    //
    //
    //
    // 3. CHILD: TAKE ALL THE REST OF SPACE
    //
    //
    //
    ///////////
    ///////////
    //
    // 2. TAKE THE SAME AS THE FIRST ONE TOOK
    //
    ///////////

Answer 1

扩展填充所有可用空间。这就是它的预期目的。因此，如果底部的空白空间多于顶部，Expanded 将填充该空间并看起来偏离中心。给你两个想法：

在 Expanded 小部件下添加一个高度为 32 的 SizedBox：

Column(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: IconClickable(
                      iconData: Icons.arrow_back,
                      color: MyThemeProvider.primary,
                      size: 32.0,
                      onTap: () {
                        context.pop();
                      },
                    ),
                  ),
                  if (child != null) ...[
                    Expanded(
                      child: child!,
                    ),
                  ],
                  SizedBox(height: 32),
                ],
              ),

您还可以添加 32 像素的底部内边距。

Expanded(
  child: Padding(
    padding: const EdgeInsets.only(bottom: 32),
    child: child,
  ),
),

要在使用 Expanded 时使其完美居中，您必须偏移图标所占用的 32px。