如何在 sliver 中创建自定义堆栈出现在颤动中？答案

【问题标题】：How to create a custom stack in sliver appear in flutter?如何在 sliver 中创建自定义堆栈出现在颤动中？
【发布时间】：2020-01-21 07:56:06
【问题描述】：

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

SliverAppBar 在展开状态下需要显示如下视图：

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

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

我不知道该怎么做。

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

折叠堆栈的代码：

             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,
                      ),
                    )
                  ],
                ),

【问题讨论】：

标签： android flutter dart flutter-layout flutter-sliver

【解决方案1】：

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

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

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

【讨论】：