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

Question

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

我尝试将 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）？

- b k

Answer 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(),
      ],
    );
  }),

- b k

Answer 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(),   
    ],
  ),

- Ryosuke

---

如果我在ListView或AppBar下面有一个小部件怎么办？将高度设置为MediaQuery的高度会导致第一个项目溢出屏幕。我也编辑了问题以减少混淆。 - b k