本系列可能會伴隨大家很長時間，這裡我會從0開始搭建一個「網易雲音樂」的APP出來。
下面是該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()。
登入頁
這裡就區分兩種：
- UI頁面
- 登入邏輯
先說UI。
登入 UI
首先從上面的UI能看出來有兩個動畫效果：
- hero動畫
- logo 下方的元件漸變以及改變位置
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()));
}
}
複製程式碼程式碼也很清晰，一共就三個方法：
- 初始化使用者資料（在 Splash Page 呼叫，儲存使用者資訊）
- 呼叫登入介面（成功後跳轉到首頁，並儲存資料）
- 儲存使用者資料
發現頁
發現頁從上到下，一共分五塊：
- Banner
- 分類
- 推薦歌單
- 新碟上架
- 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：github.com/wanglu1209/…
另我個人建立了一個「Flutter 交流群」，可以新增我個人微信 「17610912320」來入群。