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

Question

我想实现一个看起来像这样的布局。

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

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

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

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

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

标签： flutter

Answer 1

Spacer()就像一个Flexible只占用屏幕上可用空间的小部件，如果其他小部件占用了剩余空间，那么它将无法工作。

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