展开小部件以填充ListView中的剩余空间

Question

如上图所示，我希望小部件2始终至少为可用剩余空间的高度。

但是小部件2可能包含很多ListTiles，因此如果不滚动它们就无法显示它们。但是滚动应该影响小部件1和小部件2。实现这样的最佳方法是什么？

Answer 1

将Widget 2包装在Expanded小部件中。

要同时滚动Widget 1和Widget 2，请将它们都包装在SingleChildScrollView小部件中。

Answer 2

一种简单的方法是将小部件放在Column中，并用单个子滚动视图包装它。对于ListView，请使用shrinkWrap作为true和物理参数，您可以将其设置为NeverScrollableScrollPhysics

这是一个例子

SingleChildScrollView(
  child: Column(
    children: [
      Container(
        height: MediaQuery.of(context).size.height / 2,
        color: Colors.red,
      ),
      ListView.builder(
        shrinkWrap:true,
        physics:NeverScrollableScrollPhysics(),
        itemCount: 100,
        itemBuilder: (context, index) => Text("$index"),
      ),
    ],
  ),
);

希望这会有所帮助！

Answer 3

如果您可以区分具有少数元素和多元素的情况（例如在加载期间），您可以使用 CustomScrollView 和 SliverFillRemaining 来实现：

import * as process from "process";