我正在尝试模仿与附加图像类似的搜索 View ,但出现以下错误。我可以使用 ListTile 实现此目的,但我无法为图标或 TextField 设置填充。所以我正在尝试使用 Row 小部件来实现这一点。请查看我的代码并帮助我绘制此搜索栏。
I/flutter (19181): The following assertion was thrown during
performLayout():
I/flutter (19181): BoxConstraints forces an infinite width.
I/flutter (19181): These invalid constraints were provided to
RenderAnimatedOpacity's layout() function by the
I/flutter (19181): following function, which probably computed
the invalid constraints in question:
I/flutter (19181): _RenderDecoration._layout.layoutLineBox (package:flutter/src/material/input_decorator.dart:767:11)
I/flutter (19181): The offending constraints were:
I/flutter (19181): BoxConstraints(w=Infinity, 0.0<=h<=46.0)
这是我的代码:
new Container(
height: 70.0,
color: Theme.of(context).primaryColor,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Card(
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Icon(Icons.search),
new Container(
height: double.infinity,
width: double.infinity,
child: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
// onChanged: onSearchTextChanged,
),
),
new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
// onSearchTextChanged('');
},),
],
),
)
))),
最佳答案
编辑:这个答案是对上述问题的快速修复。
最佳做法是 Derek Lakin's answer
回答:
要最大化容器的宽度,请将其宽度设置为
MediaQuery.of(context).size.width
检查这段代码:
new Container(
height: 70.0,
color: Theme.of(context).primaryColor,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Card(
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Icon(Icons.search),
new Container(
//height: double.infinity, //This is extra
width: MediaQuery.of(context).size.width - 100.0, // Subtract sums of paddings and margins from actual width
child: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
// onChanged: onSearchTextChanged,
),
),
new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
// onSearchTextChanged('');
},),
],
),
)
)))
关于dart - Flutter 搜索栏布局问题 BoxConstraints 强制无限宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51631867/