flutter 具有包含列表的可扩展卡的列

zysjyyx4  于 2023-03-31  发布在  Flutter
关注(0)|答案(2)|浏览(100)

我正在尝试构建以下布局。想象一个列有4个可扩展卡(见图)。折叠的卡片只包含一个标题,因此相当小。当展开时,会出现一个列表,其中可以包含任何数量的元素。如果展开的卡片的所有表的总和太大,则在每张卡片上使用Instrinsic Height会导致溢出。使用扩展的结果是卡片有0或只有几个元素来占用它们不需要的空间。我也尝试了灵活。我希望每个折叠的卡片都能得到它需要的空间。然后剩余的空间在扩展的所有列表之间均匀分配。(!)如果有的话,卡片。但是每个列表只占用它所需要的空间(!),所以如果有的话,较大的列表可以占用更多的空间。例如,如果所有列表都很大,并且都是展开的,那么每个展开的卡片应该占列的1/4(假设是4张卡片)。

ni65a41a

ni65a41a1#

您可以尝试在SingleChildScrollView中 Package 整个列(主列),这样就不会出现溢出。

k4ymrczo

k4ymrczo2#

1.使用列小部件来包含四张卡片。
1.使用Flexible小部件 Package 每张卡片,使其在折叠时占用的空间最小。
1.使用LayoutBuilder小部件获取列的可用高度。当卡片展开时,计算其内容的高度,并从列的可用高度中减去折叠高度。
1.使用FractionallySizedBox小部件将剩余空间平均分配到需要它的扩展卡上,其中heightFactor等于每个扩展卡所需的可用空间的比例。
这样,折叠的卡片将占用它们所需的最小空间,而展开的卡片将均匀地占用剩余的空间,而不会溢出列。

相关问题