在标题和表格之间留出空间的正确方法？

Question

我想实现这样的布局。

在我专注于输入之前，它工作正常。

我想知道如何以正确的方式做到这一点......这是我到目前为止已经尝试过的：

1. 在SingleChildScrollView 内包装表单（Spacer 小部件导致错误）。
2. 使用CustomScrollView，（Spacer 小部件导致错误）。
3. 将CustomScrollView 或SingleChildScrollView 包裹在SizedBox 内受设备高度的限制（导致某些元素在较小的设备上仅部分可见）。
4. 按照答案from this question（不起作用）。

有什么线索吗？这是我的代码：

class CreateFieldReportPage extends GetView<CreateFieldReportController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: controller.focusScope.unfocus,
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                PageHeader(
                  helper: 'fieldReport.create.helper'.tr,
                  title: 'fieldReport.create'.tr,
                ),
                Spacer(),
                FieldReportForm(),
                PageNavigator(
                  onPressedPrimaryButton: () {
                    Get.toNamed(Routes.EVENT_CREATE_ADD_USER);
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

Spacer() 的行为类似于Flexible 小部件，它将仅占用屏幕上的可用空间，如果其他小部件占用了剩余空间，则它将无法工作。

对您来说，SizedBox(height: 30) 可以工作并添加所需的高度。 SingleChildScrollView() 将提供额外的空间然后执行滚动。