行内的TextField导致布局异常：无法计算大小 [英] TextField inside of Row causes layout exception: Unable to calculate size

问题描述

我收到了一个渲染异常，我不知道如何解决。我正在尝试创建一个包含3行的列。

I’m getting a rendering exception that I don’t understand how to fix. I’m attempting to create a column that has 3 rows.

行[Image]

行[TextField]

Row [TextField ]

行[按钮]

这是我构建容器的代码：

Here is my code to build the container:

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代码

and my buildAppEntryRow code for the text container

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

运行时，出现以下异常：

When I run I get the following exception:

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，而不是这样

If i change buildAppEntryRow to just a TextField instead like this

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

我不再例外。行实现导致我无法计算该行的大小，我会丢失什么？

I no longer get the exception. What am I missing with the Row implementation that is causing it to not be able to calculate the size of that row?

推荐答案

（我假设您使用的是 Row ，因为将来您希望将其他小部件放在 TextField 旁边。）

(I assume you're using a Row because you want to put other widgets beside the TextField in the future.)

Row 小部件要确定其非柔性子级的内在大小，因此它知道它有多少空间离开了灵活的。但是， TextField 没有固有宽度；它只知道如何将自身调整为其父容器的整个宽度。尝试将其包装在 Flexible 或 Expanded 中，以告知 Row 您期望 TextField 占用剩余空间：

The Row widget wants to determine the intrinsic size of its non-flexible children so it knows how much space that it has left for the flexible ones. However, TextField doesn't have an intrinsic width; it only knows how to size itself to the full width of its parent container. Try wrapping it in a Flexible or Expanded to tell the Row that you're expecting the TextField to take up the remaining space:

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),

这篇关于行内的TextField导致布局异常：无法计算大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！