​Flutter实战 | 从 0 搭建「网易云音乐」APP（八、我的页面）

本系列可能会伴随大家很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。下面是该APP 功能的思维导图：

前期回顾：

1.Flutter实战 | 从 0 搭建「网易云音乐」APP（一、创建项目、添加插件、通用代码）2.Flutter实战 | 从 0 搭建「网易云音乐」APP（二、Splash Page、登录页、发现页）3.Flutter实战 | 从 0 搭建「网易云音乐」APP（三、每日推荐、推荐歌单）4.Flutter实战 | 从 0 搭建「网易云音乐」APP（四、排行榜、播放页面）5.Flutter实战 | 从 0 搭建「网易云音乐」APP（五、播放功能逻辑）6.Flutter实战 | 从 0 搭建「网易云音乐」APP（六、歌词（一））7.Flutter实战 | 从 0 搭建「网易云音乐」APP（七、歌词（二））

本篇为第八篇，在这里我们会搭建「我的」页面。

我的	新建歌单	歌单操作

0. 确认需求

还是老套路，先确认一下需求。「我的」页面，我这里做的比较简单，上面的UI（本地音乐等）目前只是用来展示用，真正的功能有如下几点：1.展示歌单（创建的歌单、收藏的歌单）2.创建新歌单3.对歌单进行操作下面就开始吧。

1. 展示歌单

首先我们先想一下，整个 APP 中对于歌单操作的位置其实是非常多的（搜索后添加歌单、推荐歌单里添加歌单、给歌单添加歌曲等等），那么对于这种需求，我所考虑的就是把歌单的逻辑放入顶层 

Provider

Creator

Creator.userId

_selfCreatePlayList =
_allPlayList.where((p) => p.creator.userId == user.account.id).toList();
_collectPlayList =
_allPlayList.where((p) => p.creator.userId != user.account.id).toList();

ExpansionPanelList

Offstage

Widget build(BuildContext context) {
return Container(
height: ScreenUtil().setWidth(80),
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
if (arrow == arrows[0])
arrow = arrows[1];
else
arrow = arrows[0];
widget.onSwitchTap();
});
},
child: Row(
children: <Widget>[
AnimatedSwitcher(
transitionBuilder: (child, anim) {
return ScaleTransition(child: child, scale: anim);
},
duration: Duration(milliseconds: 300),
child: Image.asset(
arrow,
key: ValueKey(arrow),
width: ScreenUtil().setWidth(30),
),
),
],
),
),
);
}

GestureDetector

widget.onSwitchTap()

Widget _realBuildPlayList() {

return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
PlaylistTitle("创建的歌单", _playListModel.selfCreatePlayList.length, () {
setState(() {
selfPlayListOffstage = !selfPlayListOffstage;
});
}, () {},xxx,
Offstage(
offstage: selfPlayListOffstage,
child: _buildPlayListItem(_playListModel.selfCreatePlayList),
),
PlaylistTitle(
"收藏的歌单",
_playListModel.collectPlayList.length,
() {
setState(() {
collectPlayListOffstage = !collectPlayListOffstage;
});
},
() {},
),
Offstage(
offstage: collectPlayListOffstage,
child: _buildPlayListItem(_playListModel.collectPlayList),
),
],
);
}

Offstage

setState

2. 新建歌单

新建歌单相对来说就简单很多了。 就是一个弹出框，来看一下是怎么写的：

Widget build(BuildContext context) {
return AlertDialog(
title: Text(
'新建歌单',
style: bold16TextStyle,
),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(ScreenUtil().setWidth(20)))),
content: Theme(
data: ThemeData(primaryColor: Colors.red),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
xxx,
],
),
),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('取消'),
textColor: Colors.red,
),
FlatButton(
onPressed: submitCallback == null
? null
: () {
submitCallback(_editingController.text, isPrivatePlayList);
},
child: Text('提交'),
textColor: Colors.red,
),
],
);
}

showDialog()

AlertDialog

AlertDialog

shape

FlatButton

onPressed

TextEditingController

_editingController.addListener(() {
if (_editingController.text.isEmpty) {
setState(() {
submitCallback = null;
});
} else {
setState(() {
if (submitCallback == null) {
submitCallback = widget.submitCallback;
}
});
}
});

Creator

NetUtils.createPlaylist(context,
params: {'name': name, 'privacy': isPrivate ? '10' : null})
.catchError((e) {
Utils.showToast('创建失败');
}).then((result) {
Utils.showToast('创建成功');
Navigator.of(context).pop();
_playListModel.addPlayList(result.playlist..creator = _playListModel.selfCreatePlayList[0].creator);
});

3. 歌单操作

showModalBottomSheet

PlayListModel

4. 总结

其实这一篇没什么好总结的，把前面写好的东西拿来用就好了，非常简单。毕竟知识就是一个积累的过程，慢慢学就完了。该项目是我本人自己在工作之余写的，所以进度不会很快，但是会一直写下去。大家如果有好的建议的话，欢迎提 issue，我会在第一时间回复。该系列文章代码已传至 GitHub：https://github.com/wanglu1209/NeteaseClouldMusic另我个人创建了一个「Flutter 交流群」，可以添加我个人微信 「17610912320」来入群。