FlutterImage中怎么實現(xiàn)圖片加載

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)FlutterImage中怎么實現(xiàn)圖片加載，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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(全圖顯示且填充滿，圖片可能會拉伸)，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 加載圓角圖片

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

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)顯示圖片，如果圖片比顯示空間大，則顯示空間只會顯示圖片中間部分。

上述就是小編為大家分享的FlutterImage中怎么實現(xiàn)圖片加載了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。