android - 如何创建自定义堆栈中的条子出现在 flutter 中？

Question

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

处于展开状态时，SliverAppBar需要显示以下 View :



当用户滚动白名单时，在 View 下方。



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

我不知道该如何处理。

任何链接也将不胜感激，尤其是要深入学习有关 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。

在构建方法中，添加“堆栈” View ，然后可以使用Transform或SizedBox来缩放和变换圆形，具体取决于标题的高度。

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