行内的TextField导致布局异常：无法计算大小

Question

行内的TextField导致布局异常：无法计算大小

flutterdartflutter-layoutflutter-textflutter-row

312

我得到一个渲染异常，我不知道如何修复。我正在尝试创建具有3行的列。

第1行 [图像]

第2行 [文本字段]

第3行 [按钮]

这是我构建容器的代码:

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

以及我的buildAppEntryRow代码用于文本容器

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

当我运行时，会出现以下异常：

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

如果我将 buildAppEntryRow 更改为一个简单的 TextField，就像这样：

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

我不再收到异常。我在Row实现上漏掉了什么导致它无法计算该行的大小？

- Matthew Smith

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rohan Navlakhe · Answer 1

如果您希望您的文本字段根据其内容自动调整水平大小，那么您可以使用IntrinsicWidth小部件将其包装。

Row(
 children: [
    Text("From"),
    SizedBox(width: 10,),
    IntrinsicWidth(child: TextField(
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
        hintText:  "Start Date Start Date Start Date",
        hintStyle: TextStyle(color: Colour.pBlue, fontSize: 14),
        border: InputBorder.none,
      ),
    ),),
            SizedBox(width: 10,),
            Text("To"),
            SizedBox(width: 10,),
            IntrinsicWidth(child:  IntrinsicWidth(child: TextField(
     textAlignVertical: TextAlignVertical.center,
      decoration: InputDecoration(
        hintText:  "End Date",
        hintStyle: TextStyle(color: Colour.pBlue, fontSize: 14),
        border: InputBorder.none,
      ),
    ),)),
          ],
        )

但在将其用于您的代码之前，请确保了解Flutter对此小部件的说明。

创建一个将子项大小调整为子项固有宽度的小部件。这个类相对昂贵。尽量避免在可能的情况下使用它。