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

Question

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

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

Answer 1

这是使用SliverAppBarwith expandedHeight。我会鼓励检查这个视频。

  @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,
              ),
            )
          ],
        ),
      ),
    );
  }