什么是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 设置图像对齐方式
color Color - 该颜色与每个图像像素混合colorBlendMode
colorBlendMode BlendMode - 用于 color 与此图像结合使用
fit BoxFit - 图像在布局中分配的空间
image 设置图片
repeat 未充满容器时，图像重复方式
height 设置图像高度
width 设置图像宽度

完整源代码

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

其他零基础系列

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

关于我

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

# flutter # ui # android
Logo
开源鸿蒙跨平台开发者社区

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

更多推荐

cover

Flutter & OpenHarmony 运动App运动数据导出组件开发

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter&OpenHarmony商城App商品列表组件开发

avatar 开源鸿蒙跨平台开发者社区

鸿蒙与Flutter移动开发

想将一个成熟的 Flutter 三方插件搬到 OpenHarmony（OHOS）上跑起来吗？本文就以常用的open_file插件为例，聊聊怎么操作。我们不仅会给出详细的步骤，还会深入拆解 Flutter 平台通道（Platform Channel）与 ArkTS 原生能力交互的原理。内容涵盖了从环境配置、目录改造、通信实现到性能优化的全过程，并附上可跑的代码和实测数据，希望能帮你打通 Flutte

avatar 开源鸿蒙跨平台开发者社区