如何修复不滚动的表单答案

【问题标题】：How to fix a Form that doesn't scroll如何修复不滚动的表单
【发布时间】：2021-05-01 21:49:21
【问题描述】：

我正在做一个表单，但我不能让它滚动，它只能在“窗口”的边缘工作，而不是在表单内部，我用最终的 X = TextFormField 因为这是我发现在提交之前验证信息的唯一方法，这是我的代码：

我所有的Q都是这样的：

最终 usuarioForm = TextFormField(
控制器：_idusuarioController，
验证器：（值）{
if (value.isEmpty) return 'Llenar campo de Usuario';
返回空值；
},
样式：TextStyle（字体大小：17.0，颜色：Colors.deepOrangeAccent），
装饰：输入装饰（
图标：图标（Icons.person），
labelText: 'Usuario',
),
);

我的表格是这样的：

最终 vuelosForm = 形式（键：_formKey，孩子：列表视图（收缩包装：是的，滚动方向：Axis.vertical，填充：EdgeInsets.all(10)，孩子们： [ usuarioForm, ], ), );

我的脚手架是这样的：

返回脚手架（键：_scaffoldKey， resizeToAvoidBottomPadding: false, 应用栏：应用栏（标题：文本（'Vuelos'），背景颜色：Colors.deepOrangeAccent， ), 身体：容器（孩子：列表视图（收缩包装：是的，填充：EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0), 孩子们： [ 中心（孩子：卡片（海拔：18.0，孩子：容器（填充：EdgeInsets.all(10.0)，孩子：列（孩子们： [ vuelosForm, ], ), ), ), ), ], ), ), );

显然我还有更多问题，但我没有将它们粘贴在这里，因为这将是很多代码。

【问题讨论】：

看起来你正在使用两个listView，你可以远程其中一个。
我试过了，但是没用或者我不知道怎么用正确的方法
我还是不明白为什么你需要两个listView，但你会尝试将大小设置为Form吗？
这是我的想法：由于我需要验证字段中的文本，我需要将所有字段分开，然后加入最后的 x = Form();使用密钥：_formKey。这需要一个 ListView 来显示我的“问题”。并且这个表单需要在脚手架部分，body>child>child>children。
你会尝试从最终的 x = TextFormField 设置列表视图的大小吗？获取一个尺寸可能使其在其子级较大时可滚动。

标签： flutter forms dart scroll

【解决方案1】：

添加到@Shubham Narkhede 答案，如果你想建立一个表单，那么使用 flutter_form_builder 包和SingleChildScrollView

这个包通过删除构建表单、验证字段、响应更改和收集最终用户输入所需的样板，帮助在 Flutter 中创建大型表单。

在 pubspec.ymal 文件中添加如下依赖：

dependencies:
flutter_form_builder: ^3.8.2

添加依赖后，运行以下命令：

flutter pub get

在您的 .dart 文件中导入包：

import 'package:flutter_form_builder/flutter_form_builder.dart';

您可以将these form fields 添加为输入小部件

现在您可以在代码中使用FormBuilder 作为小部件：

@override
Widget build(BuildContext context) {

 return Scaffold(
  appBar: AppBar(
    title: Text(formName, style: TextStyle(fontWeight: FontWeight.bold),),
  ),
  body: Container(
    child: Center(
      child: Container(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  FormBuilder(
                    key: _fbKey,
                    autovalidate: _autoValidate,
                    child: Column(
                      children: bind your form fields,
                    )
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

【讨论】：

【解决方案2】：

在您的代码中，您使用 Listview 包装列小部件，因此我只删除 Listview widget 并简单地使用 SingleChildScrollView 包装 Column 以进行滚动

Container(
        child: Card(
          elevation: 18.0,
          child: Container(
              padding: EdgeInsets.all(10.0),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    vuelosForm,
                  ],
                ),
              )l̥
          ),
        ),
      ),

【讨论】：

【解决方案3】：

据我了解您的问题，您可以在代码中添加一行以使其在表单小部件的 ListView 中可滚动：

physics: NeverScrollableScrollPhysics(),

您的表单的完整代码：

final vuelosForm = Form(
    child: ListView(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      padding: EdgeInsets.all(10),
      children: [
        usuarioForm,
      ],
    ),
  );

【讨论】：