三、内容展示(02):图片

视频链接:哔哩哔哩

图片小部件主要功能是用来显示图片的。简单来说,它就像是一个画框,你可以把图片放进去,然后 Flutter 会帮你把图片展示在屏幕上。图片小部件还能让你调整图片的大小、形状,支持JPEG、PNG、GIF、动画GIF、WebP、动画WebP、BMP、WBMP等图像格式。

图片来源可以是从互联网上获取的,也可以是你手机里的一张照片,基于此平台引入了网络图片我的文件两个概念

  • 网络图片,从互联网上获取图片(应用需要联网),在应用打包过程中,不会将图片一起打包。
  • 我的文件,从手机上获取图片(应用不需要联网),在应用打包过程中,会将图片一起打包。

应用场景

  1. 展示商品图片:在电商应用中,你可以使用图片小部件来展示商品的图片,让用户能够清楚地看到商品的外观。
  2. 展示用户头像:在社交应用中,你可以使用图片小部件来展示用户的头像,让用户能够识别彼此。
  3. 展示广告:在很多应用中,你都可以看到图片小部件被用来展示广告,吸引用户的注意力。
  4. 展示图片画廊:在图片分享应用或者用户的相册中,你可以使用图片小部件来展示一组图片,让用户能够欣赏和浏览。
  5. 展示背景图片:在一些应用中,你可以使用图片小部件来设置背景图片,让应用看起来更加美观和吸引人。

小技巧:

  • 应用场景:需要给图片加背景颜色
  • 解决方案:给图片加一层容器父组件,设置容器的背景颜色属性即可

常用属性

属性 作用 默认值
设置图片的宽度 200
设置图片的高度 200
装饰 设置图片的装饰, 按比例缩小
图片来源 设置图片的来源 如果图片来源为网络图片,则需要输入云端文件的地址 如果图片来源为我的文件,则需要在文件资源中选择一个文件即可,没有文件则进行上传文件 网络图片
图片对齐方式 设置图片的对齐方式 居中
圆角 设置图片的圆角,参考容器圆角
边框 设置图片的边框,参考容器边框
相关推荐
夜雨声烦丿2 小时前
Flutter 框架跨平台鸿蒙开发 - 思维导图开发教程
flutter·华为·harmonyos
2501_944526423 小时前
Flutter for OpenHarmony 万能游戏库App实战 - 蜘蛛纸牌游戏实现
android·java·python·flutter·游戏
IT陈图图3 小时前
基于 Flutter × OpenHarmony 开发的文本处理工具箱首页
flutter·华为·openharmony
小白阿龙3 小时前
鸿蒙+Flutter 跨平台开发——一款“随机宝盒“的开发流程
flutter·华为·harmonyos·鸿蒙
爱吃大芒果4 小时前
Flutter for OpenHarmony前置知识:Dart 语法核心知识点总结(下)
开发语言·flutter·dart
小蜜蜂嗡嗡4 小时前
【flutter better_player_plus实现普通播放器功能】
flutter
AI_零食5 小时前
鸿蒙跨端框架 Flutter 学习 Day 6:异步编程:等待的艺术
学习·flutter·华为·交互·harmonyos·鸿蒙
猛扇赵四那边好嘴.5 小时前
Flutter 框架跨平台鸿蒙开发 - 旅游足迹记录本应用开发教程
flutter·华为·harmonyos·旅游
鸣弦artha6 小时前
Flutter框架跨平台鸿蒙开发——Button组件基础
flutter·华为·harmonyos
不会写代码0006 小时前
Flutter 框架跨平台鸿蒙开发 - 待办事项优先级排序开发教程
flutter·华为·harmonyos