Flutter StreamBuilder 里面一行

Question

是否可以将 streambuilder 包装在一行中？因为当我用一行包裹它时，它会给我一个错误提示：

RenderBox was not laid out: RenderRepaintBoundary#3b79a relayoutBoundary=up28 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1927 pos 12: 'hasSize'

我试过用容器再次包裹 streambuilder 并设置它的高度，但我得到了一个不同的错误 Horizontal viewport was given unbounded width.

这是我的代码：

Row(
                children: [
                  Text('You, ',
                    style: TextStyle(
                      color: Colors.white.withOpacity(.7),
                      fontSize: 12
                    ),
                  ),
                  Container(
                    height: 15,
                    child: StreamBuilder<List<ContactModel>>(
                      stream: homes.listControllerContact.stream,
                      builder: (context, snapshot){
                        List<ContactModel> contactList = [];
                        for(var item in json.decode(conversation!.idReceiversGroup!)){
                          var query = mains.objectbox.boxContact.query(ContactModel_.userId.equals(item)).build();
                          if(query.find().isNotEmpty) {
                            contactList.add(query.find().first);
                          }

                        }

                        return Container(
                          height: 15,
                          child: ListView.builder(
                            itemCount: contactList.length,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index)=>
                                index != contactList.length-1? Text("${contactList[index].userName!}, ",
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ): Text(contactList[index].userName!,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              )

有什么解决办法吗？

Answer 1

可以，但是您遇到的一个问题是，您将一个水平 ListView 放在一行中，当它尝试绘制布局时，由于 ListView 的可滚动特性，它会绘制一个无限的水平视图。

您可以使用 Expanded 小部件包装您的 StreamBuilder，它应该通过仅将可用的 space 分配给您的小部件来解决问题。

Row(
                children: [
                  Text('You, ',
                    style: TextStyle(
                      color: Colors.white.withOpacity(.7),
                      fontSize: 12
                    ),
                  ),
                  Expanded(
                    child: Container(
                    height: 15,
                    child: StreamBuilder<List<ContactModel>>(
                      stream: homes.listControllerContact.stream,
                      builder: (context, snapshot){
                        List<ContactModel> contactList = [];
                        for(var item in json.decode(conversation!.idReceiversGroup!)){
                          var query = mains.objectbox.boxContact.query(ContactModel_.userId.equals(item)).build();
                          if(query.find().isNotEmpty) {
                            contactList.add(query.find().first);
                          }

                        }

                        return Container(
                          height: 15,
                          child: ListView.builder(
                            itemCount: contactList.length,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index)=>
                                index != contactList.length-1? Text("${contactList[index].userName!}, ",
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ): Text(contactList[index].userName!,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(.7),
                                    fontSize: 12,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                          ),
                        );
                      },
                    ),
                  ),
                 ),
                ],
              )

Flutter StreamBuilder 里面一行

Flutter StreamBuilder inside a row

flutter

flutter-layout