Flutter技术问题：容器子元素溢出带圆角的BoxDecoration

要让图片不溢出容器的圆角边缘，只需给你的Container添加clipBehavior: Clip.hardEdge属性即可。

修改后的代码： #

FlipCard(
          fill: Fill.fillBack,
          direction: FlipDirection.HORIZONTAL,
          speed: 400,
          front: Container(
            width: 200,
            height: 200,
            // 添加该行，让容器剪裁超出边界的子组件
            clipBehavior: Clip.hardEdge,
            child: InteractiveViewer(
                minScale: 0.1,
                constrained: false,
                panEnabled: false,
                scaleEnabled: false,
                transformationController: controller,
                child: _tToImage(t),
              ),
            decoration: BoxDecoration(
              color: Config.BUTTON_CLR,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(12)),
              border: Border.all(
                width: 1,
              ),
            ),
            alignment: AlignmentDirectional(0, 0),
          ),

说明： #

Flutter中Container默认不会对超出自身边界的子组件进行剪裁，加上clipBehavior: Clip.hardEdge后，容器会按照自己的圆角形状裁剪所有子元素，这样图片就不会溢出圆角边缘了。

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