如何在 Flutter 中使表单可滚动

Question

所以我正在尝试制作一个应用程序，让用户填写几个表单字段并在用户提交表单时处理信息。 我的问题是我似乎无法找到如何使Form可滚动（因为它很长并且会导致 RenderFlex 错误）。 我用它包装的任何可滚动小部件仍然会导致 RenderFlex 错误。 它滚动的唯一一次是当我用ListView包装它时，但它也会导致 RenderFlex 错误，最糟糕的是，由于某种原因，当我尝试滚动到底部以点击按钮提交时，它会滚动回正常状态。 我已经在 flutter 和Flutter - 如何使列屏幕可滚动中尝试了如何滚动页面中的大部分解决方案，但它们似乎都不起作用。 以下是表单的结构：

- Form
  - Column (List of input fields, crossAxisAlignment = CrossAxisAlignment.start)
   - Padding (Input field, top padding of 12)
    - Column (Text + input field)
     - Align (alignment = Alignment.centerLeft)
      - Padding (Left padding 8)
       - Text (Field title)
     - Padding (Symmetric horizontal padding of 8)
      - TextFormField (Text input)
   - Seven more input fields with the same structure (Padding > Column > Align > ...)
   - Padding (Vertical padding of 64)
    - Align (center alignment)
     - FractionallySizedBox (for 75% width)
      - SizedBox (for fixed height)
       - ElevatedButton (Submit button)
        - Text (Submit button text)

我希望这是足够的信息，如果有人可以帮助我使此表单可滚动，我将不胜感激。 提前致谢！

Answer 1

问题是当您使用Column而不指定高度时，它认为高度是无限的。 尝试用SizedBox包装第一列小部件，并使用MediaQuery确定屏幕高度并将其设置为SizedBox的高度参数。

现在，用SingleScrollChildView包裹Column使其可滚动。

例如，

SizedBox(
  height: MediaQuery.of(context).size.height,
  child: SingleScrollChildView(
     child: Column(...),
  ),
),

最后，为什么你需要第二个Column用于文本和输入字段？ 你不能只使用TextField()中的InputDecoration方法并使用labelText或HelperText

Answer 2

您可以使用 SingleChildScrollView 小部件。

Answer 3

您可以使用SingleChildScrollView并用Container小部件包装它并为其提供一定的高度。