Flutter如何实现将Container显示在另一Container的右上角外部

解决方案 #

你需要对代码做两处调整即可实现预期效果：

• 给Stack组件新增clipBehavior: Clip.none配置：Stack默认会裁剪超出自身边界的子组件，关闭裁剪后才能让角标显示在容器外部
• 将Positioned的top、right属性值设置为负数：你当前设置的0是对齐Stack内部的右上角，设置为负值后就会向外偏移，数值可以根据实际显示效果微调

修改后的完整代码如下：

Stack(
      clipBehavior: Clip.none, // 新增关闭边界裁剪配置
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            color: Color(0xffd1e6f5),
            borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SvgPicture.asset(
                  "assets/icon/notification.svg",
                ),
          ),
        ),
        Positioned(
          top: -5.0, // 改为负值向上偏移
          right: -5.0, // 改为负值向右偏移
          child: Container( decoration: BoxDecoration(
            color: Color(0xff009fe1),
            borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Padding(
            padding: const EdgeInsets.all(3.0),
            child: Text('01'),
          ),),
        )
      ]
    )

内容的提问来源于stack exchange，提问作者rameez khan