Flutter使用NetworkImage實(shí)現(xiàn)圖像顯示效果
使用 NetworkImage 顯示圖像
在 GitHub 中，每個(gè)成員都有其頭像的 URL。您的下一個(gè)改進(jìn)是將該頭像添加到Member課程中并在應(yīng)用程序中顯示這些頭像。
更新Member以添加avatarUrl屬性。它現(xiàn)在應(yīng)該是這樣的：
class Member {
Member(this.login, this.avatarUrl);
final String login;
final String avatarUrl;
}由于avatarUrl現(xiàn)在是必需參數(shù)，因此 Flutter 在_loadData. 將setState回調(diào)替換為_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 值，然后將其設(shè)置為url字符串，然后將其傳遞給Member。
現(xiàn)在您可以訪問頭像的 URL，將其添加到您的ListTile. 替換_buildRow為以下內(nèi)容：
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),
),
),
);
}這會(huì)CircleAvatar在您的ListTile. 當(dāng)您等待圖像下載時(shí)，背景CircleAvatar將是綠色的。
執(zhí)行熱重啟而不是熱重新加載。您將在每一行中看到您的會(huì)員頭像：
整理代碼
你的大部分代碼現(xiàn)在都在main.dart 中。為了使代碼更簡(jiǎn)潔一些，您將類重構(gòu)為它們自己的文件。
在lib文件夾中創(chuàng)建名為member.dart和ghflutter.dart的文件。移動(dòng)到member.dart兩者并進(jìn)入ghflutter.dart。Member``_GHFlutterState``GHFlutter
你不需要任何import語(yǔ)句member.dart，但在進(jìn)口ghflutter.dart應(yīng)該是：
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 中的導(dǎo)入。用以下內(nèi)容替換整個(gè)文件：
// 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實(shí)現(xiàn)圖像顯示效果的詳細(xì)內(nèi)容，更多關(guān)于Flutter NetworkImage圖像顯示的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)鬧鐘小程序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
深入Android中BroadcastReceiver的兩種注冊(cè)方式（靜態(tài)和動(dòng)態(tài)）詳解
這篇文章主要介紹了深入Android中BroadcastReceiver的兩種注冊(cè)方式（靜態(tài)和動(dòng)態(tài)）詳解,具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-12
Android編程實(shí)現(xiàn)顯示在標(biāo)題上的進(jìn)度條功能【附源碼下載】
這篇文章主要介紹了Android編程實(shí)現(xiàn)顯示在標(biāo)題上的進(jìn)度條功能,涉及Android界面布局及相關(guān)組件屬性設(shè)置技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
在Android平臺(tái)中多線程應(yīng)用很廣泛，在UI更新、游戲開發(fā)和耗時(shí)處理(網(wǎng)絡(luò)通信等)等方面都需要多線程,下面是一個(gè)在線程中更新UI的代碼2014-01-01
Android下2d物理引擎Box2d用法簡(jiǎn)單實(shí)例
這篇文章主要介紹了Android下2d物理引擎Box2d用法,實(shí)例分析了在Android平臺(tái)上使用Box2d的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
封裝的android監(jiān)聽手指左右滑動(dòng)屏幕的事件類分享
這篇文章主要介紹了封裝的android監(jiān)聽手指左右滑動(dòng)屏幕的事件類分享,本文分別給出了簡(jiǎn)單處理方法的代碼和封裝好的處理類代碼,需要的朋友可以參考下2015-05-05
android 仿微信demo——微信啟動(dòng)界面實(shí)現(xiàn)
本篇文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，希望能給你們提供幫助2021-06-06
android動(dòng)態(tài)設(shè)置app當(dāng)前運(yùn)行語(yǔ)言的方法
下面小編就為大家?guī)硪黄猘ndroid動(dòng)態(tài)設(shè)置app當(dāng)前運(yùn)行語(yǔ)言的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
大家好，本篇文章主要講的是Android用動(dòng)畫顯示或隱藏視圖，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下2022-01-01
Android Studio如何獲取SQLite數(shù)據(jù)并顯示到ListView上
這篇文章主要介紹了Android Studio獲取SQLite數(shù)據(jù)并顯示到ListView上，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03