Flutter Stack 和 Card 使用答案

【问题标题】：Flutter Stack and Card usingFlutter Stack 和 Card 使用
【发布时间】：2020-09-19 04:23:58
【问题描述】：

我希望它看起来像第一张图片，但我找不到方法，请帮忙？

我尝试为此堆叠和定位小部件，但是当我使用定位小部件顶部或左侧负值时，我的容器似乎无法处理它。

我的主要问题是我无法将绿色圆圈容器从卡片区域中取出

Stack(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Center(
                            child: Container(
                              width: 52,
                              height: 52,
                              decoration: BoxDecoration(
                                color: Color(0xffDCDCDC),
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          top: 0,
                          left: 0,
                          child: Container(
                            width: 31,
                            height: 19,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Color(0xffE9E9E9),
                            ),
                            child: Container(
                              margin: EdgeInsets.only(left: 12),
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.white),
                              child: Container(
                                width: 15,
                                height: 15,
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Color(0xff5CE02E)),
                              ),
                            ),
                          ),
                        ),

【问题讨论】：

请分享您的代码。
在 Positioned 小部件中增加 top 和 left 的值。
第一张和第二张图片有什么不同？
第一张图中的绿圈在卡片区域之外

标签： user-interface flutter frontend

【解决方案1】：

Stack(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Center(
                            child: Container(
                              width: 52,
                              height: 52,
                              decoration: BoxDecoration(
                                color: Color(0xffDCDCDC),
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          top: 10,
                          left: 10,
                          child: Container(
                            width: 31,
                            height: 19,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Color(0xffE9E9E9),
                            ),
                            child: Container(
                              margin: EdgeInsets.only(left: 12),
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.white),
                              child: Container(
                                width: 15,
                                height: 15,
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Color(0xff5CE02E)),
                              ),
                            ),
                          ),
                        ),

【讨论】：