我遇到了一个我不知道如何修复的渲染异常。我试图创建一个有 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 实现缺少什么?
(我假设您使用 a 是Row因为您希望TextField将来将其他小部件放在旁边。)
Row
TextField
小Row部件想要确定其非灵活子项的固有大小,因此它知道它为灵活子项留下了多少空间。但是,TextField没有固有宽度;它只知道如何将自己的大小调整到其父容器的全宽。尝试将其包装在FlexibleorExpanded中,告诉Row您您希望TextField占用剩余空间:
Flexible
Expanded
new Row( children: <Widget>[ new Flexible( child: new TextField( decoration: const InputDecoration(helperText: "Enter App ID"), style: Theme.of(context).textTheme.body1, ), ), ], ),