小編給大家分享一下如何實(shí)現(xiàn)Flutter啟動(dòng)頁(yè)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷、網(wǎng)站重做改版、成武網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為成武等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

為什么要有啟動(dòng)頁(yè)？

啟動(dòng)頁(yè)就是閃屏頁(yè)。

現(xiàn)在大部分App都有啟動(dòng)頁(yè)，那么為什么要有啟動(dòng)頁(yè)？這是個(gè)值得思考的問(wèn)題，如果沒(méi)有啟動(dòng)頁(yè)會(huì)怎樣，大部分的App會(huì)白屏（也有可能是黑屏，主題設(shè)置有關(guān)系）非常短的時(shí)間，然后才能展示App的內(nèi)容。

那么問(wèn)題來(lái)了，一定要有啟動(dòng)頁(yè)嗎？答案：不是，而且是盡可能不要有啟動(dòng)頁(yè)，因?yàn)閱?dòng)頁(yè)會(huì)讓用戶體驗(yàn)不夠連貫，甚至IOS在開(kāi)發(fā)手冊(cè)上就不推薦使用啟動(dòng)頁(yè)。

我們深入思考一下，既然不推薦為什么這樣流行，答案非常簡(jiǎn)單，啟動(dòng)頁(yè)的成本非常低，如果你想把的App啟動(dòng)優(yōu)化到一個(gè)非常短的時(shí)間，還是有一定成本的。

Android啟動(dòng)流程

為什么要談Android的啟動(dòng)流程呢？因?yàn)镕lutter啟動(dòng)的時(shí)候，依賴的是Android的運(yùn)行環(huán)境，其本質(zhì)是Activity上添加了一個(gè)FlutterView，F(xiàn)lutterView繼承SurfaceView，那么就容易理解了，F(xiàn)lutter的全部頁(yè)面都是渲染到了FlutterView上，如果不熟悉Flutter的啟動(dòng)流程可以參考Flutter啟動(dòng)流程 這篇文章，下面是對(duì)Flutter啟動(dòng)的一個(gè)簡(jiǎn)單描述。

在Flutter中，啟動(dòng)頁(yè)的作用是在FlutterView顯示第一幀之前，不要出現(xiàn)白屏，在FlutterView顯示第一幀之前，我們分成兩個(gè)階段，Android啟動(dòng)階段和Flutter啟動(dòng)階段，Android啟過(guò)程添加啟動(dòng)頁(yè)非常容易，在主題xml中添加android:windowBackground屬性，F(xiàn)lutter怎么添加啟動(dòng)頁(yè)呢？其實(shí)框架已經(jīng)幫助咱們實(shí)現(xiàn)好了，我下面就給大家說(shuō)一下原理。

Flutter啟動(dòng)頁(yè)具體實(shí)現(xiàn)和原理

創(chuàng)建一個(gè)SplashActivity，這Activity繼承FlutterActivity，重寫(xiě)onCreate()方法，在onCreate()方法中調(diào)用GeneratedPluginRegistrant.registerWith() ，下面是啟動(dòng)頁(yè)的代碼。

public class SplashActivity extends FlutterActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 GeneratedPluginRegistrant.registerWith(this);
 }
}

在Manifest中添加SplashActivity作為App的啟動(dòng)Activity，設(shè)置SplashActivity的主題是LaunchTheme。下面是Manifest的配置文件。

meta-data的name = "io.flutter.app.android.SplashScreenUntilFirstFrame"的value一定要設(shè)置成true，一定要設(shè)置成true，一定要設(shè)置成true重要的事情說(shuō)三遍，如果這個(gè)屬性設(shè)置成false，效果是這樣的。

從現(xiàn)象觀察，啟動(dòng)頁(yè)中間有一段時(shí)間黑屏，這個(gè)為什么呢？前面我們說(shuō)過(guò)，F(xiàn)lutter的啟動(dòng)流程分成兩部分，一部分是Android啟動(dòng)階段，一個(gè)是Flutter的啟動(dòng)階段，這個(gè)黑屏就是Flutter的啟動(dòng)階段沒(méi)有啟動(dòng)頁(yè)所造成的。我們從源碼入手，詳細(xì)分析一下，下面是FlutterActivityDelegate的部分源碼。

public final class FlutterActivityDelegate
 implements FlutterActivityEvents,
  FlutterView.Provider,
  PluginRegistry {
 private static final String SPLASH_SCREEN_META_DATA_KEY = "io.flutter.app.android.SplashScreenUntilFirstFrame";

 private View launchView;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 String[] args = getArgsFromIntent(activity.getIntent());
 FlutterMain.ensureInitializationComplete(activity.getApplicationContext(), args);
 flutterView = viewFactory.createFlutterView(activity);
 if (flutterView == null) {
 FlutterNativeView nativeView = viewFactory.createFlutterNativeView();
 flutterView = new FlutterView(activity, null, nativeView);
 flutterView.setLayoutParams(matchParent);
 activity.setContentView(flutterView);
 launchView = createLaunchView();//1
 if (launchView != null) {
 addLaunchView();//2
 }
 }
 }

 private View createLaunchView() {
 if (!showSplashScreenUntilFirstFrame()) {//3
 return null;
 }
 final Drawable launchScreenDrawable = getLaunchScreenDrawableFromActivityTheme();
 final View view = new View(activity);
 view.setBackground(launchScreenDrawable);
 return view;
 }

 private Drawable getLaunchScreenDrawableFromActivityTheme() {
 //省略了部分代碼
 try {
 return activity.getResources().getDrawable(typedValue.resourceId);
 } catch (NotFoundException e) {
 return null;
 }
 }

 private Boolean showSplashScreenUntilFirstFrame() {
 try {
 ActivityInfo activityInfo = activity.getPackageManager().getActivityInfo(
 activity.getComponentName(),
 PackageManager.GET_META_DATA|PackageManager.GET_ACTIVITIES);
 Bundle metadata = activityInfo.metaData;
 return metadata != null && metadata.getBoolean(SPLASH_SCREEN_META_DATA_KEY);
 } catch (NameNotFoundException e) {
 return false;
 }
 }

 private void addLaunchView() {
 activity.addContentView(launchView, matchParent);//4
 flutterView.addFirstFrameListener(new FlutterView.FirstFrameListener() {//5
 @Override
 public void onFirstFrame() {
 FlutterActivityDelegate.this.launchView.animate()
  .alpha(0f)
  .setListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
  ((ViewGroup) FlutterActivityDelegate.this.launchView.getParent())
  .removeView(FlutterActivityDelegate.this.launchView);//5
  }
  });
 }
 });
 activity.setTheme(android.R.style.Theme_Black_NoTitleBar);
 }
}

注釋1

這個(gè)段代碼很容易理解，創(chuàng)建一個(gè)LaunchView，主要邏輯在createLaunchView()中，原理也很簡(jiǎn)單，根據(jù)主題中的R.attr.windowBackground屬性，生成一個(gè)Drawable，然后創(chuàng)建了一個(gè)View，并且把這個(gè)View的背景設(shè)置成Drawable。

注釋3

showSplashScreenUntilFirstFrame()是得到Manifet中io.flutter.app.android.SplashScreenUntilFirstFrame的屬性的值，如果是false，那么久返回一個(gè)空的的LaunchView，也就不會(huì)執(zhí)行注釋2的代碼。這就是我們上面說(shuō)的如果設(shè)置成false就顯示黑屏的原因。

注釋2

調(diào)用addLaunchView()，這方法也很簡(jiǎn)單，首先看注釋4，把LaunchView添加到當(dāng)前的Activity中，然后添加了一個(gè)監(jiān)聽(tīng)，在注釋5處，這個(gè)監(jiān)聽(tīng)是當(dāng)FlutterView第一幀加載完成后回調(diào)，回調(diào)做了什么事情呢？很簡(jiǎn)單，把LaunchView刪除了，顯示FlutterView的第一幀。

總結(jié)一下，就是把Android的啟動(dòng)頁(yè)生成一個(gè)Drawable，創(chuàng)建了一個(gè)LaunchView，把Drawable設(shè)置成LaunchView的背景，當(dāng)前的Activity添加這LaunchView，如果FlutterView的第一幀顯示了，把LaunchView刪除。

設(shè)置主題，下面是LaunchTheme的代碼。

 
 
 @drawable/launch_background
 

下面是launch_background的代碼。

最終效果如下，沒(méi)有黑屏，非常順滑。

以上是“如何實(shí)現(xiàn)Flutter啟動(dòng)頁(yè)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！