flutter 中 不管是三方图片显示插件 还是自带的 Image.asset  Image.netWork 操作图片外层的Container 元素 ,是不能限制图片的显示形状的

官方自带

ClipOval和 ClipRRect 方法

//圆形裁剪
ClipOval(
      
      child: Image.asset(
        'assets/images/demo1.png',
        fit: fit,
        width: 300,
        height: 300,
      ),
 )

/**
 * 源码  圆角矩形裁剪
 *  const ClipRRect({
    Key key,
    this.borderRadius,//圆角半径
    this.clipper,//裁剪路径
    this.clipBehavior = Clip.antiAlias,
    Widget child,
    })
 */



//自定义裁剪

ClipRRect(
      
      child: Image.asset(
        'assets/images/demo1.png',
        fit: fit,
        width: 300,
        height: 300,
      ),
 )



/*自定义裁剪源码 
ClipRRect({
    Key key,
    this.borderRadius = BorderRadius.zero,//圆角角度
    this.clipper,  //裁剪路径
    this.clipBehavior = Clip.antiAlias,//
    Widget child,
*/
看源码 自己做
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐