Flutter 颤振：带有TextField/TextFormField的底部板材

在我们的应用程序中，我希望在

底页中有一个简单的表单，与下面的代码类似。不幸的是，当我输入时，我得到了一个错误

在performLayout（）期间引发了以下断言：一个
通常由TextField创建的InputDecorator不能具有
无限宽。当父窗口小部件不运行时会发生这种情况
提供有限宽度约束。例如，如果InputDecorator
由行包含，则必须约束其宽度。扩大的
小部件或SizedBox可用于约束窗口的宽度
InputDecorator或包含它的文本字段。
“package:flatter/src/material/input_decorator.dart”：断言失败：
第881行第7位：“layoutConstraints.maxWidth
我的实现代码：

  void _settingModalBottomSheet(context){
    showModalBottomSheet(
        context: context,
        elevation: 8.0,
        builder: (BuildContext bc){
          return Directionality(
            textDirection: TextDirection.rtl,
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: 250.0
              ),
              child: Container(
                padding: EdgeInsets.fromLTRB(0.0,10.0,0.0,10.0),
                child: new Wrap(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Center(
                        child: Text(
                          'please fill this form',
                          style: TextStyle(
                            fontSize: 13.0,
                          ),
                        ),
                      ),
                    ),
                    Divider(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Text('item 1'),
                            Container(
                              child: TextField(),
                            )
                          ],
                        ),
                        Column(
                          children: <Widget>[
                            Text('item 2'),
                            Container(
                              child: TextField(),
                            )
                          ],
                        ),

                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        }
    );
  }

void\u设置ModalBottomSheet（上下文）{
showModalBottomSheet(
上下文：上下文，
标高：8.0，
生成器：（BuildContext bc）{
返回方向性(
textDirection:textDirection.rtl，
子：约束框(
约束：BoxConstraints(
最小高度：250.0
),
子：容器(
填充：LTRB（0.0,10.0,0.0,10.0）的边缘设置，
孩子：新包装(
儿童：[
填充物(
填充：常数边集全部（8.0），
儿童：中心(
子：文本(
“请填写这张表格”，
样式：TextStyle(
字体大小：13.0，
),
),
),
),
分隔符（），
划船(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
纵队(
儿童：[
文本（“第1项”），
容器(
子项：TextField（），
)
],
),
纵队(
儿童：[
正文（“第2项”），
容器(
子项：TextField（），
)
],
),
],
),
],
),
),
),
);
}
);
}
您必须为
文本字段
提供一个特定的宽度，只需在
容器
中提供
宽度
，或者将
列
包装在
展开的
中

解决方案1

Container(
  width: 100, // do it in both Container
  child: TextField(),
),


解决方案2

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Expanded( // wrap your Column in Expanded
      child: Column(
        children: <Widget>[
          Text('item 1'),
          Container(child: TextField()),
        ],
      ),
    ),
    Expanded( // wrap your Column in Expanded
      child: Column(
        children: <Widget>[
          Text('item 2'),
          Container(child: TextField()),
        ],
      ),
    ),
  ],
),

行(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
Expanded（//将列包装为Expanded
子：列(
儿童：[
文本（“第1项”），
容器（子：TextField（）），
],
),
),
Expanded（//将列包装为Expanded
子：列(
儿童：[
正文（“第2项”），
容器（子：TextField（）），
],
),
),
],
),
将
TextField
包装在指定高度的列中

Column(
  height: 300,
  child: TextFormField()
),

在上述问题中，
列
试图超出
行
（其父行）可以分配给它的空间，从而导致溢出错误。为什么
列要尝试这样做？要了解此布局行为，您需要了解颤振框架如何执行布局：

“要执行布局，Flatter以深度优先遍历的方式遍历渲染树，并将大小约束从父对象传递到子对象。子对象通过在父对象建立的约束范围内向上传递大小约束来响应。”

在这种情况下，
行
小部件不约束其子项的大小，
列
小部件也不约束其子项的大小。由于缺少父窗口小部件的约束，第二个文本窗口小部件尝试显示与需要显示的所有字符一样宽的字符。然后，
列
采用文本小部件的自定宽度，这与其父
行
小部件可以提供的最大水平空间量相冲突

如何修复它？

嗯，您需要确保
列
不会试图超出其范围。要实现这一点，需要约束其宽度。一种方法是将
列
包装在
扩展的
小部件中：

通过将文本字段包装在扩展的或灵活的小部件中，可以避免该错误。因此，请相信该列应该展开：

Row(
    children: [
      Expanded(
      child: Column(
          children: [
            Text('This is the text and there enough to wrap'),
            TextField()
          ]
      ))
    ]
);

抱歉，这没有帮助，用户没有要求限制
TextField
的高度。