使用 NetworkImage 显示图像
在 GitHub 中,每个成员都有其头像的 URL。您的下一个改进是将该头像添加到Member
课程中并在应用程序中显示这些头像。
更新Member
以添加avatarUrl
属性。它现在应该是这样的:
class Member { Member(this.login, this.avatarUrl); final String login; final String avatarUrl; }
由于avatarUrl
现在是必需参数,因此 Flutter 在_loadData
. 将setState
回调替换为_loadData
以下更新版本:
setState(() { final dataList = json.decode(response.body) as List; for (final item in dataList) { final login = item["login"] as String? ?? ""; final url = item["avatar_url"] as String? ?? ""; final member = Member(login, url); _members.add(member); } });
上面的代码使用avatar_url
键在从 JSON 解析的地图中查找 URL 值,然后将其设置为url
字符串,然后将其传递给Member
。
现在您可以访问头像的 URL,将其添加到您的ListTile
. 替换_buildRow
为以下内容:
Widget _buildRow( int i) { return Padding( padding: const EdgeInsets.all( 16.0 ), child: ListTile( title: Text( " ${_members[i].login} " , style: _biggerFont), Leadership: CircleAvatar( backgroundColor : Colors.green, backgroundImage: NetworkImage(_members[i].avatarUrl), ), ), ); }
这会CircleAvatar
在您的ListTile
. 当您等待图像下载时,背景CircleAvatar
将是绿色的。
执行热重启而不是热重新加载。您将在每一行中看到您的会员头像:
整理代码
你的大部分代码现在都在main.dart 中。为了使代码更简洁一些,您将类重构为它们自己的文件。
在lib文件夹中创建名为member.dart和ghflutter.dart的文件。移动到member.dart两者并进入ghflutter.dart。Member``_GHFlutterState``GHFlutter
你不需要任何import语句member.dart,但在进口ghflutter.dart应该是:
import "dart:convert"; import "package:flutter/material.dart"; import "package:http/http.dart" as http; import "member.dart"; import "strings.dart" as strings;
您还需要更新main.dart 中的导入。用以下内容替换整个文件:
// ignore_for_file: prefer_const_constructors, unnecessary_new import "dart:convert"; import "package:http/http.dart" as http; import "package:flutter/material.dart"; import "jg_flutter_page.dart"; import "strings.dart" as strings; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: strings.appTitle, theme: ThemeData(primaryColor: Colors.green.shade800), home: JGFlutter(), ); } }
jg_flutter_page.dart
import "dart:convert"; import "package:flutter/material.dart"; import "package:http/http.dart" as http; import "member.dart"; import "strings.dart" as strings; class JGFlutter extends StatefulWidget { const JGFlutter({Key? key}) : super(key: key); @override _JGFlutterState createState() => _JGFlutterState(); } class _JGFlutterState extends State{ final _members = []; final _biggerFont = const TextStyle(fontSize: 18.0); @override void initState() { // TODO: implement initState super.initState(); _loadData(); } Future _loadData() async { const dataUrl = "https://api.github.com/orgs/raywenderlich/members"; final response = await http.get(Uri.parse(dataUrl)); setState(() { final dataList = json.decode(response.body) as List; for (final item in dataList) { final login = item["login"] as String? ?? ""; final url = item["avatar_url"] as String? ?? ""; final member = Member(login, url); _members.add(member); } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(strings.appTitle), ), body: ListView.separated( itemCount: _members.length, itemBuilder: (BuildContext context, int position) { return _buildRow(position); }, separatorBuilder: (context, index) { return const Divider(); }), ); } Widget _buildRow(int i) { return Padding( padding: const EdgeInsets.all(16.0), child: ListTile( title: Text("${_members[i].login}", style: _biggerFont), leading: CircleAvatar( backgroundColor: Colors.green, backgroundImage: NetworkImage(_members[i].avatarUrl), ), ), ); } }
member
class Member { Member(this.login, this.avatarUrl); final String login; final String avatarUrl; }
strings.dart
const appTitle = "JGFlutter";
以上就是Flutter使用NetworkImage实现图像显示效果的详细内容,更多关于Flutter NetworkImage图像显示的资料请关注脚本之家其它相关文章!
X 关闭
X 关闭
- 15G资费不大降!三大运营商谁提供的5G网速最快?中国信通院给出答案
- 2联想拯救者Y70发布最新预告:售价2970元起 迄今最便宜的骁龙8+旗舰
- 3亚马逊开始大规模推广掌纹支付技术 顾客可使用“挥手付”结账
- 4现代和起亚上半年出口20万辆新能源汽车同比增长30.6%
- 5如何让居民5分钟使用到各种设施?沙特“线性城市”来了
- 6AMD实现连续8个季度的增长 季度营收首次突破60亿美元利润更是翻倍
- 7转转集团发布2022年二季度手机行情报告:二手市场“飘香”
- 8充电宝100Wh等于多少毫安?铁路旅客禁止、限制携带和托运物品目录
- 9好消息!京东与腾讯续签三年战略合作协议 加强技术创新与供应链服务
- 10名创优品拟通过香港IPO全球发售4100万股 全球发售所得款项有什么用处?