如何在 Flutter 中让 ListView 中的项目覆盖整个屏幕

Posted

技术标签:

【中文标题】如何在 Flutter 中让 ListView 中的项目覆盖整个屏幕【英文标题】:How to have an item in ListView cover to whole screen in Flutter 【发布时间】:2019-08-28 09:47:21 【问题描述】:

我想要一个具有固定数量项目的可滚动视图。第一个项目应该覆盖父容器,然后用户可以向下滚动以查看其余项目。

我尝试将 Expanded 添加到第一项,但我得到白屏

  ListView(
    children: <Widget>[
      Expanded(child: MainInfo(),),
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),    
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),   
    ],
  ),

我应该使用 ListView 还是 SingleChildScrollView(也不适用于 Expanded)?

【问题讨论】:

【参考方案1】:

我已经设法通过使用返回 ListView 的 LayoutBuilder 来实现这一点

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) 
    return ListView(
      children: <Widget>[
        Container(
          child: MainInfo(),
          height: constraints.maxHeight,
        ),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
      ],
    );
  ),

【讨论】:

【参考方案2】:

Expanded 不能在可滚动小部件中使用。你可以这样做:

ListView(
    children: <Widget>[
      Container(height:MediaQuery.of(context).size.height,child: MainInfo(),),
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),    
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),   
    ],
  ),

【讨论】:

如果我在列表视图或 AppBar 下有一个小部件怎么办?将高度设置为 MediaQuery 的高度将溢出屏幕的第一项。我也编辑了问题以减少混淆

以上是关于如何在 Flutter 中让 ListView 中的项目覆盖整个屏幕的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Flutter 中让任务在后台运行

如何在 Flutter 中添加 ListView.builder 的填充顶部?

Flutter中如何检测ListView的滚动位置

如何在 Flutter 的 ListView 中添加列?

如何在 Flutter 中手动分配 Listview.builder 的第一个元素?

Flutter:如何在 Listview 中删除行之间的空间