Flutter实战 | 从 0 搭建「网易云音乐」APP（8、个人页面）

本系列可能会伴随你们很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。

下面是该APP 功能的思惟导图：

前期回顾：

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

本篇为第八篇，在这里咱们会搭建「个人」页面。

个人	新建歌单	歌单操做

0. 确认需求

仍是老套路，先确认一下需求。

「个人」页面，我这里作的比较简单，上面的UI（本地音乐等）目前只是用来展现用，真正的功能有以下几点：

1. 展现歌单（建立的歌单、收藏的歌单）
2. 建立新歌单
3. 对歌单进行操做

下面就开始吧。

1. 展现歌单

首先咱们先想一下，整个 APP 中对于歌单操做的位置实际上是很是多的（搜索后添加歌单、推荐歌单里添加歌单、给歌单添加歌曲等等），那么对于这种需求，我所考虑的就是把歌单的逻辑放入顶层 Provider 中，这样方便操做。

理清楚逻辑后，来看页面如何展现：

一共分为两块：「建立的歌单」、「收藏的歌单」。

两个模块的 UI 实际上是同样的，只不过度在了不一样的列表中。

那么先来看一下返回的数据是什么样的：

emmm，只返回了一个 playlist，那就说明要让咱们本身来找这两个的区别了。

通过我一番查找后发现，不一样类型的 Creator 值是不同的，「我建立的歌单」里的数据 Creator.userId 是等于我登陆后我的 id 的， 因此区分的代码以下：

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

ok，数据有了，画页面就简单多了，从图上咱们也能够看得出来，是能够展开和收回的。

这个功能首先我想到的是 ExpansionPanelList，可是他和咱们的需求不太搭，包括样式和逻辑。

那咱们就自定义一个，怎么来作到展开和收回？其实就是控制歌单列表的显示和不显示，因此咱们应该能想到一个组件：Offstage。

并且在展开/收回的时候箭头要来回的变化，我在前面也写过一篇文章：Flutter | 求求大家了，切换 Widget 的时候加上动画吧，这个时候就派上用场了。

头部组件大体代码以下：

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 为 null，那么这个按钮的颜色就是灰色的。

因此咱们使用 TextEditingController 来判断就行了：

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

最后在调用接口成功以后，给歌单列表中插入一条数据就好了，可是这里返回的时候是没有 Creator 信息的，咱们本身添加上就ok了：

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：github.com/wanglu1209/…

另我我的建立了一个「Flutter 交流群」，能够添加我我的微信 「17610912320」来入群。