Flutter 组件之Image、本地图片、远程图片、图片裁剪

旧城等待， 2023-07-15 11:30 21阅读 0赞

##### Image本地图片配置 #####

> 1.  `pubspec.yaml`中把`所有图片资源`添加到配置文件中,并且区分至少 `2.0x、3.0x`两种屏幕分辨率素材。
> 2.  在项目目录`images`中分别创建至少 `2.0x、3.0x`两种文件夹。
> 3.  将所有的图片分别放入`images`下的图片一层目录和`2.0x、3.0x`文件夹中
> 4.  引入`Image.asset("images/timg.jpg"）`后重启项目

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70]

##### Image 常用属性 #####

class StudyBodyImage extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Center(
          child: Container(
            //child:Image.network("地址"),//网络图片方式
              child: Image.asset(
                "images/timg.jpg",
                alignment: Alignment.center,//图片在盒子的位置
                color: Colors.pink,//背景颜色
                colorBlendMode: BlendMode.saturation,//混合颜色方式,可以改变图片的色系
                fit: BoxFit.cover,//图片的填充方式类似于css
                repeat:ImageRepeat.repeatX,//平铺方式类似于css
              ),
            width: 500.0,
            height: 800.0,
          ),
        );
      }
    }

##### ClipOval 裁剪 #####

class StudyBodyImage extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Center(
          child: Container(
            child: ClipOval(//裁剪成圆角图片结合高度宽度
              child: Image.asset(
                "images/timg.jpg",
                alignment: Alignment.center,
                colorBlendMode: BlendMode.saturation,
                width: 500,
                height: 800,
                fit: BoxFit.cover,
              ),
            ),
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70]: /images/20230528/d0f868c5d5744c93850fda72c25bfea2.png