PhysicalModel实现圆角

在flutter中，给一个容器设置圆角，最简单的方法就是用Container包裹，然后给Container设置borderRadius，就像css中给div设置border-radius一样。但是，如果这个Container中的子容器含有背景色，在css中，如果子容器有背景色（可能子容器有很多），并且紧贴在div上，div设置了border-radius看不到，只有设置了overflow:hidden，将超过的裁掉，才能看到圆角，如下图：


但是在flutter中，Container并没有这个溢出隐藏的功能，此时，就要借助PhysicalModel实现圆角了，因为PhysicalModel有裁切功能，将超出圆角的部分切掉。先来看下PhysicalModel的构造函数：

PhysicalModel({
    //裁剪模式
    this.clipBehavior = Clip.none,
    //四角圆度半径
    this.borderRadius,
    //z轴高度
    this.elevation = 0.0,
    //设置阴影颜色
    this.shadowColor = const Color(0xFF000000),
})

使用示例：

class ServiceMenu extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return PhysicalModel(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(6)),
            // 裁切
            clipBehavior: Clip.antiAlias,
            elevation: 6.0,
            shadowColor: Colors.grey,
            child: ...,
        );
    }

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！