带有滚动列表的动画容器 - Flutter答案

【问题标题】：Animated Container with scrolling list - Flutter带有滚动列表的动画容器 - Flutter
【发布时间】：2022-01-07 13:14:53
【问题描述】：

我尝试在 Flutter 中实现一个相当复杂的屏幕。它是一个带有视差背景的滚动视图和……一种折叠工具栏。我知道我可能必须使用 NestedScrollView 和 SliverAppBar(?)，但不确定从哪里开始实施。我认为一张图片最能展示我想要完成的工作：

列表从容器下方开始。当您滚动列表时，Container 会缩小为更小的 Container 并固定在顶部。那有意义吗？任何帮助将不胜感激！

【问题讨论】：

这是使用SliverAppBar 和expandedHeight

标签： flutter flutter-layout flutter-animation animatedcontainer

【解决方案1】：

这是使用 SliverAppBar 和 expandedHeight。我会鼓励检查this video。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => CustomScrollView(
          slivers: [
            SliverAppBar(
              pinned: true,
              expandedHeight: constraints.maxHeight * .3,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("Title"),
                background: Container(
                  color: Colors.pink,
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: constraints.maxHeight * 4,
                color: Colors.deepOrange,
              ),
            )
          ],
        ),
      ),
    );
  }

【讨论】：