Flutter Image實(shí)現(xiàn)圖片加載

更新時(shí)間：2019年07月18日 08:37:42 作者：早起的年輕人

這篇文章主要為大家詳細(xì)介紹了Flutter Image實(shí)現(xiàn)圖片加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Image 簡(jiǎn)介

Android ios 原生中使用 ImageView 來(lái)加載顯示圖片。
在flutter 中通過(guò)Image來(lái)加載并顯示圖片。
所有的widget并不是直接繪制圖片的，而是控制的圖片的主要屬性的容器，負(fù)責(zé)繪制的是RenderObject，他們中間是通過(guò)ElementTree來(lái)聯(lián)系起來(lái)。有了這個(gè)基礎(chǔ)后，所有的widget都不會(huì)提供畫布(canvas)來(lái)直接繪制image
RawImage 這是一個(gè)最基礎(chǔ)圖片容器Widget。
Image 這是一個(gè)通用包裝類，它包裝了RawImage。

前言 Image 基本使用

從ImageProvider來(lái)獲取圖片顯示，這個(gè)類的使用基本和RawImage一致。

Widget image = Image(AssetImage("images/yuan.png"))

1 Image 加載網(wǎng)絡(luò)圖片

var imageUrl = "http://pic31.nipic.com/20130711/8952533_164845225000_2.jpg";

Image(
 image: NetworkImage(
 imageUrl),
 width: 100.0,
)

或者

Image.network(
 imageUrl,
 scale: 8.5,
),

或者

new FadeInImage.assetNetwork(
   //占位圖
   placeholder: 'images/logo.png',
   image: imageUrl,
   width: 120,
   fit: BoxFit.fitWidth,
   ),

或者

 new CachedNetworkImage(
  width: double.infinity,
  height: double.infinity,
  fit: BoxFit.fill,
  imageUrl: imageUrl,
  placeholder: (context, url) => new ProgressView(),
  errorWidget: (context, url, error) => new Icon(Icons.error),
  ),

2 Image 加載本地圖片

new Image.file(
 File('/storage/emulated/0/Download/test.jpg'),
 width: 120,
 fit: BoxFit.fill,
 //fill(全圖顯示且填充滿，圖片可能會(huì)拉伸)，contain（全圖顯示但不充滿，顯示原比例），cover（顯示可能拉伸，也可能裁剪，充滿）
 //fitWidth（顯示可能拉伸，可能裁剪，寬度充滿），fitHeight顯示可能拉伸，可能裁剪，高度充滿），scaleDown（效果和contain差不多，但是）
),

3 Image 加載assets圖片

3.1 在工程根目錄下創(chuàng)建一個(gè)images目錄，并將圖片xxx.png拷貝到該目錄。

3.2 在pubspec.yaml中的flutter部分添加如下內(nèi)容：

 assets:
 - images/xxx.png

3.3 代碼中使用

Image(
 image: AssetImage("images/xxx.png"),
 width: 100.0
);

或

Image.asset("images/xxx.png",
 width: 100.0,
)

4 加載圓角圖片

new ClipOval(
   child: Image.network(
   imageUrl,
   width: 100,
   height: 100,
   fit: BoxFit.fitHeight,
   ),
  ),

或者

new CircleAvatar(
   backgroundImage: NetworkImage(imageUrl),
   radius: 50.0,
  ),

5 加載圓角矩形圖片

new Container(
   width: 120,
   height: 60,
   decoration: BoxDecoration(
   shape: BoxShape.rectangle,
   borderRadius: BorderRadius.only(
   topLeft: Radius.circular(5),
   bottomLeft: Radius.circular(5),
   ),
   image: DecorationImage(
   image: NetworkImage(imageUrl),
//   image: AssetImage('images/icon_main_bg.png'),
   fit: BoxFit.cover),
   ),
  ),

或者

new ClipRRect(
   child: Image.network(
   imageUrl,
   scale: 8.5,
   fit: BoxFit.cover,
   ),
   borderRadius: BorderRadius.only(
   topLeft: Radius.circular(20),
   topRight: Radius.circular(20),
   bottomLeft: Radius.circular(20),
   bottomRight: Radius.circular(20),
   ),
  ),

3 Image 屬性說(shuō)明

const Image({
 ...
 this.width, //圖片的寬
 this.height, //圖片高度
 this.color, //圖片的混合色值
 this.colorBlendMode, //混合模式
 this.fit,//縮放模式
 this.alignment = Alignment.center, //對(duì)齊方式
 this.repeat = ImageRepeat.noRepeat, //重復(fù)方式
 ...
})

3.1 width、height

width、height：用于設(shè)置圖片的寬、高，當(dāng)不指定寬高時(shí)，圖片會(huì)根據(jù)當(dāng)前父容器的限制，盡可能的顯示其原始大小，如果只設(shè)置width、height的其中一個(gè)，那么另一個(gè)屬性默認(rèn)會(huì)按比例縮放，但可以通過(guò)下面介紹的fit屬性來(lái)指定適應(yīng)規(guī)則。

3.2 fit

fit：該屬性用于在圖片的顯示空間和圖片本身大小不同時(shí)指定圖片的適應(yīng)模式。適應(yīng)模式是在BoxFit中定義，它是一個(gè)枚舉類型，有如下值：

fill：會(huì)拉伸填充滿顯示空間，圖片本身長(zhǎng)寬比會(huì)發(fā)生變化，圖片會(huì)變形。
cover：會(huì)按圖片的長(zhǎng)寬比放大后居中填滿顯示空間，圖片不會(huì)變形，超出顯示空間部分會(huì)被剪裁。
contain：這是圖片的默認(rèn)適應(yīng)規(guī)則，圖片會(huì)在保證圖片本身長(zhǎng)寬比不變的情況下縮放以適應(yīng)當(dāng)前顯示空間，圖片不會(huì)變形。
fitWidth：圖片的寬度會(huì)縮放到顯示空間的寬度，高度會(huì)按比例縮放，然后居中顯示，圖片不會(huì)變形，超出顯示空間部分會(huì)被剪裁。
fitHeight：圖片的高度會(huì)縮放到顯示空間的高度，寬度會(huì)按比例縮放，然后居中顯示，圖片不會(huì)變形，超出顯示空間部分會(huì)被剪裁。
none：圖片沒(méi)有適應(yīng)策略，會(huì)在顯示空間內(nèi)顯示圖片，如果圖片比顯示空間大，則顯示空間只會(huì)顯示圖片中間部分。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: