在flutter中，如何在窗口的顶部和底部排列小部件？

Question

我有三个小部件，我希望顶部小部件位于最顶部，底部小部件位于最底部。中间的小部件可以等距放置，也可以位于顶部小部件的下方（最好是后者）。

=================
top widget

<some space>

middle widget

<some (or more) space>

bottom widget
=================

我想我可能可以使用 LayoutWidget 来计算我需要多少空间，使用 MainAxisAlignment.Start 并在中间和底部小部件之间插入一个间隔小部件，但我希望有一种更自然的方法来做到这一点。

我尝试将它们与

mainAxisAlignment: MainAxisAlignment.spaceEvenly

,

放在一列中

      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          BoardWidget(board: widget.board),
          TipWidget(board: widget.board),
          OnScreenKeyboard(onKeyPressed: _onKeyPress),
        ],
      ),

但这增加了顶部和底部以及小部件之间的空间。

基于flutter - 如何在顶部和底部对齐（这是问题） - 和列中间部分，我尝试添加一个扩展，如下所示：

      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          BoardWidget(board: widget.board),
          TipWidget(board: widget.board),
          Expanded(
            child: Align(
                alignment: Alignment.bottomCenter,
                child: OnScreenKeyboard(onKeyPressed: _onKeyPress)),
          ),
        ],
      ),

但这似乎没有任何影响（我不确定我是否完全理解这个简洁的答案，说实话）。

Answer 1

您的第一栏已关闭，只需使用

MainAxisAlignment.spaceBetween

。

Answer 2

您可以通过以下方式实现这一目标：

1. put mainAxisAlignment = MainAxisAlignment.spaceBetween，（在列的小部件之间划分剩余空间，但不在它们之前或之后）。

2. 您可以在小部件之间使用 Spacer Widget，并为每个间隔器提供一个弹性值以分配剩余空间的特定百分比。 （推荐用于您的目标）。检查垫片https://api.flutter.dev/flutter/widgets/Spacer-class.html。