【Flutter】Image 組件 ( 配置本地 gif 圖片資源 | 本地資源加載 placeholder )
文章目錄
一、配置本地 gif 圖片資源
二、本地資源加載 Placeholder
三、完整代碼示例
四、相關資源
一、配置本地 gif 圖片資源
配置 assets 圖片資源 :
將 gif 圖片拷貝到 flutter 根目錄下的 images 目錄下 ;
在 pubspec.yaml 目錄中配置 images/waiting.gif 圖片資源 ;
flutter: assets: - images/waiting.gif
1
2
3
完整的 pubspec.yaml 配置文件 :
name: flutter_image_widget description: A new Flutter application. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 path_provider: ^2.0.1 transparent_image: ^2.0.0 cached_network_image: ^2.5.1 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - images/sidalin.png - images/sidalin2.png - images/waiting.gif
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
二、本地資源加載 Placeholder
Placeholder 是一個占位控件 , 在圖片還沒有就緒時 , 如從網絡獲取圖片 , 先使用 Placeholder 占據圖片組件的位置 ;
FadeInImage.assetNetwork 創建一個漸變圖像組件 , 圖片從網絡獲取 , Placeholder 從圖片資源中獲取 ;
代碼示例 :
Stack( children: [ Center( // 網絡加載時顯示本地的資源圖片 child: FadeInImage.assetNetwork( // Placeholder placeholder: "images/waiting.gif", image: "https://img-blog.csdnimg.cn/20210324110914742.png", ), ) ], ),
1
2
3
4
5
6
7
8
9
10
11
12
運行效果 : 第一張圖片加載時顯示 GIF 圖像 ;
顯示的網絡圖片 :
等待 gif 圖片 :
三、完整代碼示例
完整代碼示例 :
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
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
142
pubspec.yaml 配置文件 :
name: flutter_image_widget description: A new Flutter application. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 path_provider: ^2.0.1 transparent_image: ^2.0.0 cached_network_image: ^2.5.1 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - images/sidalin.png - images/sidalin2.png - images/waiting.gif
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
運行效果 :
四、相關資源
參考資料 :
Flutter 官網 : https://flutter.dev/
Flutter 插件- : https://pub.dev/packages
Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社區 : https://flutter.cn/
Flutter 實用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文檔 : https://dart.cn/
Dart 開發者官網 : https://api.dart.dev/
Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
博客源碼下載 :
GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )
博客源碼快照 : https://download.csdn.net/download/han1202012/16073006 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )
Flutter Image
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
