ListView.builder 小部件不滚动

Posted 2023-02-23

【中文标题】ListView.builder 小部件不滚动

【英文标题】：ListView.builder widget not scrolling

【发布时间】：2019-11-30 16:30:58

【问题描述】：

我的页面上有一个 ListView.builder 小部件。问题是小部件在显示其结果时没有滚动。请问我做错了什么？以下代码显示了我到目前为止所尝试的内容。

我尝试只将 ListView.builder 小部件放在页面上，在这种情况下小部件会滚动，但是一旦我添加另一个小部件，Listview 就会停止滚动。

@覆盖 小部件构建（BuildContext 上下文） 返回脚手架（ 应用栏：应用栏（

          title: Text(widget.title,style: TextStyle(fontSize: 14),),
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          physics: AlwaysScrollableScrollPhysics(),
          child:Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child:Expanded(
                      child: Image.asset("assets/images/1frenchToast.webp"),
                    ),
                    // ),
                  ),
                ],
              ),
              SingleChildScrollView(
                child: ListView.builder(
                  //scrollDirection: Axis.vertical,
                  physics: AlwaysScrollableScrollPhysics(),
                  itemCount:  foodCategory != null?foodCategory.length:1,
                  itemBuilder: (context,index)
                    return ListTile(
                      //dense: true,
                      leading: Container(
                        margin: EdgeInsets.only(bottom: 10),
                        child:Image.asset('assets/images/3poached-egg.webp',),
                      ),
                      title: Text(foodCategory != null?foodCategory[index].foodType:1),
                      onTap: ()
                        _navigate(dropDownSelectedItemState, foodCategory[index].foodType);
                      ,
                    );
                  ,shrinkWrap: true,
                  // physics: AlwaysScrollableScrollPhysics(),

                ),
              ),

            ],
          ),

        ),

        floatingActionButton: FloatingActionButton(
          onPressed: null,
          tooltip: 'Increment',
          child: Icon(Icons.add),

我希望能够使用显示的代码让我的 ListView.builder 滚动

【问题讨论】：

你为什么用这么多SingleChildScrollView？只需使用一个列作为您的主要body 小部件，并用Expanded 包装ListView.builder

我想我在你上一个问题的评论中回答了这个问题

@VidorVistrom 是的，您的回复已经完全解决了问题，我没有按时看到回复，这就是我再次创建此线程的原因。再次感谢

【参考方案1】：

根据@VidorVistrom 在另一个线程中的建议，这就是我解决问题的方法。我将 ListView.builder 包装在一个容器小部件中，并简单地将其高度设置为 200，并移除了 ListView.builder 周围的 SingleChildScrollView，然后就解决了问题。以防这对其他人有所帮助。

完整代码如下图：

@override Widget build(BuildContext context)  return Scaffold( appBar: AppBar( title: Text(widget.title,style: TextStyle(fontSize: 14),),
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          physics: AlwaysScrollableScrollPhysics(),
          child:Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child:Expanded(
                      child: Image.asset("assets/images/1frenchToast.webp"),
                    ),
                    // ),
                  ),
                ],
              ),
              Container(//child:SingleChildScrollView(
                                  height: 200,
                                  margin: EdgeInsets.only(top: 20),
                                  //scrollDirection: Axis.vertical,
                                  // physics: AlwaysScrollableScrollPhysics(),
                                  child: ListView.builder(
                                    scrollDirection: Axis.vertical,
                                    physics: AlwaysScrollableScrollPhysics(),
                                    itemCount:  foodCategory != null?foodCategory.length:1,
                                    itemBuilder: (context,index)
                                      return ListTile(
                                        dense: true,
                                        leading: Container(
                                          margin: EdgeInsets.only(bottom: 10),
                                          child:Image.asset('assets/images/3poached-egg.webp',),
                                        ),
                                        title: Text(foodCategory != null?foodCategory[index].foodType:1),
                                        onTap: ()
                                          _navigate(dropDownSelectedItemState, foodCategory[index].foodType);
                                        ,
                                      );
                                    ,shrinkWrap: true,
                                    // physics: AlwaysScrollableScrollPhysics(),

                                  ),//)

                                ),

            ],
          ),

        ),

        floatingActionButton: FloatingActionButton(
          onPressed: null,
          tooltip: 'Increment',
          child: Icon(Icons.add),