我有三个小部件,我希望顶部的小部件在最上面,底部的小部件在最底部.中间的小部件可以等间距分布,也可以正好位于顶部小部件的下方(最好是后者).

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

<some space>

middle widget

<some (or more) space>

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

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

我试着把它们和mainAxisAlignment: MainAxisAlignment.spaceEvenly个放在一起,

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

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

flutter - how to align at the top and at the bottom (this is the issue) - and column middle part的基础上,我试着添加一个扩展,像这样:

      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)),
          ),
        ],
      ),

但这似乎没有任何影响(我不确定我是否完全理解了这个简洁的答案,tbh).

Update: 多亏了下面的回答,我在这里结束了.可能仍然会按照建议进行调整,但它得到的正是我想要做的:

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

推荐答案

您可以通过以下方式实现这一点:

  1. 放置mainAxisAlignment = MainAxisAlignment.spaceBetween,(在列的小部件之间分配剩余空间,而不是在它们之前或之后).

  2. 您可以在小部件之间使用Spacer Widget,并 for each 间隔符提供一个弹性值,以分配剩余空间的特定百分比.(为您的目标推荐).check spacer

Flutter相关问答推荐

Android元数据为1.9.0,预期版本为1.7.1,如何解决flutter应用程序构建失败问题?

如何更改默认应用程序启动器/启动屏幕

为什么要在值列表中两次放入空安全性

如何将 colored颜色 阴影作为默认容器 colored颜色 应用于自定义窗口小工具?

如何实现Flutter 梳理机图像的小量移动

'Flutter的无效常数值错误

一个API中有两个不同JSON响应的Flutter 改装问题

如何在点击查看措辞下方添加句子?

Flutter:使用 GlobalKey 访问 BlocProvider

Flutter如何在容器外创建环形进度条

更改下拉按钮的背景 colored颜色 - flutter

如何正确地将 PageView 设置为 AppBar 的标题?

Flutter / 为什么当我点击我的图片时我的模型没有更新?

为什么将 bloc 提供程序放在单独的文件/类中会引发错误?

flutter 创建一个带有 2 个图标的按钮

按下 Command+W 时关闭窗口

如何限制用户每 24 小时执行的操作数?

配置项目:firebase_core时出现问题

如何将所有行项目平等地放在一行中?Flutter

参数类型Future>不能分配给参数类型Future>?