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

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）？

Answer 1

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

Answer 2

我已经通过使用 return 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(),
      ],
    );
  }),

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

How to have an item in ListView cover to whole screen in Flutter

flutter

flutter-layout

flutter-listview