Flutter实战 | 从 0 搭建「网易云音乐」APP（3、每日推荐、推荐歌单）

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

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

前期回顾：

• Flutter实战 | 从 0 搭建「网易云音乐」APP（1、建立项目、添加插件、通用代码）
• Flutter实战 | 从 0 搭建「网易云音乐」APP（2、Splash Page、登陆页、发现页）

每日推荐	推荐歌单

本篇为第三篇，在这里咱们会搭建每日推荐、推荐歌单。

UI 分析

首先仍是再来看一下「每日推荐」的UI效果：

看到这个效果，有经验的同窗可能直接就会喊出：CustomScrollView！！

没错，当前页一共分为三部分：

1. SliverAppBar
2. SliverAppBar 的 bottom
3. SliverList

整个页面就是用 CustomScrollView 来作的，可是有一点不一样：

平时咱们在使用 SliverAppBar 作这种折叠效果的时候，折叠起来是会变成主题色的，

因此这里我找了别人写好的一个组件：FlexibleDetailBar，用它之后的效果就是上面图片那样。

滑上去的时候「播放所有」那一行还停留在上方，是使用了 SliverAppBar 的 bottom参数。

这样一个页面的UI其实就分析完了。

然而！咱们回过头看一下两个页面的UI，是否是感受很是类似！咱们来捋一下。

1. 标题，不用多说，是同样的
2. SliverAppBar 展开状态时的内容，是否是能够由外部传入
3. 播放所有，也是同样的，后面有个「共多少首」，也能够由调用者传入
4. 最下面的歌单，是否是也能够封装出一个组件来
5. 忘记标了，还有一个是SliverAppBar展开时的模糊背景，也能够由调用者传入

so，咱们从上往下来封装。

先封装SliverAppBar 的 bottom

肯定一下需求，看看须要传入哪些参数：

1. count：共多少首歌
2. tail：尾部控件
3. onTap：点击播放所有时的回调

bottom 须要的是一个 PreferredSizeWidget，因此咱们的代码是这样：

class MusicListHeader extends StatelessWidget implements PreferredSizeWidget {
  MusicListHeader({this.count, this.tail, this.onTap});
  final int count;
  final Widget tail;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.vertical(
          top: Radius.circular(ScreenUtil().setWidth(30))),
      child: Container(
        color: Colors.white,
        child: InkWell(
          onTap: onTap,
          child: SizedBox.fromSize(
            size: preferredSize,
            child: Row(
              children: <Widget>[
                HEmptyView(20),
                Icon(
                  Icons.play_circle_outline,
                  size: ScreenUtil().setWidth(50),
                ),
                HEmptyView(10),
                Padding(
                  padding: const EdgeInsets.only(top: 3.0),
                  child: Text(
                    "播放所有",
                    style: mCommonTextStyle,
                  ),
                ),
                HEmptyView(5),
                Padding(
                  padding: const EdgeInsets.only(top: 3.0),
                  child: count == null
                      ? Container()
                      : Text(
                    "(共$count首)",
                    style: smallGrayTextStyle,
                  ),
                ),
                Spacer(),
                tail ?? Container(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(ScreenUtil().setWidth(100));
}
复制代码

而后封装 SliverAppBar

仍是先肯定一下需求，看看须要传入什么：

1. 要传入一个背景还模糊
2. 传入title
3. 传入展开时的高度
4. 播放次数
5. 播放所有的点击回调

肯定好就以后，代码以下：

class PlayListAppBarWidget extends StatelessWidget {
  final double expandedHeight;
  final Widget content;
  final String backgroundImg;
  final String title;
  final double sigma;
  final VoidCallback playOnTap;
  final int count;

  PlayListAppBarWidget({
    @required this.expandedHeight,
    @required this.content,
    @required this.title,
    @required this.backgroundImg,
    this.sigma = 5,
    this.playOnTap,
    this.count,
  });

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      centerTitle: true,
      expandedHeight: expandedHeight,
      pinned: true,
      elevation: 0,
      brightness: Brightness.dark,
      iconTheme: IconThemeData(color: Colors.white),
      title: Text(
        title,
        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
      ),
      bottom: MusicListHeader(
        onTap: playOnTap,
        count: count,
      ),
      flexibleSpace: FlexibleDetailBar(
        content: content,
        background: Stack(
          children: <Widget>[
            backgroundImg.startsWith('http')
                ? Image.network(
                    backgroundImg,
                    width: double.infinity,
                    height: double.infinity,
                    fit: BoxFit.cover,
                  )
                : Image.asset(backgroundImg),
            BackdropFilter(
              filter: ImageFilter.blur(
                sigmaY: sigma,
                sigmaX: sigma,
              ),
              child: Container(
                color: Colors.black38,
                width: double.infinity,
                height: double.infinity,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
复制代码

这里有两个地方须要注意一下：

1. 外部传入背景图片时，有多是本地文件，也有多是网络图片，因此咱们直接在这里判断 startsWith('http')
2. 模糊背景图片时，加一个 Colors.black38，这样省的后续有白色图片所致使文字看不清。

最后封装歌曲列表的item

这个item就比较简单了，传入一个实体类，根据参数来填值就行了，大体代码以下：

class WidgetMusicListItem extends StatelessWidget {
  final MusicData _data;

  WidgetMusicListItem(this._data);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: Application.screenWidth,
      height: ScreenUtil().setWidth(120),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          // xxx
        ],
      ),
    );
  }
}

复制代码

总结

通过前两次基础页面的搭建，咱们后续再来写页面的时候能够说是简单了百倍不止。

并且根本不用管网络请求之类的逻辑，只需管好咱们的页面就行了。

而在写UI时，也必定要多看，多想，这个能不能封装出来？那个能不能提取？

这样之后再开发的话，真的是很是简单。

该系列文章代码已传至 GitHub：github.com/wanglu1209/…

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