{"id":1143,"date":"2023-03-16T22:02:37","date_gmt":"2023-03-16T14:02:37","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1143"},"modified":"2023-03-16T22:11:58","modified_gmt":"2023-03-16T14:11:58","slug":"flutter-widget-image","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/16\/flutter-widget-image\/","title":{"rendered":"Flutter Widget\u4e4bImage"},"content":{"rendered":"<p>Widget\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/flutter.io\/docs\/development\/ui\/widgets\">https:\/\/flutter.io\/docs\/development\/ui\/widgets<\/a><br \/>\nImage\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Image-class.html\">https:\/\/docs.flutter.io\/flutter\/widgets\/Image-class.html<\/a><\/p>\n<p><!-- more --><\/p>\n<pre><code class=\"language-dart\">import &#039;package:flutter\/material.dart&#039;;\nimport &#039;package:transparent_image\/transparent_image.dart&#039;;\nimport &#039;package:cached_network_image\/cached_network_image.dart&#039;;\n\nclass ImageDemoPage extends StatefulWidget {\n  @override\n  State&lt;StatefulWidget&gt; createState() =&gt; new _ImageDemoPagePageState();\n}\n\nclass _ImageDemoPagePageState extends State&lt;ImageDemoPage&gt; {\n\n  @override\n  void initState() {\n    super.initState();\n  }\n\n  Widget build(BuildContext context) {\n    return Scaffold(\n        appBar: new AppBar(\n          title: new Text(&#039;Image Demo&#039;),\n        ),\n        body: SingleChildScrollView(\n          child: Column(\n            children: &lt;Widget&gt;[\n              \/\/ \u52a0\u8f7d\u9879\u76ee\u4e2d\u7684\u56fe\u7247, \u5728 pubspec.yaml \u6587\u4ef6\u4e2d\u6dfb\u52a0 assets\n              new Image.asset(&#039;images\/lion.jpg&#039;, width: 200.0, height: 150.0,),\n              new Image.asset(\n                &#039;images\/husky.jpg&#039;,\n                fit: BoxFit.cover, \/\/ \u7f29\u653e\u65b9\u5f0f\uff0c\u53d6\u503c fill contain cover fitWidth fitHeight none scaleDown\n                width: 200.0,\n                height: 150.0,\n              ),\n              \/\/ \u52a0\u8f7d\u7f51\u7edc\u56fe\u7247\n              new Image(\n                image: new NetworkImage(&#039;http:\/\/www.yezhou.me\/images\/flutter\/tangyixin.jpg&#039;),\n                width: 200.0,\n                height: 150.0,\n              ),\n              \/\/ \u7528\u5360\u4f4d\u7b26\u6de1\u5165\u56fe\u7247, \u4f7f\u7528 transparent_image(https:\/\/pub.dartlang.org\/packages\/transparent_image) \u5305\u4f5c\u4e3a\u4e00\u4e2a\u7b80\u5355\u7684\u900f\u660e\u5360\u4f4d\u56fe\n              new FadeInImage.memoryNetwork(\n                placeholder: kTransparentImage,\n                fadeInDuration: const Duration(seconds: 50), \/\/ \u6301\u7eed\u65f6\u95f4\uff0c\u9ed8\u8ba4 700 ms\n                image: &#039;http:\/\/www.yezhou.me\/images\/flutter\/tang.jpg&#039;,\n                width: 200.0,\n                height: 150.0,\n              ),\n              \/\/ \u4f7f\u7528\u7f13\u5b58\u56fe\u7247, \u4f7f\u7528 cached_network_image(https:\/\/pub.dartlang.org\/packages\/cached_network_image)\n              \/\/ \u9664\u4e86\u7f13\u5b58\u4e4b\u5916, cached_image_network\u5305\u5728\u52a0\u8f7d\u65f6\u8fd8\u652f\u6301\u5360\u4f4d\u7b26\u548c\u6de1\u5165\u6de1\u51fa\u56fe\u7247\n              new CachedNetworkImage(\n                placeholder: new CircularProgressIndicator(),\n                imageUrl: &#039;http:\/\/www.yezhou.me\/images\/flutter\/tangyixin.jpg&#039;,\n                errorWidget: new Image.asset(&#039;images\/pic1.jpg&#039;, width: 200.0, height: 150.0),\n                width: 200.0,\n                height: 150.0,\n              ),\n              \/\/\n              Image.network(\n                &#039;http:\/\/www.yezhou.me\/images\/flutter\/tang.jpg&#039;,\n                width: 200.0,\n                height: 150.0,\n              ),\n            ],\n          )\n        )\n    );\n  }\n}<\/code><\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/www.yezhou.me\/AppBlog\/images\/Flutter\/Flutter_Widget_Image.png\" alt=\"Flutter Widget Image\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Widget\uff1ahttps:\/\/flutter.io\/docs\/development\/ui\/widgets I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[305],"class_list":["post-1143","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-flutter-widget"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1143"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1143\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}