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实现图像显示效果的详细内容，更多关于Flutter NetworkImage图像显示的资料请关注脚本之家其它相关文章！