我对flutter陌生，正在尝试在flutter中实现自定义列表视图。 在布局错误期间，给它的RenderCustomMultiChildLayoutBox对象一个无限大小
2另请建议如何调试这些布局错误，因为错误跟踪没有针对其引发错误的特定窗口小部件信息
请找到以下相同的代码：
class ChatItemSreen extends StatelessWidget {
var leftSection;
var middleSection;
var rightSection;
ChatModel _chartObj;
ChatItemSreen(ChatModel _chartObj) {
this._chartObj = _chartObj;
//.........the left section ...........................
CircleAvatar image = new CircleAvatar(
backgroundColor: Colors.lightGreen,
backgroundImage: new NetworkImage(this._chartObj.geturl()),
radius: 24.0,
);
leftSection = new Container(child: image);
//.........the middle section ...........................
middleSection = new Expanded(
child: new Container(
padding: new EdgeInsets.only(left: 8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text(this._chartObj.getuserName(),
style: new TextStyle(
color: Colors.black,
fontWeight: FontWeight.w300,
fontSize: 16.0)),
new Text(this._chartObj.getmessage(),
style: new TextStyle(color: Colors.grey))
],
),
));
//.........the right section ...........................
rightSection = new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text(this._chartObj.gettimeStamp()),
new CircleAvatar(
backgroundColor: Colors.lightGreen,
radius: 12.0,
child: new Text(
this._chartObj.getunreadMsgNo(),
style: new TextStyle(color: Colors.white, fontSize: 12.0),
))
],
),
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
margin: new EdgeInsets.all(2.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[leftSection, middleSection, rightSection],
)),
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(title: "Shashank List", home: RandomWords());
}
}
class RowItemState extends State<RandomWords>
{
final List<ChatModel> items = new List();
@override
void initState()
{
super.initState();
setState(()
{
items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "9:35", "2", "Shashank", "Missed vedio call!!"));
items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "10:35", "3", "Kakroo", "Missed vedio call!!"));
items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "02:45", "4", "Alpha 1", "Missed vedio call!!"));
items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "12:30", "6", "Beta 2", "Missed vedio call!!"));
});
}
@override
Widget build(BuildContext context)
{
return MaterialApp(
home: ListView.builder(
itemCount: items.length,
itemBuilder: (context,position)
{
ChatModel obj = items.elementAt(position);
return new ChatItemSreen(obj);
}
),
);
}
}
给我以下错误：
XCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (15078): The following assertion was thrown during performLayout():
I/flutter (15078): RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter (15078): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (15078): inside another render object that allows its children to pick their own size.
I/flutter (15078): The nearest ancestor providing an unbounded height constraint is:
I/flutter (15078): RenderIndexedSemantics#a9825 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (15078): creator: IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ←
I/flutter (15078): AutomaticKeepAlive ← SliverList ← MediaQuery ← SliverPadding ← Viewport ← _ScrollableScope ←
I/flutter (15078): IgnorePointer-[GlobalKey#e8d9b] ← Semantics ← Listener ← ⋯
I/flutter (15078): parentData: index=0; layoutOffset=0.0 (can use size)
I/flutter (15078): constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (15078): semantic boundary
I/flutter (15078): size: MISSING
I/flutter (15078): index: 0
I/flutter (15078): The constraints that applied to the RenderCustomMultiChildLayoutBox were:
I/flutter (15078): BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (15078): The exact size it was given was:
I/flutter (15078): Size(411.4, Infinity)
I/flutter (15078): See https://flutter.io/layout/ for more information.
答案 0 :(得分：1)
在尝试在文本的单独段落中包含可缩放的PhotoView小部件时遇到了这个确切的问题。
编译并运行该应用程序时，您可能会注意到，应该让您的违规小部件所在的位置是一个无限长的黑色区域。
错误的第二行显示为
在布局过程中被赋予了无限大小
这意味着需要限制小部件的大小。
我的解决方案是将PhotoView包装在SizedBox小部件中。
...
Text("Here's some text.\nAnd then there's this image:\n"),
SizedBox(
width: 200.0,
height: 300.0,
child: PhotoView(
imageProvider: NetworkImage("http://image/url/here.jpg"),
heroTag: "Lauren Mayberry",
),
),
Text("And now more text"),
...
在此示例中，我使用了固定的宽度和高度，但是您始终可以根据其中包含的内容来动态调整窗口小部件的大小。
关于如何更好地调试布局错误：我唯一的建议是一次删除一个小部件，直到错误消失。当然肯定不尽如人意，但确实可行。
答案 1 :(得分：0)
日志显示框约束高度设置为无穷大，从而给出了框的无限大小
问题是因为ListView.builder的高度不受限制，但没有Sized小部件的子级或父级作为其大小的依据。
需要注意的一件事：如果未呈现小部件，则该上下文可能不存在。可能会导致
出现问题ListView
因为仅在潜在可见的情况下才渲染窗口小部件。
您可以包装LayoutBuilder：
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// height: constraints.maxHeight,
// width: constraints.maxWidth
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, position) {
ChatModel obj = items.elementAt(position);
return new ChatItemSreen(obj);
}
);
});
);
}