如何在 Sliver 中创建自定义堆栈出现在 flutter 中？

Question

大家好，我正在为 flutter 应用程序创建个人资料页面。

SliverAppBar 在展开的 state 中需要显示以下视图：

当用户滚动银色列表时，下面的视图。

如您所见，这是我可以创建的自定义堆栈。

我不知道如何在 flutter 的条子中做到这一点。

任何链接也将受到高度赞赏，以深入了解 flutter 和条子，尤其是。

折叠堆栈的代码：

             Stack(
                  alignment: Alignment.topRight,
                  children: <Widget>[
                    Container(
                        margin: EdgeInsets.only(top: 12),
                        width: 2000,
                        height: 80,
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(blurRadius: 5.0, color: Colors.black87)
                        ])),
                    Container(
                      margin: EdgeInsets.only(right: 20, top: 5),
                      decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(blurRadius: 5.0, color: Colors.black87)
                          ],
                          border: Border.all(color: Colors.cyan, width: 3.0)),
                      child: CircleAvatar(
                        backgroundImage: AssetImage(
                            "assets/images/food/avocado-f.jpg"),

                        radius: 50,
                      ),
                    )
                  ],
                ),

Answer 1

您应该使用SliverPersistentHeader并创建自己的SliverPersistentHeaderDelegate 。

在构建方法中，您添加 Stack 视图，您可以使用 Transform 或 SizedBox 根据 header 的高度来缩放和变换圆。

有一个很好的教程解释了如何使用这个小部件https://medium.com/flutter-community/how-to-code-a-dynamic-header-in-flutter-e171ec2231bf