早前的《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文件来实现列表的样式。