RenderCustomMultiChildLayoutBox 对象在布局期间被赋予无限大小。颤振错误

问题描述 投票：0回答：3

我是 flutter 新手，正在尝试在 flutter 中实现自定义列表视图。 它的给予 RenderCustomMultiChildLayoutBox 对象在布局错误期间被赋予无限大小

  1. 我无法获取哪个小部件抛出错误

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.
android dart flutter flutter-layout
3个回答
22
投票

我在尝试在单独的文本段落中包含可捏合和缩放的 

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"),
...

在此示例中，我使用了固定的宽度和高度，但您始终可以根据其中所属的内容动态调整小部件的大小。

至于如何更好地调试布局错误：我唯一的建议是一次删除一个小部件，直到错误消失。这当然不太理想，但它确实有效。

3
投票

只需用 SizedBox 包裹小部件，并在 MediaQuery 的帮助下给出屏幕的大小。

Size size = MediaQuery.of(context).size;

SizedBox(
  height: size.height,
  width: size.height,
  child: // Your Widget
);
0
投票

这个问题很久以前就已经解决了。但除了这些解决方案之外，我还想添加一些不同的东西。

这些天，我正在防止我的代码在我的项目中成为意大利面条代码:)为此，我打开并编辑了其他文件。而当时我就遇到了这个错误。我的解决方案是添加扩展。我在主页那一栏的代码中添加了扩展。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.