從Android 開發到Flutter 之 開屏頁和廣告頁《二》

在APP開發的過程中,我們一般需要一個開屏頁和一個廣告頁

開屏頁

開發Android 的都知道,Android啓動的時候會有一個小的空白,我們的解決方法是給開屏頁設置style ,讓其在加載聲明週期方法之前先設置一個填位圖,消除空白


  • Flutter 項目在IOS上是秒起的,不會出現這個問題,在Android上還是會出現的,但是Flutter 項目已經將這個操作在創建項目的時候就實現了

  • 打開android moudle 找到res->style 看一下啓動頁的主題 drawable 所指向的文件 launch_background 文件,就是更具Android中常用的解決方法處理的,

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <!--<item name="android:windowIsTranslucent">true</item>-->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
  • 找到launch_background
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/splash" /> <--此處爲更換的圖片-->

    <!-- You can insert your own image assets here -->
   <!--<item >-->
        <!--<bitmap-->
            <!--android:gravity="center"-->
            <!--android:src="@mipmap/splash"-->
            <!--android:tileMode="disabled"-->
            <!--android:autoMirrored="true"-->
            <!--/>-->
    <!--</item>-->
</layer-list>

這就解決了開屏的問題,但是一般會在開屏的時候初始化一些東西 這樣的話我們怎麼處理,此時我們可以使用開屏之後開啓廣告頁 既展示廣告又能初始化一些東西

需求:APP啓動的時候需要判斷是否已經登錄,跳轉相對應的page

在設置完成開屏之後會發現啓動直接就到main.dart了,沒辦法做這個處理,並且Dart 是單線程的語言,關於數據的存儲都需要異步來實現,

解決辦法

添加廣告頁,既作爲展示廣告頁初始化一些操作

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  String route;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getCredential();
  }

  getCredential() {
    SPUtil.init().get(TMCommonConstant.AUTH_TOKEN).then((result) {
      route = result;
      //異步獲取到數據之後判斷token 是否爲空
      if (route == null) {
        route = "/";
      } else {
        route = "navigation";
      }
      countDown();
    });
  }

  @override
  Widget build(BuildContext context) {
  	//展示廣告
    return new Image.asset(
      Images.splash,
      fit: BoxFit.fill,
    );
  }

  void countDown() {
  //倒計時3s
    var _duration = new Duration(seconds: 3);
    Future.delayed(_duration, goHome);
  }

  void goHome() {
  //根據判斷的路由跳轉到相應的頁面
    Navigator.pushReplacementNamed(context, route);
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章