您的位置：首頁 > 教程 > 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

最新圖文推薦

1 2 3

Flutter使用NetworkImage實現圖像顯示
C語言詳細解析時間復雜度與空間復雜度
MySQL數據庫查詢進階之多表查詢詳解
CentOS下安裝Jenkins的完整步驟
FreeRTOS實時操作系統移植操作示例指南
e52450處理器怎么樣 e5-2450相當于什么
一次Mysql?update?sql不當引起的生產
C#內置泛型委托之Func委托
windows系統IIS部署Django項目的實踐
面試中老生常談的MySQL問答集錦夯實基
PyTorch實現線性回歸詳細過程
SpringBoot特點之依賴管理和自動裝配(

相關文章

nginx配置訪問圖片路徑以及html靜態頁面的調取方法

給大家講一個快速配置nginx訪問圖片地址，以及訪問html靜態頁面的配置。 1.實驗環境首先隨便某個路徑下創建相應的目錄。如圖下 2.在里面放自定義的html或者圖片。 3.nginx配置 user ro

2019-10-17
CentOS7安裝Nginx并配置自動啟動的方法步驟

1、官網下載安裝包 http://nginx.org/en/download.html，選擇適合Linux的版本，這里選擇最新的版本，下載到本地后上傳到服務器或者centos下直接wget命令下載。切換到/usr/local目錄，下載軟件包

2019-10-17
nginx配置靜態文件服務器詳解

本文主要介紹一些Nginx做圖片服務器的簡單配置，但不包括Nginx的安裝部署以及實現原理。配置步驟下載nginx Windows nginx安裝教程及簡單實踐配置nginxnginx-1.13.4confnginx.conf文件 #user no

2019-10-17
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 1.6.0 libressl 2.0.0 安裝直接從源碼編譯LibreSSL，構建過程的輸出非常簡潔，源碼還附帶測試用例及提供并行構

2019-10-17
nginx ip黑名單動態封禁的例子

網站被惡意請求，拉黑IP是重要的手段，如果每次拉黑都要到nginx上配置，未免太low了；我們需要更方便的控制nginx IP黑名單。 1.方案黑名單持久化到mysql （常見的方案是redis，但不利于

2019-10-17
Mac中使用Nginx實現80端口轉發8080端口

由于項目本身的原因，開發必須使用80端口實現，而在Unix內核中非Root用戶無法直接使用1024以下的端口，最初作者找到了pfctl的方式實現80端口轉發到8080端口實現訪問，經過親測出現了最

2019-10-17
詳解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

最新專欄文章

Flutter使用NetworkImage實現圖像顯示效果

Flutter使用NetworkImage實現圖像顯示效果

2022-04-21

C語言詳細解析時間復雜度與空間復雜度

C語言詳細解析時間復雜度與空間復雜度

2022-04-11

MySQL數據庫查詢進階之多表查詢詳解

MySQL數據庫查詢進階之多表查詢詳解

2022-04-08

大家感興趣的內容

1 nginx 目錄密碼保護的設置方法
2 nginx配置訪問圖片路徑以及html
3 nginx 偽靜態化rewrite規則
4 為Nginx自定義404，502錯誤頁面的
5 nginx下的代理服務器80端口被封
6 Nginx 出現 403 Forbidden 最終
7 Nginx配置文件（nginx.conf）配置詳
8 為nginx設置默認虛擬主機（空主機
9 解決Nginx + PHP（FastCGI）遇到的50
10 Nginx 禁止訪問某個目錄或文件的

網友熱評的文章

1 Flutter使用NetworkImage實現圖
2 Redis實現驗證碼發送并限制每日
3 C語言詳細解析時間復雜度與空間
4 MySQL數據庫查詢進階之多表查詢
5 CentOS下安裝Jenkins的完整步驟
6 Docker?鏡像導入導出過程介紹
7 FreeRTOS實時操作系統移植操作示
8 e52450處理器怎么樣 e5-2450相當
9 一次Mysql?update?sql不當引起
10 python字典中get()函數的基本用

色七七影院_香港三级台湾三级在线播放_男人放进女人阳道猛进猛出