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

發(fā)布時間：2020-10-04 05:32:41 來源：腳本之家閱讀：228 作者：早起的年輕人欄目：移動開發(fā)

Image 簡介

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

前言 Image 基本使用

從ImageProvider來獲取圖片顯示，這個類的使用基本和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),
  ),

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

2 Image 加載本地圖片

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

3 Image 加載assets圖片

3.1 在工程根目錄下創(chuàng)建一個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 加載圓角圖片

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

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

或者

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

5 加載圓角矩形圖片

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

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 屬性說明

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

3.1 width、height

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

3.2 fit

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽