我的 ListView 构建器的 ListTile 小部件不可滚动并且显示渲染问题

Posted 2023-02-23

【中文标题】我的 ListView 构建器的 ListTile 小部件不可滚动并且显示渲染问题

【英文标题】：My ListTile widgets of a ListView builder are not scrollable and are displaying render issues

【发布时间】：2021-12-11 14:31:33

【问题描述】：

列表视图构建器中的小部件（Listtile）不可滚动。我在互联网上寻找类似的问题。他们中的大多数都不起作用。数据库功能与保存到 firebase、删除数据到 firebase 一样完美，但从 firebase 检索到的数据不可滚动。

这是我的流构建器小部件的代码，它返回列表视图构建器：

StreamBuilder<QuerySnapshot?>(
              stream: FirebaseFirestore.instance.collection('LoanFriends').snapshots(),
              builder: (context,snapshot)
                if(!snapshot.hasData)
                  return CircularProgressIndicator();
                
                else 
                  return ListView.builder(
                      shrinkWrap: true,
                      itemCount: snapshot.data!.docs.length,
                      itemBuilder:(context, index)
                        return CustomCard(snapshot: snapshot.data!, index: index,);
                      );
                
              
          ),
class CustomCard extends StatelessWidget 
  final QuerySnapshot snapshot;
  final int index;

  CustomCard(required this.snapshot, required this.index);

  @override
  Widget build(BuildContext context) 
    var docID = snapshot.docs[index].id;
        return ListTile(
          title: Text((snapshot.docs[index].data()as dynamic)['name']),
          subtitle: Text((snapshot.docs[index].data()as dynamic)['address']),
          leading: CircleAvatar(
            radius: 20,
            child: Text((snapshot.docs[index].data()as dynamic)['name'][0]),
          ),
          trailing: IconButton(
            icon: Icon(FontAwesomeIcons.ellipsisV),
            onPressed: () 
              Dialogs.materialDialog(
                  msg: 'Are you sure ? You can\'t undo this',
                  title: "Delete",
                  color: Colors.white,
                  context: context,
                  actions: [
                    IconsOutlineButton(
                      onPressed: () 
                        Navigator.pop(context);
                      ,
                      text: 'Cancel',
                      iconData: Icons.cancel_outlined,
                      textStyle: TextStyle(color: Colors.grey),
                      iconColor: Colors.grey,
                    ),
                    IconsButton(
                      onPressed: ()
                        var collectionreference = FirebaseFirestore.instance.collection('LoanFriends');
                        collectionreference.doc(docID).delete();
                        Navigator.pop(context);
                      ,
                      text: 'Delete',
                      iconData: Icons.delete,
                      color: Colors.red,
                      textStyle: TextStyle(color: Colors.white),
                      iconColor: Colors.white,
                    ),
                  ]);
            ,

          ),
        );
  

我添加物理后的代码输出：Scrollphysics()，在listview builder中是：

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 124 pixels on the bottom.

The relevant error-causing widget was: 
  Column Column:file:///C:/Users/Acer/StudioProjects/budgetapp/lib/innerscreens/wallet_screen.dart:28:13
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

【问题讨论】：

尝试添加physics: ScrollPhysics(),

感谢您的回复，但它不起作用。

否则使用 singleChildScrollView 包装您的列表视图构建器

还是不行，现阶段不知道怎么办

【参考方案1】：

终于，我得到了解决方案。我的代码的问题是它没有达到 UI 想要渲染的高度。我通过将 listview.builder 包装在一个有界高度的容器中来给出有界高度。

最终代码：

StreamBuilder<QuerySnapshot?>(
              stream: FirebaseFirestore.instance.collection('LoanFriends').snapshots(),
              builder: (context,snapshot)
                if(!snapshot.hasData)
                  return LinearProgressIndicator();
                
                else 
                  return Expanded(
                    child: Container(
                      height: 300,
                      child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: snapshot.data!.docs.length,
                          itemBuilder:(context, index)
                              return CustomCard(snapshot: snapshot.data!, index: index,);
                          ),
                    ),
                  );
                
              
          ),