我收到了一个渲染异常,我不知道如何解决。我正在尝试创建具有3行的列。
行[图片]
行[TextField]
行[按钮]
这是我构建容器的代码:
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, ); }
我不再例外。行实现导致我无法计算该行的大小,我缺少什么?
(我假设您使用的是a,Row因为TextField将来您想将其他小部件放在旁边。)
Row
TextField
该Row小部件希望确定其非柔性子代的内在大小,因此它知道为柔性子代留下了多少空间。但是,TextField没有固有宽度。它只知道如何将自身调整为其父容器的整个宽度。尝试将其包装在Flexible或中,Expanded以告知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, ), ), ], ),