怎么关闭自动升级（手机怎么关闭自动升级）
803
2022-05-30
【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小时内删除侵权内容。
相关文章
推荐文章
最近发表
