Flutter 浅析之Image

技术无止境，只怕不学习啊，Flutter 我们开始吧

Flutter Image图片

添加 Image空间 首相Image有四种加载图片的方式
network 加载网络图片
file 本地文件
asset 资源目录
主要讲解asset 资源目录

添加图片文件夹

在lib 同一个目录下添加images文件夹

把需要使用的图片复制到images文件夹中然后在pubspec.yaml中配置

注意格式

在容器中添加Image读取资源图片

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Image',theme: new ThemeData(primaryColor: Colors.white,),home: Scaffold(body: Center(child: Container(child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录"images/timg.jpeg",)，width: 200, // Container 的宽height: 200, // Container 的高),),),);}
}

fit图片填充 基本属性已经列出可以自行演示

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Image',theme: new ThemeData(primaryColor: Colors.white,),home: Scaffold(body: Center(child: Container(color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录"images/timg.jpeg",fit: BoxFit.fill, // contain 保持原图比例，fill填充图片图片不保帧，// fitWidth横向填充图片不会被裁减，fitHeight纵向填充图片不会被裁减//cover 图片可能被裁切，但是保帧，scaleDown原图片大),width: 200, // Container 的宽height: 200, // Container 的高),),),);}
}

图片混合模式设置colorBlendMode 需要设置color

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Image',theme: new ThemeData(primaryColor: Colors.white,),home: Scaffold(body: Center(child: Container(color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录"images/timg.jpeg",fit: BoxFit.fill, // contain 保持原图比例，fill填充图片图片不保帧，// fitWidth横向填充图片不会被裁减，fitHeight纵向填充图片不会被裁减//cover 图片可能被裁切，但是保帧，scaleDown原图片大小color: Colors.greenAccent,  // 图片混合 设置颜色colorBlendMode: BlendMode.darken, // 图片混合模式),width: 200, // Container 的宽height: 200, // Container 的高),),),);}
}

图片重复repeat

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Image',theme: new ThemeData(primaryColor: Colors.white,),home: Scaffold(body: Center(child: Container(color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录"images/timg.jpeg",fit: BoxFit.contain, // contain 保持原图比例，fill填充图片图片不保帧，// fitWidth横向填充图片不会被裁减，fitHeight纵向填充图片不会被裁减//cover 图片可能被裁切，但是保帧，scaleDown原图片大小color: Colors.greenAccent,  // 图片混合 设置颜色colorBlendMode: BlendMode.darken, // 图片混合模式repeat: ImageRepeat.repeatY, // 图片不重复noRepeat ，repeat重复把容器填满，repeatX横向重复，repeatY纵向重复),width: 200, // Container 的宽height: 200, // Container 的高),),),);}
}

Image 就介绍到这里，其他的可以根据自己的使用查询API