解决Flutter混合开发原生页面跳转Flutter页面黑屏的问题

在Flutter混合开发入门这篇文章中我们介绍了如何在原来的原生项目中集成Flutter，实现了从原生页面跳转flutter页面的功能

但是在页面跳转的过程中出现黑屏的问题

方法一

增加调用flutterView.setZOrderOnTop(true)和flutterView.getHolder().setFormat(PixelFormat.TRANSLUCENT)

public class FlutterActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);

        FlutterView flutterView = Flutter.createView(FlutterActivity.this, getLifecycle(), "route1");
        flutterView.setZOrderOnTop(true);
        flutterView.getHolder().setFormat(PixelFormat.TRANSLUCENT);
        setContentView(flutterView);
    }
}

方法二

先隐藏FlutterView，显示加载进度圈

监听FlutterView的加载，当第一帧加载成功后显示再显示FlutterView

public class FlutterActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);

        ProgressBar progress = findViewById(R.id.progress);
        FrameLayout container = findViewById(R.id.container);
        View flutterView = Flutter.createView(FlutterActivity.this, getLifecycle(), "route1");
        FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
        container.addView(flutterView, layout);
        ((FlutterView) flutterView).addFirstFrameListener(new FlutterView.FirstFrameListener() {
            @Override
            public void onFirstFrame() {
                progress.setVisibility(View.INVISIBLE);
                container.setVisibility(View.VISIBLE);
            }
        });
    }
}

布局如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible"/>
</FrameLayout>