Flutter中嵌套SingleChildScrollView的Column无法显示内容

我使用Form展示内容，将Form包裹在SingleChildScrollView中时屏幕无法显示内容；移除SingleChildScrollView后则能正常显示。请问是否需要调整父子组件的结构？

无SingleChildScrollView效果：

有SingleChildScrollView效果：

相关代码：

return Scaffold(
      appBar: AppBar(
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: FormBuilder(
              key: formKey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    "Customer Details",
                    style:
                        TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  FormBuilderTextField(
                    name: 'name',
                    decoration: const InputDecoration(labelText: "Name"),
                    validator: validateTextField,
                  ),
                  
                
                  FormBuilderTextField(
                    name: 'problemDescription',
                    maxLines: 2,
                    decoration: const InputDecoration(
                        labelText: "Problem Description"),
                  ),
                  FormBuilderTextField(
                    name: 'date',
                    decoration: const InputDecoration(labelText: "Date"),
                  ),
                  
                    child: const Text(
                      'Submit',
                      style: TextStyle(color: Colors.white),
                    ),
                  )
                ],
              ),
            ),
          ),

核心问题是Column未设置mainAxisSize: MainAxisSize.min。SingleChildScrollView需要子组件提供明确的滚动范围，而默认的Column会尽可能占据父组件的可用空间，导致SingleChildScrollView无法正确计算内容高度，最终内容无法显示。

另外你的代码存在语法错误：Submit按钮部分缺少组件声明（比如ElevatedButton），需要补全。

修改后的完整代码：

return Scaffold(
  appBar: AppBar(),
  body: SafeArea(
    child: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: FormBuilder(
          key: formKey,
          child: Column(
            mainAxisSize: MainAxisSize.min, // 关键修改：让Column仅包裹自身内容
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                "Customer Details",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              FormBuilderTextField(
                name: 'name',
                decoration: const InputDecoration(labelText: "Name"),
                validator: validateTextField,
              ),
              FormBuilderTextField(
                name: 'problemDescription',
                maxLines: 2,
                decoration: const InputDecoration(
                    labelText: "Problem Description"),
              ),
              FormBuilderTextField(
                name: 'date',
                decoration: const InputDecoration(labelText: "Date"),
              ),
              // 补全按钮组件
              ElevatedButton(
                onPressed: () {
                  // 添加表单提交逻辑
                  if (formKey.currentState?.validate() ?? false) {
                    formKey.currentState?.save();
                    // 执行提交操作
                  }
                },
                child: const Text(
                  'Submit',
                  style: TextStyle(color: Colors.white),
                ),
              )
            ],
          ),
        ),
      ),
    ),
  ),
);

内容的提问来源于stack exchange，提问作者Crist