如何在 Flutter 中使表单可滚动

Question

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

- 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

您可以使用 SingleChildScrollView 小部件。

Answer 2

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

Answer 3

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

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

例如，

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

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

如何在 Flutter 中使表单可滚动

How to make a Form scrollable in Flutter

flutter

forms

dart

scroll

scrollable