Question

在我们的应用程序的一部分中，我希望在BottomSheet中具有简单的形式，如以下代码所示。不幸的是，当我输入错误消息时，会出错

在performLayout（）期间引发了以下断言：通常由TextField创建的InputDecorator不能具有无限制的宽度。当父窗口小部件不存在时，会发生这种情况提供有限的宽度约束。例如，如果InputDecorator 由行包含，则必须限制其宽度。扩展小部件或SizedBox可用于限制 InputDecorator或包含它的TextField。 'package：flutter / src / material / input_decorator.dart'：失败的断言：第881行pos 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(),
                            )
                          ],
                        ),

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

Answer 1

在上述问题中，Column试图比Row（其父级）可以为其分配的空间更宽，从而导致溢出错误。为什么Column尝试这样做？要了解这种布局行为，您需要了解Flutter框架如何执行布局：

“要执行布局，Flutter会先进行深度优先遍历渲染树，然后将大小限制从父级传递到子级。孩子们会通过增大尺寸进行响应到父对象建立的约束范围内的父对象。

在这种情况下， Row小部件不会限制其子项的大小，也不会限制Column小部件。缺少其父窗口小部件的约束，第二个“文本”窗口小部件尝试使其宽度与它需要显示的所有字符一样。然后，Column采用了文本小部件的自行确定的宽度，该宽度与父级Row小部件可以提供的最大水平空间发生冲突。

如何解决？

好吧，您需要确保Column不会试图变得更宽。为此，您需要限制其宽度。一种实现方法是将Column包装在一个Expanded小配件中：

可以通过将TextField包装在Expanded或Flexible窗口小部件中来避免该错误。因此，请相信该列应为Expanded：

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

Answer 2

您将必须为TextField提供特定宽度，只需在width中提供Container或将Column包装在Expanded中即可。

解决方案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()),
        ],
      ),
    ),
  ],
),

Answer 3

将TextField包裹在指定高度的列中。

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

用TextField Form扑底页

3 个答案: