您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-05(图片组件)

2020-04-29【Flutter】1309人已围观

简介## 一、Flutter 图片组件是显示图像的组件，`Image` 组件有很多构造函数 - `Image.asset`，本地图片 - `Image.network` 远程图片 **Image 组件的常用属性:** 名称 | 类型 | 说明 ---|---|--- alignment | Alignment | 图片的对齐方式 color 和colorBlendMode | | 设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景

## 一、Flutter

图片组件是显示图像的组件，`Image` 组件有很多构造函数
- `Image.asset`， 本地图片
- `Image.network` 远程图片

**Image  组件的常用属性:**

名称 | 类型 | 说明
---|---|---
alignment | Alignment | 图片的对齐方式
color 和colorBlendMode | | 设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
fit | BoxFit | 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 才能看到效果

```
return Center(
      child: Container(
        child: Image.network(
          "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
          alignment: Alignment.topLeft,
          color: Colors.red,
          colorBlendMode: BlendMode.colorDodge,
// repeat: ImageRepeat.repeatX,
          fit: BoxFit.cover,
        ),
        width: 300.0,
        height: 400.0,
        decoration: BoxDecoration(color: Colors.yellow),
      ),
    );
```

## 二、Flutter  引入本地图片

打开 `pubspec.yaml` 声明一下添加的图片文件

```
uses-material-design: true
assets:
 - images/a_dot_burr.jpeg
 - images/a_dot_ham.jpeg
```

最后，在代码中就可以用了

```
child: Container(
  child: Image.asset("images/a.jpeg", fit: BoxFit.cover),
  width: 300.0,
  height: 300.0,
  decoration: BoxDecoration(color: Colors.yellow),
),
```

## 三、Flutter  实现圆角以及实现圆形图片

实现圆角图片

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-04(Flutter Container 组件、Text 组件详解)

下一篇：flutter-06 ListView 基础列表组件、水平列表组件、图标组件