Flutter使用NetworkImage实现图像显示效果
使用 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<JGFlutter> { final _members = <Member>[]; final _biggerFont = const TextStyle(fontSize: 18.0); @override void initState() { // TODO: implement initState super.initState(); _loadData(); } Future<void> _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图像显示的资料请关注脚本之家其它相关文章!
相关文章
Android 开发音频组件(Vitamio FAQ)详细介绍
本文主要介绍Android开发音频播放器,Vitamio是Android播放器组件,支持几乎所有视频格式和网络视频流,希望能帮助开发Android 音频播放的小伙伴2016-07-07Android学习笔记(一)环境安装及第一个hello world
最近在学习安卓开发,记录下环境安装和第一个hello world的诞生过程,希望对大家有所帮助2014-07-07Android程序开发之Fragment实现底部导航栏实例代码
流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏。本文给大家介绍Fragment实现底部导航栏,对Fragment实现底部导航栏相关知识感兴趣的朋友一起学习吧2016-03-03
最新评论