Flutter教學(xué)目錄持續(xù)更新中
github源代碼持續(xù)更新中
1.Image介紹
Image是一個(gè)用于展示圖片的組件。支持 JPEG提揍、PNG、GIF、Animated GIF傀广、WebP栓袖、Animated WebP册养、BMP 和 WBMP 等格式。
2.Image 的靜態(tài)函數(shù)
Image.asset - 用于從資源目錄的顯示圖片,需要在 pubspec.yaml 文件中聲明咆爽。
Image.network - 用于從網(wǎng)絡(luò)上顯示圖片。
Image.file - 用于從文件里顯示圖片置森。
Image.memory - 用于從內(nèi)存里（Uint8List）顯示圖片斗埂。
3.Image 常用屬性
alignment → AlignmentGeometry - 圖像邊界內(nèi)對(duì)齊圖像。
centerSlice → Rect - 九片圖像的中心切片凫海。
color → Color - 該顏色與每個(gè)圖像像素混合colorBlendMode呛凶。
colorBlendMode → BlendMode - 用于 color 與此圖像結(jié)合使用。
fit → BoxFit - 圖像在布局中分配的空間行贪。
gaplessPlayback → bool - 當(dāng)圖像提供者發(fā)生變化時(shí)漾稀，是繼續(xù)顯示舊圖像（true）還是暫時(shí)不顯示（false）。
image → ImageProvider - 要顯示的圖像建瘫。
matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection崭捍。
repeat → ImageRepeat - 未充分容器時(shí)，是否重復(fù)圖片啰脚。
height → double - 圖像的高度殷蛇。
width → double - 圖像的寬度。
4.使用方法
加載資源圖片需要將圖片資源放入工程中橄浓，例如：新建images文件夾粒梦，將圖片放在該文件夾下，圖片適配則是使用ios的方式1X荸实，2X匀们，3X：
然后在pubspec.yaml中配置assets：
加載資源/網(wǎng)絡(luò)/本地文件圖片/內(nèi)存圖片：
Container(
color: Colors.grey,
margin: EdgeInsets.only(top: 10, bottom: 10),
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
children: [
Expanded(
child: Image(
image: AssetImage('images/scan.png'),
),
),
Expanded(
child: Image(image: NetworkImage(imageUrl)),
),
Expanded(
child: Image(
image: FileImage(File('')),
//byte 數(shù)組加載成圖片
// image: MemoryImage(),
),
),
],
),
),
占位圖加載圖片：
Container(
color: Colors.grey,
margin: EdgeInsets.only(top: 10, bottom: 10),
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: FadeInImage.assetNetwork(
placeholder: 'images/scan.png',
image: 'qqqqqq',
width: 100,
height: 100,
)),
Expanded(
child: FadeInImage.assetNetwork(
placeholder: 'images/scan.png',
image: imageUrl,
width: 100,
height: 100,
)),
//也可以使用內(nèi)存圖片做占位圖
// Expanded(
// child: FadeInImage.memoryNetwork(
// placeholder:Uint8List ,
// image: imageUrl,
// width: 100,
// height: 100,
// ))
],
),
)
圓形圖片：1.裁剪實(shí)現(xiàn) 2.CircleAvatar實(shí)現(xiàn) 3.Container邊框?qū)崿F(xiàn)
Container(
color: Colors.grey,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ClipRRect(
child: Image.network(
imageUrl,
fit: BoxFit.cover,
width: 100,
height: 100,
),
borderRadius: BorderRadius.circular(50),
),
CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: NetworkImage(imageUrl),
//半徑越大，圖片越大
radius: 50,
),
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: NetworkImage(imageUrl), fit: BoxFit.cover),
shape: BoxShape.circle),
),
],
),
),
圓角圖片：1.裁剪實(shí)現(xiàn) 2.Container邊框?qū)崿F(xiàn)
Container(
color: Colors.grey,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ClipRRect(
child: Image.network(
imageUrl,
width: 100,
height: 100,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10),
),
Container(
margin: EdgeInsets.only(left: 10),
width: 100,
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(imageUrl), fit: BoxFit.cover),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10)),
),
],
),
),
5.fit：BoxFit
BoxFit.contain 全圖居中顯示但不充滿(mǎn)准给，顯示原比例
BoxFit.cover 圖片可能拉伸昼蛀，也可能裁剪宴猾，但是充滿(mǎn)容器
BoxFit.fill 全圖顯示且填充滿(mǎn)，圖片可能會(huì)拉伸
BoxFit.fitHeight 圖片可能拉伸叼旋，可能裁剪仇哆，高度充滿(mǎn)
BoxFit.fitWidth 圖片可能拉伸，可能裁剪夫植，寬度充滿(mǎn)
BoxFit.scaleDown 效果和contain差不多讹剔， 但是只能縮小圖片，不能放大圖片
Container(
color: Colors.grey,
margin: EdgeInsets.only(top: 10, bottom: 10),
padding: EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity,
height: 100,
child: Image(
image: NetworkImage(imageUrl),
fit: BoxFit.cover,
),
),
Container(
width: double.infinity,
height: 100,
child: Image(
image: NetworkImage(imageUrl),
fit: BoxFit.fill,
),
),
Container(
width: double.infinity,
height: 100,
child: Image(
image: NetworkImage(imageUrl),
fit: BoxFit.contain,
),
),
Container(
width: double.infinity,
height: 100,
child: Image(
image: NetworkImage(imageUrl),
fit: BoxFit.scaleDown,
),
),
Container(
width: double.infinity,
height: 100,
child: Image(
image: NetworkImage(imageUrl),
fit: BoxFit.fitHeight,
),
),
Container(
width: double.infinity,
height: 100,
child: Image(
image: NetworkImage(imageUrl),
fit: BoxFit.fitWidth,
),
),
],
),
),
下一節(jié)學(xué)習(xí)基礎(chǔ)組件之Text
