如何利用Flutter实现好友列表（内涵源码）

早前的《HelloWorld》公开课，资深大前端开发工程师阿佑老师为我们详细介绍了如何利用Flutter做界面开发。学员们反馈意犹未尽，问还没有关于Flutter的公开课。4月24日，阿佑老师带来了Flutter系列下半部分的内容—Flutter列表开发与界面搭建，快去看看吧。

Flutter列表开发

以下面这个好友列表为例。我们先来分析一下，要实现这个列表都要做哪些工作，首先要先做一个列表的载体容器FriendList，用于显示列表、加载数据、管理状态。其次要对用户做单行布局，设计数据模型和数据相关处理存放的位置，并且和数据进行绑定。

分析好需求后，接下来直接上代码，先来新建一个frined类来设计好列表的数据模型，整个数组模型需要用户的头像、姓名、Email这三个信息，具体代码如下。

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_demo/friend.dart';
import 'package:flutter_demo/friend_detail.dart';
import 'package:flutter_demo/friend_item.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class FriendList extends StatefulWidget {
  FriendList({Key key}) : super(key: key);

  @override
  _FriendListState createState() => _FriendListState();
}

class _FriendListState extends State<FriendList> {

  List<Friend> _friends = [];
  var url = "https://randomuser.me/api/?results=30";

  RefreshController _refreshController = RefreshController(initialRefresh: false);

  @override
  void initState() {
 super.initState();

 _loadFriendData();
  }

  _loadFriendData() async{
 HttpClient httpClient = new HttpClient();
 HttpClientRequest request = await httpClient.getUrl(Uri.parse(url));
 HttpClientResponse response = await request.close();
 var jsonString = await response.transform(utf8.decoder).join();
 setState(() {
   _friends = Friend.resolveDataFromReponse(jsonString);
 });
  }

  @override
  Widget build(BuildContext context) {
 return Scaffold(
   appBar: new AppBar(
  title: Text('好友列表'),
   ),
   body: SmartRefresher(
  controller: _refreshController,
  enablePullDown: true,
  header: ClassicHeader(
 refreshingText: '正在加载中...',
 idleText: '下拉刷新',
 completeText:'加载完成',
 failedText: '数据刷新异常',
 releaseText:'松开刷新'
  ),
  enablePullUp: true,
  footer: ClassicFooter(
 idleText:'加载更多数据',
 loadingText:'玩命加载中...',
 noDataText:'没有更多数据',
 // noMoreIcon: Icon(Icons.account_balance_wallet),
  ),
  child: ListView.builder(
 itemCount: _friends.length,
 itemBuilder: _buildItem,
  ),
  onRefresh: _onRefresh,
  onLoading: _onLoading,
   ),
 );
  }

  void _onRefresh() async{
 await Future.delayed(Duration(seconds: 2),(){
   // _refreshController.refreshCompleted();
   _refreshController.refreshFailed();
 });
  }

 void _onLoading() async{
 await Future.delayed(Duration(seconds: 2),(){
   _refreshController.loadComplete();
 });
  }

  Widget _buildItem(BuildContext context, int index) {
 Friend item = _friends[index];
 return FriendItem(item);
  }
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293复制代码类型：[html]

接下来我们调起模拟器，可以看到用户数据已经出来了，但是这个列表离我们的预期还很远，需要往里面添加样式，由于每个用户的列表样式都是一样的，所以我们可以新建friend_item.dart文件来实现列表的样式。

由于文章篇幅所限，这里我们就不贴源代码了，感兴趣的同学可以直接点击跨平台开发之Flutter入门实战（下）观看公开课的视频回放，有一点值得注意，上拉加载更多的功能这里是用插件来实现的。除此之外，也可以通过ScrollController属性，监听ListView滑动事件来实现。

Flutter界面结构搭建

做移动端开发，界面的搭建是避不开的。当先主流的界面搭建有两种方式，一种是如下图所示，底部有四个选项卡来做界面切换。底部切换的四个界面关系是平级的，不存在先后关系

另外一种方式就是界面跳转，从一个界面跳转到另一个界面，这种界面的管理方式是通过导航控制器通过栈的形式来管理子控制器（先进后出）。显示在导航控制器上得view永远是栈顶控制器的view

Flutter第三方插件

最后，我们再来说下第三方插件，有很多同学私信老师说flutter开发有那么多控件，不知道在哪能找到。其实可以通过下面的这个查询网址来找到你想要的控件。

查询网址：https://pub.dev/flutter/packages

在找到你想要的插件后，执行两个步骤，在项目的pubspec.yaml文件添加配置，在项目路径下执行flutterpubget。这样你就可以按照文档来使用这个控件了。

讲师介绍

阿佑老师，从2013年开始做软件开发，做过移动端、RN以及flutter。对于移动端跨平台开发有丰富的开发经验

《Hello,World公开课》是由开课吧推出的面向广大开发工程师的免费加餐课，集结业内名师大咖，聚焦热门技术和实战解决方案，以专业知识分享交流为桥梁，链接正在创造世界的一群科技主力们，向初心致敬，为技术发烧。无论你是初入职场的应届生，还是准备升职加薪的职场精英，相信这里都有你需要的养料。

赞 (0)

相关推荐