Flutter 图片 Image 容器组件详解

Flutter 图片 Image 容器组件

---

Flutter 基础组件 Image 图片容器组件详情使用介绍

Flutter Image 组件介绍

引入图片的几种方式：

• Image.asset: 加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
• Image.network: 网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
• Image.file: 加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
• Image.memory: 加载Uint8List资源图片,不怎么使用

常用的基础参数：

• fit :
  • BoxFit.fill: 全图显示，图片会被拉伸，并充满父容器。
  • BoxFit.contain: 全图显示，显示原比例，可能会有空隙。
  • BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
  • BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
  • BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
  • BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大
• repeat :
  • ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
  • ImageRepeat.repeatX: 横向重复，纵向不重复。
  • ImageRepeat.repeatY：纵向重复，横向不重复。
• width: 一般结合 ClipOval 组件才能看到效果
• height: 一般结合 ClipOval 组件才能看到效果

1. 基础图片引入，代码案例演示：

// HomeCOntent 组件
class HomeCOntent extends StatelessWidget{
   
  @override
  Widget build(BuildContext context) {
   
    // TODO: implement build
    return Center(
      child: Container(
        child