Row 内的 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.
行 [图像]
行 [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,
)
],
);
}
运行时出现以下异常:
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,
);
}
我不再得到异常.我在 Row 实现中遗漏了什么导致它无法计算该行的大小?
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,
),
),
],
),
这篇关于Row 内的 TextField 导致布局异常:无法计算大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!