您的位置:首頁 > 教程 > 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
色七七影院_香港三级台湾三级在线播放_男人放进女人阳道猛进猛出