圖片組件（Image）

圖片組件（Image）是顯示圖像的組件，Image組件有多重構造函數：

new Image：從ImageProvidrer獲取圖像。

new Image.asset：加載資源圖片。

new Image.file：加載本地圖片文件。

new Image.network：加載網絡圖片。

new Image.memory：加載Uint8List資源圖片。

 

Image組件常見屬性如下：

屬性名	類型	說明
image	ImageProvider	抽象類，需要自己實現獲取圖片數據的操作。
width/height	double	Image顯示區域的寬度和高度設置，這裏需要把Image和圖片兩個東西區分開，圖片本身有大小，Image Widget是圖片的容器，本身也有大小。寬度和高度的配置經常和fit屬性配合使用
fit	BoxFit	圖片填充模式，具體取值見下一個表
color	Color	圖片顏色
colorBlendMode	BlendMode	在對圖片進行手動處理的時候，可能用到圖層混合，如改變圖片的顏色。此屬性可以對顏色進行混合處理。有多種模式
alignment	Alignment	控制圖片的擺放位置，比如圖片放置在右下角爲Alignment.bottomRight
repeat	ImageRepeat	此屬性可以設置圖片重複模式。noRepeat爲不重複，Repeat爲x和y方向重複，repeatX爲x方向重複，repeatY爲y方向重複
centerSlice	Rect	當圖片需要被拉伸顯示時，centerSlice定義的矩形區域會被拉伸，可以理解成我們在圖片內部定義一個點9個點文件用作拉伸，9個點爲“上”“下”“左”“右”“上中”“下中”“左中”“右中”“正中”
matchTextDirection	bool	matchTextDirection與Directionality配合使用。TextDirection有兩個值分別爲：TextDirection.ltr從左向右展示圖片，TextDirection.rtl從右向左展示圖片
gaplessPlayback	bool	當ImageProvider發生變化後，重新加載圖片的過程中，原圖片的展示是否保留。值爲true則保留；值爲false則不保留，直接空白等待下一張圖片加載

 

BoxFit取值及描述參見表：

取值	描述
BoxFit.fill	全圖顯示，顯示可能拉伸，充滿
BoxFit.contain	全圖顯示，顯示原比列，不需充滿
BoxFit.cover	顯示可能拉伸，肯能裁剪，充滿
BoxFit.fitWidth	顯示可能拉伸，肯能裁剪，寬度充滿
BoxFit.fitHeight	顯示可能拉伸，肯能裁剪，高度充滿
BoxFit.none	原始大小
BoxFit.scaleDown	效果和BoxFit.contain差不多，但是此屬性不允許顯示超過源圖片大小，即可小不可大

 

1. 本地圖片

Image.asset加載項目資源包的圖片

 

//先將圖片拷貝到項目 images 目錄中，然後在 pubspec.yaml文件配置文件相對路徑到 assets

Image.asset(

'images/cat.jpg',

width: 200,

height: 200,

)

Image.file加載手機內置或外置存儲的圖片

 

//加載Android平臺的外置存儲圖片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE權限

Image.file(

File('/0/images/cat.jpg'),

width: 200,

height: 200,

)

 

2. 網絡圖片

Image.network無本地緩存

 

Image.network(

'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',

width: 200,

height: 200,

)

FadeInImage.assetNetwork淡入效果，無本地緩存

 

FadeInImage.assetNetwork(

placeholder: 'images/avatar.png',

image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',

width: 200,

height: 200

)

 

CachedNetworkImage第三方控件，有本地緩存和淡入效果

 

//1、將依賴框架配置到pubspec.yaml文件

dependencies:

cached_network_image: ^0.7.0

 

//2、引入相關類

import 'package:cached_network_image/cached_network_image.dart';

 

//3、使用控件，默認自帶圖片淡入效果

CachedNetworkImage(

imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',

width: 200,

height: 200,

)

圓形頭像

方式1: CircleAvatar
CircleAvatar(
  //頭像半徑
  radius: 60,
  //頭像圖片 -> NetworkImage網絡圖片，AssetImage項目資源包圖片, FileImage本地存儲圖片
  backgroundImage: NetworkImage(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'
  ),
)
方式2: ClipOval
ClipOval(
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
)

方式3: Container + BoxDecoration
Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
      fit: BoxFit.cover
    )
  )
)

 圓角圖片

方式1: ClipRRect
ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120
  )
)
方式2: Container + BoxDecoration
Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)

 各種形狀

使用ShapeDecoration可以做出各種形狀

斜切角: BeveledRectangleBorder
圓角: RoundedRectangleBorder
超橢圓: SuperellipseShape
體育場: StadiumBorder
圓形: CircleBorder
//斜切角形狀示例
Container(
  width: 120,
  height: 120,
  decoration: ShapeDecoration(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(16)
    ),
    image: DecorationImage(
      fit: BoxFit.cover,
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)