您的位置:首页 > 教程 > nginx > Flutter使用NetworkImage实现图像显示效果

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

2022-04-21 12:16:51 来源:易采站长站 作者:

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图像显示的资料请关注易采站长站其它相关文章!

如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • nginx配置访问图片路径以及html静态页面的调取方法

    nginx配置访问图片路径以及html静态页面的调取方法

    给大家讲一个快速配置nginx访问图片地址,以及访问html静态页面的配置。 1.实验环境 首先随便某个路径下创建相应的目录。如图下 2.在里面放自定义的html或者图片。 3.nginx配置 user ro
    2019-10-17
  • CentOS7安装Nginx并配置自动启动的方法步骤

    CentOS7安装Nginx并配置自动启动的方法步骤

    1、官网下载安装包 http://nginx.org/en/download.html,选择适合Linux的版本,这里选择最新的版本,下载到本地后上传到服务器或者centos下直接wget命令下载。 切换到/usr/local目录,下载软件包
    2019-10-17
  • nginx配置静态文件服务器详解

    nginx配置静态文件服务器详解

    本文主要介绍一些Nginx做图片服务器的简单配置,但不包括Nginx的安装部署以及实现原理。 配置步骤 下载nginx Windows nginx安装教程及简单实践 配置nginxnginx-1.13.4confnginx.conf文件 #user no
    2019-10-17
  • Nginx反向代理+DNS轮询+IIS7.5 千万PV 百万IP 双线 网站架构案例

    Nginx反向代理+DNS轮询+IIS7.5 千万PV 百万IP 双线 网站架构案例

    Nginx("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年
    2019-10-17
  • 在Nginx服务器中使用LibreSSL的教程

    在Nginx服务器中使用LibreSSL的教程

    本文会介绍一些 Nginx 与 Libressl 一起使用实践经验。 本文所用软件的版本 nginx 1.6.0 libressl 2.0.0 安装 直接从源码编译LibreSSL,构建过程的输出非常简洁,源码还附带测试用例及提供并行构
    2019-10-17
  • nginx ip黑名单动态封禁的例子

    nginx ip黑名单动态封禁的例子

    网站被恶意请求,拉黑IP是重要的手段,如果每次拉黑都要到nginx上配置,未免太low了;我们需要更方便的控制nginx IP黑名单。 1.方案 黑名单持久化到mysql (常见的方案是redis,但不利于
    2019-10-17
  • Mac中使用Nginx实现80端口转发8080端口

    Mac中使用Nginx实现80端口转发8080端口

    由于项目本身的原因,开发必须使用80端口实现,而在Unix内核中非Root用户无法直接使用1024以下的端口,最初作者找到了pfctl的方式实现80端口转发到8080端口实现访问,经过亲测出现了最
    2019-10-17
  • 详解Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详

    详解Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详

    注,操作系统为 CentOS 6.4 x86_64 , Nginx 是版本是最新版的1.4.2,所以实验用到的软件请点击这里下载: CentOS 6.4下载地址://www.jb51.net/softs/78243.html Nginx下载地址://www.jb51.net/softs/35633.html
    2019-10-17