如何在 Flutter 中使表单可滚动

Question

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

- 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(...),
  ),
),

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