前言
-
Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開發(fā)框架工扎，正在被越來越多的開發(fā)者和組織使用，包括阿里的咸魚泌豆、騰訊的微信等定庵。
示意圖 今天，我主要講解Flutter中圖片組件方面的Widget踪危，包括Image蔬浙、Icon、ImageIcon贞远，希望你們會(huì)喜歡畴博。
示意圖
1. Image
1.1 作用
顯示圖片，主要支持的加載方式：本地圖片蓝仲、資源圖片 & 網(wǎng)絡(luò)圖片俱病。
1.2 常用屬性
const Image({
Key key,
@required this.image,// ImageProvider，必填參數(shù)袱结，接收一個(gè)ImageProvider 類型的值
this.semanticLabel, // String亮隙，圖片的描述
this.excludeFromSemantics = false, // bool，是否從語義上排除該圖片垢夹，默認(rèn)值為false
this.width, // double溢吻，圖片的寬度
this.height, // double，圖片的高度
this.color, // Color果元，圖片的前景色促王，一般不設(shè)置或設(shè)置透明色，會(huì)覆蓋掉圖片而晒，一般會(huì)和colorBlendMode結(jié)合使用
this.colorBlendMode, // BlendMode蝇狼，一般和color結(jié)合使用，設(shè)置color的混合模式
this.fit, // BoxFit倡怎，設(shè)置圖片的顯示模式
this.alignment = Alignment.center, // AlignmentGeometry迅耘，用于設(shè)置圖片的對(duì)齊方式贱枣，默認(rèn)值：Alignment.center
this.repeat = ImageRepeat.noRepeat, // ImageRepeat，圖片的重復(fù)方式豹障，當(dāng)圖片沒有完全覆蓋掉容器時(shí)使用冯事。默認(rèn)值：ImageRepeat.noRepeat
...
})
下面，將詳細(xì)講解Image的屬性血公。
1.3 屬性image
- 接收一個(gè)ImageProvider類型的值昵仅。ImageProvider是一個(gè)抽象類
- 實(shí)現(xiàn)類主要包括：AssetImage、MemoryImage累魔、NetworkImage摔笤、FileImage，分別表示可從資源垦写、內(nèi)存吕世、網(wǎng)絡(luò) & 文件中獲取圖片
// 加載網(wǎng)絡(luò)圖片
Image.network(String src, {
Key key,
double scale = 1.0,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
Map<String, String> headers,
})
// 加載本地文件
Image.file(File file, {
Key key,
double scale = 1.0,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
})
// 從項(xiàng)目資源中加載
Image.asset(String name, {
Key key,
AssetBundle bundle,
this.semanticLabel,
this.excludeFromSemantics = false,
double scale,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
String package,
this.filterQuality = FilterQuality.low,
})
// 從內(nèi)存中加載
Image.memory(Uint8List bytes, {
Key key,
double scale = 1.0,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
})
為了方便使用，在Image的構(gòu)造方法里也加入了快速從各種不同途徑獲得圖片的方式梯投，Image的構(gòu)造方法包括：
Image() // 通用方法命辖，使用ImageProvider實(shí)現(xiàn)，如下方法本質(zhì)上也是使用的這個(gè)方法
Image.asset // 加載資源圖片
Image.file // 加載本地圖片文件
Image.network // 加載網(wǎng)絡(luò)圖片
Image.memory // 加載Uint8List資源圖片
// 獲得資源圖片
new Image.asset('imgs/logo.jpeg')
// 獲得網(wǎng)絡(luò)圖片
new Image.network(
'https://flutter.io/images/homepage/header-illustration.png')
// 獲得本地文件圖片
new Image.file(new File("/Users/gs/Downloads/1.jpeg"))
// 獲得Uint8List圖片
new Image.memory(bytes)
// 獲得使用ImageProvider加載圖片
new Image(image: new NetworkImage(
"https://flutter.io/images/homepage/screenshot-2.png"),)
此處特別說明加載本地的資源圖片
步驟1：創(chuàng)建一個(gè)文件夾存放圖片
此處創(chuàng)建的是文件夾名 = assetImage分蓖，放了一個(gè)名為photo.jpg的圖片
步驟2：在pubspec.yaml中聲明資源
注：聲明時(shí)路徑和前面的- 存在間隔
步驟3：加載時(shí)填寫正確資源路徑
// 獲得資源圖片
new Image.asset('assetImage/photo.jpg')
- 實(shí)際測(cè)試代碼
main.dart
import 'package:flutter/material.dart';// Material UI組件庫
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象尔艇，用來定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: new Image.asset('assetImage/photo.jpg')
);
}
}
- 測(cè)試效果
1.4 屬性width & height么鹤、fit
- 屬性說明
// 代表Image顯示區(qū)域的寬度和高度設(shè)置
this.width, // double终娃，圖片的寬度
this.height, // double，圖片的高度
this.fit, // BoxFit蒸甜，設(shè)置圖片的顯示模式棠耕，具體設(shè)置如下圖
// 此處將兩個(gè)屬性一起說明是因?yàn)椋?// 圖片的容器Image Widget的寬高 & 圖片本身的大小不一樣（需區(qū)分開來）
// 所以結(jié)合圖片的顯示模式講解
- 使用
main.dart
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來定義當(dāng)前應(yīng)用打開的時(shí)候柠新，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: new Image.asset(
'assetImage/photo.jpg',
width: 200.0,
height: 100.0,
fit: BoxFit.fill,
));
}
}
1.5 屬性color窍荧、colorBlendMode
- 屬性說明
this.color
// Color，圖片的前景色恨憎，一般不設(shè)置或設(shè)置透明色蕊退，會(huì)覆蓋掉圖片，一般會(huì)和colorBlendMode結(jié)合使用
this.colorBlendMode
// BlendMode框咙，一般和color結(jié)合使用，設(shè)置color的混合模式痢甘，具體設(shè)置屬性如下：
- 使用
main.dart
import 'package:flutter/material.dart';// Material UI組件庫
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象喇嘱，用來定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: new Image.asset(
'assetImage/photo.jpg',
width: 200.0,
height: 100.0,
fit: BoxFit.fill,
color: Colors.red,
colorBlendMode: BlendMode.colorDodge,
));
}
}
-
測(cè)試效果
1.6 屬性alignment
- 屬性說明
this.alignment = Alignment.center
// AlignmentGeometry塞栅，用于設(shè)置圖片的對(duì)齊方式者铜，默認(rèn)值：Alignment.center，可設(shè)置的屬性如下：
- 具體使用
為了方便展示，此處加入一個(gè)布局容器Container方便展示作烟。
main.dart
import 'package:flutter/material.dart';// Material UI組件庫
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象愉粤，用來定義當(dāng)前應(yīng)用打開的時(shí)候，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
// 主體
body: Container(
width: 500,
height: 1000,
color: Colors.red,
child: Image.asset(
'assetImage/photo.jpg',
width: 50.0,
height: 50.0,
alignment: Alignment.bottomCenter,
fit: BoxFit.contain,
),
));
}
}
- 測(cè)試效果
1.7 屬性Repeat
- 屬性說明
this.repeat = ImageRepeat.noRepeat
// ImageRepeat拿撩，圖片的重復(fù)方式衣厘，當(dāng)圖片沒有完全覆蓋掉容器時(shí)使用。默認(rèn)值：ImageRepeat.noRepeat
// 枚舉類型
repeat // 1. 在x軸和y軸重復(fù)
repeatX // 2. 在x軸重復(fù)
repeatY // 3. 在y軸重復(fù)
noRepeat // 4. 不重復(fù)
- 具體使用
import 'package:flutter/material.dart';// Material UI組件庫
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象压恒，用來定義當(dāng)前應(yīng)用打開的時(shí)候影暴，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: Container(
width: 500,
height: 1000,
color: Colors.red,
child: Image.asset(
'assetImage/photo.jpg',
width: 50.0,
height: 50.0,
alignment: Alignment.bottomCenter,
fit: BoxFit.contain,
repeat: ImageRepeat.noRepeat,
),
));
}
}
- 測(cè)試效果
至此，關(guān)于Image Widget講解完畢探赫。
2. Icon
2.1 作用
顯示圖標(biāo)圖片
2.2 優(yōu)勢(shì)（相對(duì)于Image）
- 體積行椭妗：可以減小安裝包大小。
- 矢量：矢量圖標(biāo)伦吠，放大不會(huì)影響其清晰度妆兑。
- 可應(yīng)用文本樣式：可以像文本一樣改變字體圖標(biāo)的顏色、大小對(duì)齊等 & 可通過TextSpan和文本混用
2.3 構(gòu)造方法
const Icon(this.icon, {
Key key, // 設(shè)置使用的圖標(biāo)
this.size, // 圖標(biāo)大小
this.color, // 顏色
this.textDirection, // 渲染圖標(biāo)的文本方向
})
2.4 具體使用
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象毛仪，用來定義當(dāng)前應(yīng)用打開的時(shí)候搁嗓，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: Icon(
Icons.camera,
size: 50,
color: Colors.red,
textDirection: TextDirection.ltr,
));
}
}
2.5 測(cè)試效果
2.6 特別說明
Flutter默認(rèn)包含了一套Material Design的字體圖標(biāo)，在pubspec.yaml文件中的配置如下
3. ImageIcon
3.1 作用
自定義圖形圖標(biāo)潭千，來自于圖片繪制谱姓。圖標(biāo)不可交互式。
3.2 構(gòu)造函數(shù)
const ImageIcon(this.image, {
Key key,
this.size, // 圖標(biāo)大小
this.color, // 顏色
})
- 區(qū)別于Icon刨晴，ImageIcon是采用自定義ImageProvider來定義圖標(biāo)
- 自定義ImageProvider分別是上面講解Image的：AssetImage屉来、MemoryImage、NetworkImage狈癞、FileImage茄靠，即分別表示可從資源、內(nèi)存蝶桶、網(wǎng)絡(luò) & 文件中獲取圖片
// 加載網(wǎng)絡(luò)圖片
Image.network(String src, {
Key key,
double scale = 1.0,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
Map<String, String> headers,
})
// 加載本地文件
Image.file(File file, {
Key key,
double scale = 1.0,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
})
// 從項(xiàng)目資源中加載
Image.asset(String name, {
Key key,
AssetBundle bundle,
this.semanticLabel,
this.excludeFromSemantics = false,
double scale,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
String package,
this.filterQuality = FilterQuality.low,
})
// 從內(nèi)存中加載
Image.memory(Uint8List bytes, {
Key key,
double scale = 1.0,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
})
// 為了方便使用慨绳，在Image的構(gòu)造方法里也加入了快速從各種不同途徑獲得圖片的方式，Image的構(gòu)造方法包括：
Image() // 通用方法真竖，使用ImageProvider實(shí)現(xiàn)脐雪，如下方法本質(zhì)上也是使用的這個(gè)方法
Image.asset // 加載資源圖片
Image.file // 加載本地圖片文件
Image.network // 加載網(wǎng)絡(luò)圖片
Image.memory // 加載Uint8List資源圖片
3.3 具體使用
import 'package:flutter/material.dart';// Material UI組件庫
void main() => runApp(MyApp());
// 無狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來定義當(dāng)前應(yīng)用打開的時(shí)候恢共，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: ImageIcon(AssetImage(
'assetImage/plane.png'), // 注：此處的圖片格式必須是.png哦Ｕ角铩！
size: 300,
color: Colors.red,)
);
}
}
3.4 測(cè)試效果圖
至此讨韭，關(guān)于圖片方面的Widget講解完畢脂信。
4. 總結(jié)
- 本文主要講解了Flutter中圖片組件方面的Widget癣蟋，包括Image、Icon狰闪、ImageIcon
- 接下來推出的文章疯搅，我將繼續(xù)講解Flutter的相關(guān)知識(shí)，包括更多的Widget用法埋泵、實(shí)例應(yīng)用等幔欧，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請(qǐng)點(diǎn)贊！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫作的最大動(dòng)力秋泄！
相關(guān)文章閱讀
Android開發(fā)：最全面琐馆、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡(jiǎn)介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡(jiǎn)書恒序！
不定期分享關(guān)于安卓開發(fā)的干貨瘦麸，追求短、平歧胁、快滋饲，但卻不缺深度。
