您好,登录后才能下订单哦!
本篇内容主要讲解“Flutter怎么使用NetworkImage实现图像显示效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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实现图像显示效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。