主页 / coding / 问题 / 77656151
Accepted
Tom11
Asked: 2023-12-14 03:34:30 +0800 CST

Flutter空间均匀可滚动布局

  • 772

我有以下设计：

在此输入图像描述

代码：

body: Container(
  color: Colors.green,
  child: SingleChildScrollView(
    child: const Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // TEXT
        // TEXT
        // IMAGE
      ],
    ),
  ),
)

没关系，当设备较小时，该列是可滚动的：

在此输入图像描述

但是，当设备更大时，我希望实现以下目标：

在此输入图像描述

说明：所有三个元素在布局中均匀分布。第一个在顶部，最后一个在底部。如果有足够的空间，元素之间就有空间。但是，如果没有空间，该列将变得可滚动。有人可以建议如何解决这个问题吗？

我已经尝试过了mainAxisAlignment: MainAxisAlignment.spaceEvenly,，但这不起作用。即使用包装父容器也Expanded不起作用。非常感谢您的帮助。

flutter

1 个回答

  1. Best Answer

    您实际上可以使用SingleChildScrollView文档示例中的某些内容：

    LayoutBuilder(
  builder: (context, constraints) => SingleChildScrollView(
    child: ConstrainedBox(
      constraints: BoxConstraints(minHeight: constraints.maxHeight),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Placeholder(fallbackHeight: 200),
          Placeholder(fallbackHeight: 200),
          Placeholder(fallbackHeight: 200),
        ],
      ),
    ),
  ),
),

    您在这里所做的就是使Column最小约束等于可用高度（您拥有的空间）。因此，有一个可用空间Column可用于MainAxisAlignment.spaceBetween. 如果列内容不适合该空间，则最大高度约束仍然是无限的，因此它将很好地扩展并且SingleChildScrollView将使内容可滚动。

    请确保不要将此模式用于更长或更复杂（就小部件树而言）的视图，因为它SingleChildScrollView布局了整个子小部件树，对于更复杂的树来说，这可能会变得昂贵，并且您的帧时间可能会受到影响。

    • 1

相关问题