首页 > 建站教程 > APP开发,混合APP >  PhysicalModel实现圆角正文

PhysicalModel实现圆角

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

PhysicalModel

但是在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: ...,
        );
    }