【Flutter】Image 組件 ( cached_network_image 網(wǎng)絡(luò)圖片緩存插件 )

文章目錄

一、cached_network_IMAGE 網(wǎng)絡(luò)圖片緩存插件

二、cached_network_IMAGE 加載網(wǎng)絡(luò)圖片

三、完整代碼示例

四、相關(guān)資源

一、cached_network_image 網(wǎng)絡(luò)圖片緩存插件

從網(wǎng)絡(luò)上加載的圖片 , 可以緩存下來 , 如果再次獲取該圖片就直接從緩存中獲取該圖片 , 類似 Glide 中的三級緩存機(jī)制 ;

緩存圖片可以使用 cached_network_image 插件實現(xiàn) ;

安裝 cached_network_image 插件 :

搜索插件 : 在 https://pub.dev/packages 中搜索 cached_network_image 插件 ;

插件地址 : https://pub.dev/packages/cached_network_image

配置插件 : 在 pubspec.yaml 中配置插件 ;

dependencies: cached_network_image: ^2.5.1

1

2

獲取插件 : 點擊 pubspec.yaml 中右上角的 Pub get 按鈕 , 獲取插件 ;

導(dǎo)入頭文件 :

import 'package:cached_network_image/cached_network_image.dart';

1

二、cached_network_image 加載網(wǎng)絡(luò)圖片

cached_network_image 網(wǎng)絡(luò)圖片緩存插件 , 提供了一個可供加載網(wǎng)絡(luò)圖片的組件 CachedNetworkImage , 在該組件中可以設(shè)置加載圖片過程中顯示的 placeholder ;

Center( // 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網(wǎng)絡(luò)圖片 child: CachedNetworkImage( // 加載網(wǎng)絡(luò)圖片過程中顯示的內(nèi)容 , 這里顯示進(jìn)度條 placeholder: (context, url)=>CircularProgressIndicator(), // 網(wǎng)絡(luò)圖片地址 imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png", ), ),

1

2

3

4

5

6

7

8

9

運行效果 : 第二張圖片本次示例效果 ;

使用到的網(wǎng)絡(luò)圖片 :

三、完整代碼示例

完整代碼示例 :

import 'package:flutter/material.dart'; import 'dart:io'; import 'package:path_provider/path_provider.dart'; import 'package:transparent_image/transparent_image.dart'; import 'package:cached_network_image/cached_network_image.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } /// SD 卡路徑 String sdPath; @override void initState() { // 獲取 SD 卡路徑 getSdPath(); } void getSdPath() async { String path = (await getExternalStorageDirectory()).path; setState(() { sdPath = path; }); } @override Widget build(BuildContext context) { print("sdPath : $sdPath"); return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: ListView( children: [ Stack( children: [ // 進(jìn)度條 Center(child: CircularProgressIndicator(),), Center( // 網(wǎng)絡(luò)加載時漸變出現(xiàn) child: FadeInImage.memoryNetwork( // Placeholder placeholder: kTransparentImage, image: "https://img-blog.csdnimg.cn/2021032321394771.png", ), ) ], ), Center( // 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網(wǎng)絡(luò)圖片 child: CachedNetworkImage( // 加載網(wǎng)絡(luò)圖片過程中顯示的內(nèi)容 , 這里顯示進(jìn)度條 placeholder: (context, url)=>CircularProgressIndicator(), // 網(wǎng)絡(luò)圖片地址 imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png", ), ), Stack( children: [ // 進(jìn)度條 Center(child: CircularProgressIndicator(),), Center( // 網(wǎng)絡(luò)加載時漸變出現(xiàn) child: FadeInImage.assetNetwork( // Placeholder placeholder: "images/waiting.gif", image: "https://img-blog.csdnimg.cn/2021032321394771.png", ), ) ], ), // 圖片組件 , 從網(wǎng)絡(luò)中加載一張圖片 /*Image.network( // 圖片地址 "https://img-blog.csdnimg.cn/2021032313493741.png", ),*/ /*Image( image: AssetImage("images/sidalin.png"), ),*/ //Image.asset('images/sidalin2.png', ), /// 從 SD 卡加載圖片 /*if(sdPath != null) Image.file( File('$sdPath/sidalin3.png'), width: 200, ),*/ ], ) ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

運行效果 :

四、相關(guān)資源

參考資料 :

flutter 官網(wǎng) : https://flutter.dev/

Flutter 插件- : https://pub.dev/packages

Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強烈推薦 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社區(qū) : https://flutter.cn/

Flutter 實用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文檔 : https://dart.cn/

Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/

Flutter 中文網(wǎng) ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510

博客源碼下載 :

GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 隨博客進(jìn)度一直更新 , 有可能沒有本博客的源碼 )

博客源碼快照 : https://download.csdn.net/download/han1202012/16059814 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

Flutter 網(wǎng)絡(luò)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。