零基础学Flutter编程-UI控件_Image

什么是Image

Image是用于显示图片的UI控件.

常见样例 1. 显示本地图片

• 在工程目录下新建一个存放图片目录，如images，并放入图片
• 修改pubspec.yaml文件，增加图片目录配置：
• 代码：

Image(
  image: AssetImage('images/beauty.jpg'),
),

或者

new Image.asset(
  'images/beauty.jpg',
),

2. 设置图片大小

• 效果图：
• 代码：

Image(
  image: AssetImage('images/beauty.jpg'),
  width: 100,
  height: 100,
)

3. 显示网络图片

• 效果图：
• 代码：

Image(
  image: NetworkImage('http://pic1.win4000.com/wallpaper/2017-10-25/59f083092ed4f.jpg'),
)

4. 显示圆形图片

• 效果图：
• 代码：

CircleAvatar(
  backgroundColor: Colors.white,
  backgroundImage: NetworkImage('http://pic1.win4000.com/wallpaper/2017-10-25/59f083092ed4f.jpg'),
  //半径越大，图片越大
  radius: 50,
),

常用属性及方法 属性(方法)名用途alignment设置图像对齐方式colorColor - 该颜色与每个图像像素混合colorBlendModecolorBlendModeBlendMode - 用于 color 与此图像结合使用fitBoxFit - 图像在布局中分配的空间image设置图片repeat未充满容器时，图像重复方式height设置图像高度width设置图像宽度 完整源代码

https://gitee.com/hspbc/flutter_demos/tree/master/image_demo

其他零基础系列

《零基础学安卓编程》 《零基础学Java编程》 《零基础学鸿蒙编程》

关于我

厦门大学计算机专业 | 前华为工程师 专注《零基础学编程系列》，包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙 全网可关注：花生皮编程