这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战
json 转模型
class ChatModel {
final String? name;
final String? message;
final String? imageUrl;
ChatModel({this.name, this.message, this.imageUrl});
//工厂构造方法
factory ChatModel.fromMap(Map map) {
return ChatModel(
name: map['name'],
message: map['message'],
imageUrl: map['imageUrl'],
);
}
}
复制代码
final chatMap = {
'name' : 'ChenXi',
'message' : 'Hello!',
};
//Map 转 json
final chatJson = json.encode(chatMap);
print(chatJson);
// json 转 Map
final newChatMap = json.decode(chatJson);
print(chatJson);
final chatModel = ChatModel.fromMap(newChatMap as Map);
print(chatModel);
复制代码
这里我们简单定义了一个 map
对象,代码示例中给出里 json
与 Map
的相互转换,及 Map
转模型。我们定义了一个 ChatModel
的模型,添加了 fromMap
方法,由外部传入一个 Map
类型的对象。开源的也有一些转模型的框架,这里我们先自己实现。
Future 使用
void initState() {
super.initState();
//获取网络数据
_getDatas().then((value) {
print('$value');
});
}
Future<List<ChatModel>> _getDatas() async {
//url 链接
final url = Uri.parse('http://rap2api.taobao.org/app/mock/294394/api/chat/list');
//发送请求
final response = await http.get(url);
if (response.statusCode == 200) {
//获取响应数据,并且把 json 转成 Map
final bodyMap = json.decode(response.body);
// 取出 bodyMap 中的 chat_list 数组,通过 map 方法进行遍历并转为模型,通过 toList 返回一个模型数组
final chatList = (bodyMap['chat_list'] as List).map((item) => ChatModel.fromMap(item)).toList();
return chatList;
} else {
throw Exception('statusCode:${response.statusCode}');
}
复制代码
这里 Future
代表未来的数据,Future
需要跟异步方法结合使用,我们对返回的数据 Future<List<ChatModel>>
进行包装,Future
有一个 then
方法,then
有一个外部传入一个闭包属性,当数据请求完成会调用闭包,这里我们可以拿到 value
的值,也就是模型数组。
FutureBuilder 异步渲染
body: Container(
child: FutureBuilder(
future: _getDatas(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
//正在加载
if (snapshot.connectionState == ConnectionState.waiting) {
return Container(
child: Text('正在加载!'),
);
}
//加载完成
return ListView(
children: snapshot.data.map<Widget>((ChatModel item) {
return ListTile(
title: Text(item.name as String),
subtitle: Container(
alignment: Alignment.bottomCenter,
height: 25,
child: Text(item.message as String, overflow: TextOverflow.ellipsis,),
),
leading: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.0),
image: DecorationImage(image: NetworkImage(item.imageUrl as String)),
),
),
);
}).toList(),
);
},
)
)
复制代码
这里我们通过 FutureBuilder
部件实现网络数据的加载,FutureBuilder
部件支持异步渲染,future
属性是 Future
类型的数据。在每次进入微信页面的时候 builder
方法会被调用两次,ConnectionState.waiting
代表数据正在加载,在这里我们可以做一些空页面展示的处理。ConnectionState.done
代表数据加载完成,snapshot.data
就是 _getDatas
方法返回的列表数据,这里可以进行相关逻辑的处理, 这里我们展示聊天列表数据。ListView
中我们用 ListTile
部件来作为 cell
,ListTile
包含主标题 title
、副标题 subtitle
、头像 leading
等属性,用起来很方便。
网络请求数据处理
//模型数组
List<ChatModel> _datas = [];
void initState() {
super.initState();
//获取网络数据
_getDatas().then((value) {
if (!_cancelConnect) {
setState(() {
_datas = value;
});
}
}).catchError((e) {
_cancelConnect = true;
//获取数据失败
print(e);
}).whenComplete(() {
print('数据请求结束');
}).timeout(Duration(seconds: 5)).catchError((timeout) {
_cancelConnect = true;
print('请求超时 ! $timeout');
});
}
复制代码
这里我们创建了一个外部成员变量 _datas
,用来保存网络请求的数据,网络请求成功之后调用 setState
方法,定义了一个属性 _cancelConnect
标识网络请求是否取消。catchError
代表请求失败,whenComplete
代表请求结束,timeout
可以设置超时时间,这里我们可以用来做一下 loading
页面的展示及错误页面的展示,
Container(
child: _datas.length == 0 ? Center(child: Text('Loading...')) :
ListView.builder(itemCount: _datas.length ,itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(_datas[index].name as String),
subtitle: Container(
alignment: Alignment.bottomCenter,
height: 25,
child: Text(_datas[index].message as String, overflow: TextOverflow.ellipsis,),
),
leading: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.0),
image: DecorationImage(image: NetworkImage(_datas[index].imageUrl as String)),
),
),
);
}),
)
复制代码
对于列表的展示我们这里换回了 ListView
,使用 FutureBuilder
,数据量比较大的话会影响加载问题。
页面保持状态
class _ChatPageState extends State<ChatPage> with AutomaticKeepAliveClientMixin<ChatPage>
复制代码
Widget build(BuildContext context) {
super.build(context);
}
复制代码
class _RootPageState extends State<RootPage> {
int _currentIndex = 0;
List <Widget>_pages = [ChatPage(), FriendsPage(), DiscoverPage(), MinePage()];
final PageController _controller = PageController();
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
body: PageView(
//禁止页面拖拽
physics: NeverScrollableScrollPhysics(),
onPageChanged: (int index) {
setState(() {
_currentIndex = index;
});
},
controller: _controller,
children: _pages,
),
复制代码
当我们切换底部 tabBar
的时候,每次进入页面都会重新加载,这里我们采用 AutomaticKeepAliveClientMixin
来保持状态,让页面只会被加载一次,以聊天页面为例,_ChatPageState
后面加上 with AutomaticKeepAliveClientMixin<ChatPage>
,并在 build
方法中调用 super.build(context)
。在 RootPage
中,用 _pages
数组来保存底部子页面,body
使用 PageView
部件,controller
赋值为我们定义的 _controller
,children
赋值为 _pages
。