flutter |如何填充ListView的剩余空间？

Question

在我的 Flutter 应用中，我有一个 ListView:

return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.blueAccent,
          child: ListView(
            children: [
              Container(
                color: Colors.yellow,
                height: 100
              ),
              const SizedBox(height: 10),

              // How to make this container fill up the remaining height?
              Container(
                color: Colors.black,
              ),
            ],
          ),
        ),
      ),
    );

这会产生以下 View :

问题:如何让第二个框(黑色背景)填满剩余空间？如果框的内容超出剩余空间，ScrollView 将启用滚动。

这可能吗？

Answer 1

这里有一个更好的选择 SliverFillRemaining结合CustomScrollView而不是 ListView

在您的情况下，代码将如下所示。

Container(
          color: Colors.blueAccent,
          child: CustomScrollView(
            shrinkWrap: true, // or false 
            slivers: <Widget>[
              SliverToBoxAdapter(
                child:Container(
                color: Colors.yellow,
                height: 100
              ),),
              SliverToBoxAdapter(
                child: SizedBox(height: 10),),

              // use SliverFillRemaining to make this container fill up the remaining height?
            SliverFillRemaining(
            hasScrollBody: false, // if using a column, so the widgets in it, doesn't scroll
            child:Container( //this container will fill the remaining space in the ViewPort
                color: Colors.black,
              ),
            )  ,
            
            ],
          ),          
        ),