Flutter怎么使用NetworkImage實現(xiàn)圖像顯示效果

本篇內(nèi)容主要講解“Flutter怎么使用NetworkImage實現(xiàn)圖像顯示效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Flutter怎么使用NetworkImage實現(xiàn)圖像顯示效果”吧!

使用 NetworkImage 顯示圖像

在 GitHub 中，每個成員都有其頭像的 URL。您的下一個改進是將該頭像添加到Member課程中并在應用程序中顯示這些頭像。

更新Member以添加avatarUrl屬性。它現(xiàn)在應該是這樣的：

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 值，然后將其設置為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), 
      ), 
    ), 
  ); 
}

這會CircleAvatar在您的ListTile. 當您等待圖像下載時，背景CircleAvatar將是綠色的。

執(zhí)行熱重啟而不是熱重新加載。您將在每一行中看到您的會員頭像：

整理代碼

你的大部分代碼現(xiàn)在都在main.dart 中。為了使代碼更簡潔一些，您將類重構為它們自己的文件。

在lib文件夾中創(chuàng)建名為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 中的導入。用以下內(nèi)容替換整個文件：

// 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實現(xiàn)圖像顯示效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！