如何使用ListView.separated使整个屏幕可滚动

编程问答 2022-06-09

问题描述

我尝试使用SingleChildScrollView，将子列设置为MainAxisSize.min，但找不到工作的答案。这是我的小部件树的样子：

Scaffold
 Stack
   Column
    Row
    SizedBox
    FutureBuilder
     SizedBox
      SingleChildScrollView
       ListView.separated (physics: NeverScrollableScrollPhysics())
   Container

这些是我看过的资源：

完整代码 

Scaffold(
        backgroundColor: Color(0xFF1C1C1C),body: Stack(
          children: [
            Column(
              children: [
                getheading(),SizedBox( height: MediaQuery.of(context).size.height * (10/730) ),FutureBuilder(
                  future: getContent(),builder: (context,snapshot) {
                    if(snapshot.hasData) {
                      List FeedList = snapshot.data;
                      return SizedBox(
                        width: MediaQuery.of(context).size.width * 0.9,height: MediaQuery.of(context).size.height * 0.925,child: SingleChildScrollView(
                          child: ListView.separated(
                            physics: NeverScrollableScrollPhysics(),shrinkWrap: true,itemBuilder: (context,index) {
                                // code for builder
                              },separatorBuilder: (context,index) {
                                return SizedBox( height: MediaQuery.of(context).size.height * (32/730) );
                              },itemCount: FeedList.length
                          ),),);
                    }
                    else {
                      return ErrorScreens().pageNotFound(context,100,1,24);
                    }
                  }
                )
              ],Center(
              child: Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.8),child: BottomNav().primaryBottomNav(MediaQuery.of(context).size.width * 0.92,90,context),)
          ],)

编辑：我认为有些人不了解我要做什么。因此，我在屏幕顶部有两个图标作为标题，在其下方是ListView，因此当用户滚动该ListView时，我希望整个屏幕在发生这种情况时滚动。

解决方法

要滚动整个屏幕，您需要将列窗口小部件放在SingleChildScrollView中。因此，它将类似于以下内容。

Scaffold
 Stack
   SingleChildScrollView
    Column
     Row
     SizedBox
     FutureBuilder
      SizedBox
        ListView.separated (physics: NeverScrollableScrollPhysics(),shrinkWrap:true)
   Container
,

您可以使用此

ListView.seperated(
   primary: false,shrinkWrap: true,),
flutter-sliverlayoutlayoutlistviewlistviewwidget