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

Posted 2023-02-23

【中文标题】如何使用 ListView.separated 使整个屏幕可滚动

【英文标题】：How to make the whole screen scrollable with ListView.separated

【发布时间】：2021-01-26 16:27:10

【问题描述】：

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

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

这些是我看过的资源：

https://www.reddit.com/r/Flutter/comments/e93ujx/how_to_make_whole_screen_scrollable_with/ Flutter ListView Builder scroll whole screen https://medium.com/@rubensdemelo/flutter-forms-improving-ui-ux-with-singlechildscrollview-7b91aa981475

完整代码

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 时，我希望在发生这种情况时滚动整个屏幕。

【问题讨论】：

ListView 默认是可滚动的。没有必要把它放在 SingleChildSrollView 中。

用 SingleChildScrollView 包裹你的主列并将 NeverScrollablePhysics() 放在其他列表中

我这样做了，但是它使整个屏幕固定并禁用滚动

你是否尝试删除 singlechildScrollview，listview 默认是可滚动的 @Calmante c

所以我在屏幕顶部有两个图标作为标题，下面是一个 ListView，所以当用户滚动该 ListView 时，我希望在发生这种情况时滚动整个屏幕。

【参考方案1】：

你可以用这个

ListView.seperated(
   primary: false,
   shrinkWrap: true,
),

【讨论】：

这与您的问题有关吗？ ***.com/questions/56131101/…

不太明白这个问题，所以没有。

【参考方案2】：

要滚动整个屏幕，您需要将列小部件放在 SingleChildScrollView 中。所以它会像下面这样..

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

【讨论】：

它不是滚动的，整个屏幕是固定的