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

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"）后重启项目

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,
          ),
        ),
    );
  }
}