Flutter实战 | 从 0 搭建「网易云音乐」APP（二、Splash Page、登录页、发现页）

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

前期回顾：

•Flutter实战 | 从 0 搭建「网易云音乐」APP（一、创建项目、添加插件、通用代码）

本篇为第二篇，在这里我们会搭建闪屏页、登录页、发现页的UI及逻辑。

Splash Page

我们现在的APP都有一个初始页面，在这个页面当中做一些插件和逻辑的初始化工作，所以我们首先就来做一个这个页面。先来看一下效果： 非常简单，就是一个网易云音乐的 Logo 从小到大。大致代码如下：

return Scaffold(
backgroundColor: Colors.white,
body: Container(
height: double.infinity,
width: double.infinity,
child: ScaleTransition(
scale: _logoAnimation,
child: Hero(
tag: 'logo',
child: Image.asset('images/icon_logo.png'),
),
),
),
);

但是，这个页面远不止只有一个动画这么简单。首先在查看过API 之后了解到，因很多接口都需要登录之后才能使用，所以在当前页面要判断是否已经登录，如果没有登录，那么则跳转到登录页，如果已经登录，那么则跳转到APP首页。逻辑代码如下：

UserModel userModel = Provider.of<UserModel>(context);
userModel.initUser();
if (userModel.user != null) {
NetUtils.refreshLogin(context);
NavigatorUtil.goHomePage(context);
} else
NavigatorUtil.goLoginPage(context);

使用 

Provider

 来全局存储用户信息， 

SharedPreferences

 存储用户信息到本地。其中 

initUser()

 方法就是用来从 

SharedPreferences

 中获取用户信息，如果没有获取到就为null。为 null 的情况下就要去跳转登录，如果不为空那么则刷新登录状态，然后跳转到首页。当然，最后不要忘了 

AnimationController.dispose()

。

登录页

这里就区分两种：1.UI页面2.登录逻辑先说UI。

登录 UI

首先从上面的UI能看出来有两个动画效果：1.hero动画2.logo 下方的组件渐变以及改变位置Hero比较简单我就不多说了，可以查看我以前的文章：Flutter 手势处理 & Hero 动画所有的登录组件被我封装在了组件中，然后使用 

AnimatedWidget

 来控制动画：

class _LoginAnimatedWidget extends AnimatedWidget {
final Tween<double> _opacityTween = Tween(begin: 0, end: 1);
final Tween<double> _offsetTween = Tween(begin: 40, end: 0);
final Animation animation;

_LoginAnimatedWidget({
@required this.animation,
}) : super(listenable: animation);

@override
Widget build(BuildContext context) {
return Opacity(
opacity: _opacityTween.evaluate(animation),
child: Container(
margin: EdgeInsets.only(top: _offsetTween.evaluate(animation)),
child: _LoginWidget(),
),
);
}
}

这样就组成了从 splash 页面跳转到登录页的动画效果。

登录逻辑

前面说过，是使用 

Provider

 来存储用户信息的，那么请求登录也使用 

Provider

 来控制，以达到 UI 数据分离的效果。先看一下 

UserModel

 类：

class UserModel with ChangeNotifier {
User _user;

User get user => _user;

/// 初始化 User
void initUser() {
if (Application.sp.containsKey('user')) {
String s = Application.sp.getString('user');
_user = User.fromJson(json.decode(s));
}
}

/// 登录
void login(BuildContext context, String phone, String pwd) async {

User user = await NetUtils.login(context, phone, pwd);
if (user.code > 299) {
Fluttertoast.showToast(msg: user.msg ?? '登录失败，请检查账号密码', gravity: ToastGravity.CENTER);
return;
}
Fluttertoast.showToast(msg: '登录成功', gravity: ToastGravity.CENTER);
_saveUserInfo(user);
NavigatorUtil.goHomePage(context);
}

/// 保存用户信息到 sp
_saveUserInfo(User user) {
_user = user;
Application.sp.setString('user', json.encode(user.toJson()));
}
}

代码也很清晰，一共就三个方法：1.初始化用户数据（在 Splash Page 调用，保存用户信息）2.调用登录接口（成功后跳转到首页，并保存数据）3.保存用户数据

发现页

发现页从上到下，一共分五块：1.Banner2.分类3.推荐歌单4.新碟上架5.MV 排行其中除「分类」模块为本地外，其余都是网络请求的数据。Banner 使用的控件，我之前也分享过文章：Flutter | 封装一个 Banner 轮播图。其余的也是用我之前写过的Flutter | 定义一个通用的多功能网络请求 Widget。使用该控件的好处就是 省去处理网络请求的逻辑，只有返回正确数据时才会走到build回调。其他的逻辑一概不用考虑。 有没有发现这两个控件很像？区别有两个，第一个是上面的有播放量，下面的没有。而下面的有第二行小字，上面的没有。那我们就可以把它封装成一个组件！等等！为什么我们不把圆角矩形图片也封装成一个组件呢？万一后面也能用到呢？？？？那为什么不把封面也封装成一个组件呢？万一后面也能用到呢？所以，我们先来封装圆角矩形图片：

class RoundedNetImage extends StatelessWidget {
final String url;
final double width;
final double height;
final double radius;

RoundedNetImage(this.url, {this.width, this.height, this.radius = 10});

@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(radius)),
child: Image.network(
url,
width: ScreenUtil().setWidth(width),
height: ScreenUtil().setWidth(height),
),
);
}
}

这里我们做的灵活一点，角度和宽高都由调用者来传入。然后继续封装我们的封面组件：

/// 歌单、新碟上架等封面组件
class PlayListCoverWidget extends StatelessWidget {

final String url;
final int playCount;
final double width;

PlayListCoverWidget(this.url, {this.playCount, this.width = 200});

@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8)),
child: Container(
width: ScreenUtil().setWidth(width),
height: ScreenUtil().setWidth(width),
child: Stack(
alignment: Alignment.topRight,
children: <Widget>[
Image.network(url),
playCount == null
? Container()
: Padding(
padding: EdgeInsets.only(
top: ScreenUtil().setWidth(2),
right: ScreenUtil().setWidth(5)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(
'images/icon_triangle.png',
width: ScreenUtil().setWidth(30),
height: ScreenUtil().setWidth(30),
),
Text(
'${NumberUtils.amountConversion(playCount)}',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
)
],
),
)
],
),
),
);
}
}

代码也很简单，一共需要三个参数：•url：封面图的url（必填）•playCount：播放数量，null就不显示（非必填）•width：封面的宽高（默认200）接下来就简单了，因为前两个组件都已经封装好了：

/// 歌单、新碟上架等封装的组件
class PlayListWidget extends StatelessWidget {
final String picUrl;
final String text;
final String subText;
final num playCount;
final int maxLines;
final VoidCallback onTap;
final int index;

PlayListWidget({
this.picUrl,
@required this.text,
this.playCount,
this.subText,
this.onTap,
this.maxLines = -1,
this.index,
});

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
width: ScreenUtil().setWidth(200),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
picUrl == null ? Container() : PlayListCoverWidget(
picUrl,
playCount: playCount,
),
index == null ? Container() : Text(index.toString(), style: commonGrayTextStyle,),
VEmptyView(5),
Text(
text,
style: smallCommonTextStyle,
maxLines: maxLines != -1 ? maxLines : null,
overflow: maxLines != -1 ? TextOverflow.ellipsis : null,
),
subText == null ? Container() : VEmptyView(2),
subText == null
? Container()
: Text(
subText,
style: TextStyle(fontSize: 10, color: Colors.grey),
maxLines: maxLines != -1 ? maxLines : null,
overflow: maxLines != -1 ? TextOverflow.ellipsis : null,
),
],
),
),
);
}
}

虽然代码比较多，但逻辑还是很简单的。其实就是一个

Column

，然后根据字段是否为null来显示/隐藏某一个组件。这样我们的发现页的逻辑大致就结束了。

总结

可以看得出来，只要我们前期架构搭的好，后期写起来代码真的是一气呵成。代码我就不放在单独的分支里了，都在主分支里。并且现在主分支当中也上传了到目前为止所开发完成的功能，欢迎查看。该系列文章代码已传至 GitHub：https://github.com/wanglu1209/NeteaseClouldMusic另我个人创建了一个「Flutter 交流群」，可以添加我个人微信 「17610912320」来入群。