第三方库导入与网络数据异步请求与展示

1126 字

6 分钟

第三方库导入与网络数据异步请求与展示

2021-11-23

2026-10-12

Flutter

无标签

前言#

在 iOS 开发中我们经常使用 CocoaPods 等工具进行包管理。那么在 flutter 开发中又该如何进行呢？

一、 http#

这是官方提供来一个网络库：http

点击复制

1.1 修改 pubspec.yaml 配置文件#

1.2 更新依赖库#

1.3 在使用的地方导入#

1
import 'package:http/http.dart' as http;

二、异步函数#

2.1 简单汇总Service#

简单汇总一下Service，便于后续使用。

1
import 'package:flutter/material.dart';
2

3
class ServiceURL {
4
  /// 会话列表
5
  static Uri conversationList = Uri.parse('xxxxxx');
6
}

2.2 发送请求#

这里简单选择在 initState 中进行网络请求，调用移步方法

1
  @override
2
  void initState() {
3
    super.initState();
4
    _loadConversation();
5
  }
6

7
  /// 加载会话列表
8
  void _loadConversation() async {
9
    var response = await http.get(ServiceURL.conversationList);
10
    print(response.body);
11
  }

这里可以发现，和我们在 iOS 开发中的网络请求的调用形式有很大差别。iOS开发中我们都是通过回调的形式接收请求结果的。这里使用 await。

三、数据模型转换#

接收到网络数据后我们自然需要进行数据模型的转换。

3.1 定义数据模型#

1
import 'package:flutter/material.dart';
2

3
class ConversationData {
4
  final String nick;
5
  final String avatar;
6
  final String lastestMessage;
7

8
  ConversationData({
9
    required this.nick,
10
    required this.avatar,
11
    required this.lastestMessage,
12
  });
13

14
  factory ConversationData.formMap(Map map) {
15
    return ConversationData(
16
      nick: map['nick'],
17
      avatar: map['avatar'],
18
      lastestMessage: map['lastest_message'],
19
    );
20
  }
21
}

3.2 Json 转 Map#

1
  List _conversations = [];
2
  bool _isLoading = false;
3

4
  /// 加载会话列表
5
  void _loadConversation() async {
6
    _isLoading = true;
7
    var response = await http.get(ServiceURL.conversationList);
8
    _isLoading = false;
9
    if (response.statusCode == 200) {
10
      final bodyMap = json.decode(response.body);
11
      final result = bodyMap['lists'].map((item) {
12
        return ConversationData.formMap(item);
13
      }).toList();
14

15
      setState(() {
16
        _conversations = result;
17
      });
18
    } else {
19
      throw Exception('请求失败：${response.statusCode}');
20
    }
21
  }

3.3 构建 Cell#

Text
- 样式设置
- 缩略方式设置
- 设置最大宽度
Container
- 设置图片圆角

1
class ConversationCell extends StatelessWidget {
2
  ConversationCell({required this.conversation});
3

4
  final ConversationData conversation;
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return Container(
9
      height: 60,
10
      color: Colors.white,
11
      child: Stack(
12
        children: [
13
          Align(
14
            alignment: Alignment.center,
15
            child: Container(
16
              child: Row(
17
                crossAxisAlignment: CrossAxisAlignment.center,
18
                children: [
19
                  const SizedBox(
20
                    width: 12,
21
                  ),
22
                  // 圆角
23
                  Container(
24
                    width: 48,
25
                    height: 48,
26
                    decoration: BoxDecoration(
27
                      borderRadius: BorderRadius.circular(4),
28
                      image: DecorationImage(
29
                          // 网络图片
30
                        image: NetworkImage(conversation.avatar),
31
                      ),
32
                    ),
33
                  ),
34
                  const SizedBox(
35
                    width: 12,
36
                  ),
37
                  Column(
38
                    crossAxisAlignment: CrossAxisAlignment.start,
39
                    children: [
40
                      const SizedBox(height: 12),
41
                      Text(
42
                        conversation.nick,
43
                        maxLines: 1,
44
                        style: const TextStyle(
45
                          fontSize: 14,
46
                          fontWeight: FontWeight.w500,
47
                        ),
48
                      ),
49
                      Container(
50
                          // 限制宽度
51
                        width: UIConfig.screenWidth(context) * 0.7,
52
                        child: Text(
53
                          conversation.lastestMessage,
54
                          maxLines: 1,
55
                          // 缩略样式
56
                          overflow: TextOverflow.ellipsis,
57
                          style: const TextStyle(
58
                            fontSize: 12,
59
                            fontWeight: FontWeight.w400,
60
                          ),
61
                        ),
62
                      )
63
                    ],
64
                  ),
65
                ],
66
              ),
67
            ),
68
          ),
69
          // 分割线
70
          Align(
71
            alignment: Alignment.bottomCenter,
72
            child: Container(
73
              margin: const EdgeInsets.only(left: 70),
74
              height: 0.5,
75
              color: Colors.grey,
76
            ),
77
          ),
78
        ],
79
      ),
80
    );
81
  }
82
}

3.4 构建 ListView#

1
  Widget _itemForRow(BuildContext context, int index) {
2
      return ConversationCell(conversation: _conversations[index]);
3
  }
4

5
  @override
6
  Widget build(BuildContext context) {
7
    return Scaffold(
8
      appBar: AppBar(...),
9
      body: Container(
10
        color: Colors.yellow,
11
        child: _isLoading
12
            ? Center(
13
                child: Text('Loading'),
14
              )
15
            : ListView.builder(
16
                itemBuilder: _itemForRow,
17
                itemCount: _conversations.length,
18
              ),
19
      ),
20
    );
21
  }

3.5 效果#

四、 Future & FutureBuilder#

除了按照上面这种我们在 iOS 开发中一样常规的思路进行请求和展示外，再介绍另一种可以处理这种场景。

4.1 请求方法修改#

之前的加载方法：

1
  /// 加载会话列表
2
  void _loadConversation() async {
3
    var response = await http.get(ServiceURL.conversationList);
4
    if (response.statusCode == 200) {
5
      final bodyMap = json.decode(response.body);
6

7
      _conversations = bodyMap['lists']
8
                            .map((item) {
9
                                return ConversationData.formMap(item);
10
                            })
11
                            .toList();
12

13
    } else {
14
      throw Exception('请求失败：${response.statusCode}');
15
    }
16
  }

修改为：

1
  /// 加载会话列表
2
  Future<List> _loadConversation() async {
3
    var response = await http.get(ServiceURL.conversationList);
4
    if (response.statusCode == 200) {
5
      final bodyMap = json.decode(response.body);
6
      return bodyMap['lists'].map((item) {
7
        return ConversationData.formMap(item);
8
      }).toList();
9
    } else {
10
      throw Exception('请求失败：${response.statusCode}');
11
    }
12
  }

4.2 ListView 修改#

AsyncSnapshot

包含有绑定的 future 回调的数据，也包含异步任务的状态。我们可以用来判断是否展示加载页面。

1
  @override
2
  Widget build(BuildContext context) {
3
    return Scaffold(
4
      appBar: AppBar(...),
5
      body: Container(
6
        color: Colors.yellow,
7
        child: FutureBuilder(
8
          // 传入 Future
9
          future: _loadConversation(),
10
          builder: (context, AsyncSnapshot snap){
11
            // 判断请求状态
12
            if (snap.connectionState != ConnectionState.done) {
13
              return const Center(
14
                child: Text('Loading'),
15
              );
16
            }
17
            // 根据结果处理数据展示
18
            return ListView(
19
              children: snap.data.map<Widget>((item){
20
                return ConversationCell(conversation: item);
21
              }).toList(),
22
            );
23
          },
24
        ),
25
      ),
26
    );
27
  }

4.3 看看效果#

五、结合上面两种方式#

结合上面两种方式，这里使用 Future 调整加载数据的函数。

5.1 请求函数修改#

1
  /// 加载会话列表
2
  Future<List> _loadConversation() async {
3
    _isLoading = true;
4
    var response = await http.get(ServiceURL.conversationList);
5
    _isLoading = false;
6
    if (response.statusCode == 200) {
7
      final bodyMap = json.decode(response.body);
8
      final result = bodyMap['lists'].map((item) {
9
        return ConversationData.formMap(item);
10
      }).toList();
11

12
      return result;
13
    } else {
14
      throw Exception('请求失败：${response.statusCode}');
15
    }
16
  }

5.2 回调处理#

1
  @override
2
  void initState() {
3
    super.initState();
4
    _loadConversation().then((value) {
5
      // value 就是 Future 里 return 的结果
6
      setState(() {
7
        _conversations = value;
8
      });
9
    });
10
  }

5.3 异常处理#

通过 Future 我们也可以捕捉异常。

1
  @override
2
  void initState() {
3
    super.initState();
4
    _loadConversation().then((value) {
5
      setState(() {
6
        _conversations = value;
7
      });
8
    }).catchError((error) {
9
      print(error);
10
    });
11
  }

5.4 设置超时#

1
  @override
2
  void initState() {
3
    super.initState();
4
    _loadConversation().then((value) {
5
      setState(() {
6
        _conversations = value;
7
      });
8
    }).catchError((error) {
9
      print(error);
10
    }).whenComplete(() {
11
      print('Done');
12
    }).timeout(Duration(seconds: 10));
13
  }

六、保留数据#

总结#

第一种方式更加接近我们 iOS 开发中的思路
第二种方式 Future & FutureBuilder 更加充分利用 Future 特性
而结合二者的方式则对我这个iOS刚入门Flutter的新手而言，更加熟悉同时也有一些新的体验

完整代码#

GitHub

Mock数据小技巧

ListView滑动到指定位置

前言#