为啥只有 ListView.builder() 中的内容不滚动？

Posted 2023-02-23

【中文标题】为啥只有 ListView.builder() 中的内容不滚动？

【英文标题】：Why only the content in ListView.builder() is not scrolling?为什么只有 ListView.builder() 中的内容不滚动？

【发布时间】：2020-02-26 15:32:16

【问题描述】：

我有一个带有 Text 小部件和 ListView 的屏幕，当我尝试在 ListView 内滚动时，它不允许我滚动。

我的主体是 SingleChildScrollView，但它没有为 ListView.builder 提供滚动视图。我尝试将 ListView.build 包装在 Expanded 中，但没有成功。

class HomePageState extends State<HomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: new AppBar(
          title: Text("MyBar"),
          centerTitle: true,
        ),
        body: SingleChildScrollView(child: Column(
          children: <Widget>[
            Text(
                "Information"),
            Container(
                child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: widget.match.players.length,
                    itemBuilder: (context, index) 
                      return Column(
                        children: <Widget>[
                          Card(
                              child: ListTile(
                            leading: CircleAvatar(
                              radius: 30.0,
                              foregroundColor: 
                                Theme.of(context).primaryColor,
                              backgroundColor: Colors.grey,
                              backgroundImage: 
                          CachedNetworkImageProvider("url"),
                            ),
                            title: new Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  new Text("Some text",
                                    style: new TextStyle(
                                        fontWeight: FontWeight.bold),
                                  ),
                                  new Text(
                                    "Some text",
                                    style: new TextStyle(
                                        fontWeight: FontWeight.bold),
                                  ),
                                ]),

                          ))
                        ],
                      );
                    ))
          ],
        )));
   

任何人都知道如何使 listView.builder() 可滚动。

【参考方案1】：

您需要使ListView.builder 不可滚动，以便SingleChildScrollView 可以滚动。您可以通过将这两个属性之一设置为 ListView.builder 来实现：

physics: NeverScrollableScrollPhysics()

或

primary: false

但是使用ListView.builder 就像您使用它一样，它会一次创建所有项目。如果您想有效地使用ListView.builder 仅在它们滚动到屏幕上时创建项目，您可以删除SingleChildScrollView 并像这样使用ListView.builder：

ListView.builder(
  itemCount: widget.match.players.length + 1,
  itemBuilder: (context, index) 
    if (index == 0) 
      return Text("Information");
    
    int listIndex = index - 1;
    // then you could use: widget.match.players[listIndex];
    return Column(...);
  
)

【讨论】：

非常感谢，这就是我正在寻找的！