如何在 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 的高度参数。

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

例如，

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

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

Answer 2

您可以使用 SingleChildScrollView 小部件。

Answer 3

您可以使用

SingleChildScrollView

并用

Container

小部件包裹它，并为其提供一定的高度。