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

视频链接:哔哩哔哩

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

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

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

应用场景

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

小技巧:

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

常用属性

属性 作用 默认值
设置图片的宽度 200
设置图片的高度 200
装饰 设置图片的装饰, 按比例缩小
图片来源 设置图片的来源 如果图片来源为网络图片,则需要输入云端文件的地址 如果图片来源为我的文件,则需要在文件资源中选择一个文件即可,没有文件则进行上传文件 网络图片
图片对齐方式 设置图片的对齐方式 居中
圆角 设置图片的圆角,参考容器圆角
边框 设置图片的边框,参考容器边框
相关推荐
WaywardOne9 小时前
Flutter组件化方案(AI总结)
前端·flutter·ai编程
YM52e10 小时前
鸿蒙 Flutter 渐变效果详解:LinearGradient、RadialGradient、SweepGradient
android·学习·flutter·华为·harmonyos·鸿蒙
YM52e10 小时前
鸿蒙 Flutter BoxDecoration装饰:打造精美UI效果
学习·flutter·ui·华为·harmonyos·鸿蒙
SL-staff11 小时前
(二十四)「JVS-Rules规则引擎 V2.5」— 决策树节点
低代码·决策树·规则引擎·jvs-rules·jvs·决策树节点
YM52e12 小时前
鸿蒙Flutter Card组件:Material设计风格卡片
android·学习·flutter·华为·harmonyos·鸿蒙
世人万千丶1 天前
鸿蒙Flutter TextStyle样式配置
学习·flutter·harmonyos·鸿蒙
nice先生的狂想曲1 天前
flutter中key的使用
flutter·客户端
常在士心1 天前
Flutter Dio高阶封装&多级缓存策略
flutter
司素网1 天前
Flutter Platform Channel 的 await 陷阱:为什么加与不加相差 100ms?
flutter
zengorange1 天前
Dart语言
学习·flutter