flutter - 如何让 Stack 的一个元素出现在另一个元素之外？

Question

这是视觉上解释的问题我正在尝试使用 Stack 小部件将文本小部件堆叠在放置在中心的圆形头像上。当我尝试使用 Positioned 小部件将其放置在圆形 Avatar 的底部和右侧时，文本小部件似乎被剪裁了。

Stack(
          children: <Widget>[
                // circle avatar has to be on the center
                CircleAvatar(
                  radius: 40, //making the border of circleAvatar appear amber colored
                  backgroundColor: Colors.amber[900],
                  child: CircleAvatar(
                    // backgroundImage:
                    //     AssetImage('assets/images/img1.png'),
                    radius: 38,
                  ),
                ),

                // this has to be on the right near the  circle avatar on the same row
                Positioned(
                  bottom: 0,
                  right: 0,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Text('Dummytext1'),
                      SizedBox(
                        height: 5,
                        width: 5,
                      ),
                      Text('dummytext2')
                    ],
                  ),
                ),
              ]),

标签： flutteruser-interfacedart

Answer 1

将clipBehaviour添加到堆栈

Stack(
  clipBehaviour: Clip.none,
  children: <Widget>[
]
),

这将迫使它不剪辑任何溢出的内容