Flutter Row 在构建时消失？

Posted 2023-04-15

【中文标题】Flutter Row 在构建时消失？

【英文标题】：Flutter Row disappears on build?

【发布时间】：2018-11-14 09:08:39

【问题描述】：

我正在构建一个聊天应用程序颤动页面，我的文本字段/发送按钮行不断消失，我收到以下错误...

'package:flutter/src/rendering/box.dart'：断言失败：第 1446 行 pos 12: 'hasSize': RenderBox 未布置： RenderPointerListener#da9fd NEEDS-LAYOUT NEEDS-PAINT

0 _AssertionError._doThrowNew (dart:core-patch/dart:core/errors_patch.dart:37)

1 _AssertionError._throwNew (dart:core-patch/dart:core/errors_patch.dart:33)

2 RenderBox.size (package:flutter/src/rendering/box.dart:1446:12)

3 RenderProxyBoxWithHitTestBehavior.hitTest (package:flutter/src/rendering/proxy_box.dart:164:9)

4 RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultHitTestChildren

(包:flutter/src/rendering/box.dart:2190:17)

5 RenderCustomMultiChildLayoutBox.hitTestChildren (package:flutter/src/rendering/custom_layout.dart:365:12)

6 RenderBox.hitTest (package:flutter/src/rendering/box.dart:1863:11)

7 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren

(包:flutter/src/rendering/p

页面构建良好并在没有文本字段/发送行的情况下适当地显示我的信息，但是当我添加它时出错。这是我的 Stateful 小部件的 Scaffold 中包含的代码...

body: new Container(
          margin: new EdgeInsets.all(10.0),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Flexible(
                  child: new FirebaseAnimatedList(
                      query: fb.child('users').limitToLast(50),
                      padding: new EdgeInsets.all(5.0),
                      reverse: true,
                      itemBuilder: (_, DataSnapshot snapshot, Animation<double> animation, int index)

                        return new ChatMessage(
                            snapshot: snapshot,
                            animation: animation
                        );

                      )
              ),
              new Divider(height: 16.0, color: Colors.blue,),
              new Padding(padding: new EdgeInsets.all(10.0)),
              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  new IconButton(icon: new Icon(Icons.gif), onPressed: null),
                  new Padding(padding: new EdgeInsets.all(3.0)),
                  new TextField(
                      decoration:
                      new InputDecoration(labelText: "CHAT HERE!!"),
                      controller: _searchController,
                      onSubmitted: (str) 
                        setState(() 
                          str = _searchController.text;
                        );
                      ),
                  new IconButton(icon: new Icon(Icons.send), onPressed: null)
                ],
              )

            ],
          ))

【问题讨论】：

您能分享您的完整堆栈跟踪吗？

【参考方案1】：

答案是将TextField 包装在一个Flexible 中。现在看起来很明显，但有时需要灵活或扩展，有时不需要。这是我的代码...

child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Flexible(
                child: new FirebaseAnimatedList(
                    query: fb.child('users').limitToLast(50),
                    padding: new EdgeInsets.all(5.0),
                    reverse: true,
                    itemBuilder: (_, DataSnapshot snapshot,
                        Animation<double> animation, int index) 
                      return new ChatMessage(
                          snapshot: snapshot, animation: animation);
                    ),
              ),
              new Divider(
                height: 5.0,
                color: Colors.blue,
              ),
              new Container(
                margin: const EdgeInsets.symmetric(horizontal: 2.0),
                child: new Row(
                  children: <Widget>[
                    new IconButton(
                        icon: new Icon(Icons.gif), onPressed: getGif),
                    new Flexible(
                      child: new TextField(
                        controller: _chatController,
                        autocorrect: false,
                        decoration: new InputDecoration(
                            labelText: "Let's Talk ... ",
                            labelStyle:
                                new TextStyle(fontWeight: FontWeight.bold)),
                        onChanged: (str) 
                          setState(() 
                            str = _chatController.text;
                          );
                        ,
                      ),
                    ),
                    new IconButton(
                        icon: new Icon(Icons.send), onPressed: getGif),
                  ],
                ),
              )
            ],
          )