颤振：ListView中动态大小的小部件

我想创建一个带有ListView的页面，该页面带有一个动态大小的小部件来存档此行为：

动态大小的小部件（显示为红色）具有最小和最大大小

当页面/列表视图上有足够的空间容纳所有元素时，动态大小的小部件 应具有其最大大小，并且listView中不应有任何滚动行为

当没有足够的空间容纳所有元素和完整的最大大小小部件时，小部件 应减小尺寸，直到完全适合。不应该有滚动行为

如果小部件必须减小到其最小尺寸以下，以使所有元素都适合listView， 它应该保持最小的尺寸。由于没有足够的空间容纳元素，ListView应该是可滚动的

---

如何在Flatter中存档此行为？

您可以使用SliverAppBar和flexibleSpace在CustomScrollView中

CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            floating: false,
            pinned: true,
            snap: false,
            expandedHeight: 150.0,
            flexibleSpace: FlexibleSpaceBar(
                title: Text("SliverAppBar Widget"),
                ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('List Item $index'),
                );
              },
            ),
          ),
        ],
      )

CustomScrollView(
条子：[
滑杆(
浮动：假，
对,，
快照：错，
扩展高度：150.0，
flexibleSpace:FlexibleSpaceBar(
标题：文本（“SliverAppBar小部件”），
),
),
SliverFixedExtentList(
项目范围：50.0，
代表：SliverChildBuilderDelegate(
（BuildContext上下文，int索引）{
返回容器(
对齐：对齐.center，
颜色：颜色。浅蓝色[100*（索引%9）]，
子项：文本（“列表项$index”），
);
},
),
),
],
)

---

您可以在my

中看到一个示例，它仍然会滚动第二个场景