Flutter怎么使用NetworkImage实现图像显示效果

本篇内容主要讲解"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_newimport '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实现图像显示效果"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！