Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)

Flutter筆記 發表於 2019-10-14

本系列可能會伴隨大家很長時間,這裡我會從0開始搭建一個「網易雲音樂」的APP出來。

下面是該APP 功能的思維導圖:

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)

前期回顧:

本篇為第二篇,在這裡我們會搭建閃屏頁、登入頁、發現頁的UI及邏輯。

Splash Page

我們現在的APP都有一個初始頁面,在這個頁面當中做一些外掛和邏輯的初始化工作,所以我們首先就來做一個這個頁面。

先來看一下效果:

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)

非常簡單,就是一個網易雲音樂的 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

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)

首先從上面的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 頁面跳轉到登入頁的動畫效果。

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)

登入邏輯

前面說過,是使用 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. 儲存使用者資料

發現頁

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)

發現頁從上到下,一共分五塊:

  1. Banner
  2. 分類
  3. 推薦歌單
  4. 新碟上架
  5. MV 排行

其中除「分類」模組為本地外,其餘都是網路請求的資料。

Banner 使用的控制元件,我之前也分享過文章:Flutter | 封裝一個 Banner 輪播圖。

其餘的也是用我之前寫過的Flutter | 定義一個通用的多功能網路請求 Widget。

使用該控制元件的好處就是 省去處理網路請求的邏輯,只有返回正確資料時才會走到build回撥。其他的邏輯一概不用考慮。

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)

有沒有發現這兩個控制元件很像?

區別有兩個,第一個是上面的有播放量,下面的沒有。而下面的有第二行小字,上面的沒有。

那我們就可以把它封裝成一個元件!

等等!為什麼我們不把圓角矩形圖片也封裝成一個元件呢?萬一後面也能用到呢?

???那為什麼不把封面也封裝成一個元件呢?萬一後面也能用到呢?

所以,我們先來封裝圓角矩形圖片:

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」來入群。

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(二、Splash Page、登入頁、發現頁)