Flutter/Native混合工程页面跳转

这篇文章介绍Flutter页面的入栈出栈方式、Flutter页面和Native页面互相跳转的方法，以及混合页面栈的管理方案思考。

1. Flutter页面之间的跳转

在不同的页面之间跳转，在Android里对应的是Activity(Fragment)跳转，iOS里对应的是ViewController的跳转，在Flutter里，每个页面都是Widget，跳转的过程就是Widget的入栈和出栈过程。跳转用到的类是Navigator。

例子：

1. 在一个页面(比如StatelessWidget)中跳转到SecondScreen：

  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );

push的第二个参数是Route，可以自己实现，也可以直接用已经帮你实现了两个平台的跳转动画的MaterialPageRoute。

2. 从SecondScreen中回到原来的页面，用Navigator.pop出栈：

// Within the SecondScreen Widget
onPressed: () {
  Navigator.pop(context);
}

观察pop的方法签名，第二个参数可以携带参数返回上一个页面。

Navigator.pop(context,"携带参数");

前一个页面通过push方法的返回值来接收参数，返回值是一个Future<T>。类似Android的startActivityForResult。

Navigator的其他push/pop方法：

1. pop 普通的退栈
2. popAndPushNamed 退栈然后入栈一个指定name的页面
3. popUntil 重复调用pop直到predicate返回true
4. push 普通的叠加栈
5. pushAndRemoveUntil 跳转，然后清栈(相当于Android的)
6. pushNamed 跳转到指定的routeName的widget

对于6，可以在MaterialApp里配置路由

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        "route1": (BuildContext context) => new SecondPage(),
      },
    );
  }
}

2. Flutter页面跳转Native页面

Flutter跳Native页面利用的是MethodChannell。也就是先发一个「信号」给Native客户端，客户端收到信号后打开Native的页面。

method channe

a. 跳转到一个新的页面

1. 在MethodCallHandler回调函数中打开新的Native Activity，这样的Activity是全屏的，跳转方式遵循原生的页面跳转：

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "samples.flutter.io/battery";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        FlutterMain.startInitialization(this);

        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);

        new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                new MethodChannel.MethodCallHandler() {
                    @Override
                    public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                        //打开新的Activity
                        startActivity(new Intent(MainActivity.this, FloatingActivity.class));
                    }
                });
    }

iOS的实现也类似，通过MethodChannel(flutterView, CHANNEL).setMethodCallHandler来回调Native的方法，可以参考:
https://flutter.io/platform-channels/

b. 叠加到现有的View

对于安卓来说，可以attach到现有的VIew：

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "samples.flutter.io/battery";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        FlutterMain.startInitialization(this);

        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);

        new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                new MethodChannel.MethodCallHandler() {
                    @Override
                    public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                        //add到现有的view
                        FrameLayout v = findViewById(android.R.id.content);
                        View linearLayout = new LinearLayout(MainActivity.this);
                        linearLayout.setBackgroundColor(0xff0000ff);
                        ViewGroup.MarginLayoutParams marginLayoutParams = new ViewGroup.MarginLayoutParams(400, 400);
                        marginLayoutParams.setMargins(400, 400, 0, 0);
                        linearLayout.setLayoutParams(marginLayoutParams);
                        v.addView(linearLayout);
                    }
                });
    }

叠加了蓝色块
原理是这样的，通过findViewById(android.R.id.content)获取到framelayout，图中绿色的那一层。
其实，Flutter的View是一个SurfaceView，也是那个绿色的View的child。
View的层级

注意，在已有App中继承FlutterActivity的时候，要先在super.onCreate()之前调用下面的代码来初始化Flutter。

        FlutterMain.startInitialization(this);

3. Native页面跳Flutter页面

这一部分可以参考官方文档。
创建一个FlutterView，然后利用addContentView添加到当前页面的layout中。

fab.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
    View flutterView = Flutter.createView(
      MainActivity.this,
      getLifecycle(),
      "route1"
    );
    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
    layout.leftMargin = 100;
    layout.topMargin = 200;
    addContentView(flutterView, layout);
  }
});

或者，使用FlutterFragment，在指定的container中启动Flutter页面。

iOS在FlutterViewController中添加一个native的UIButton作为subView：

- (void)viewDidLoad {
  [super viewDidLoad];
  UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  [button addTarget:self
             action:@selector(handleButtonAction)
   forControlEvents:UIControlEventTouchUpInside];
  [button setTitle:@"Press me" forState:UIControlStateNormal];
  [button setBackgroundColor:[UIColor blueColor]];
  button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
  [self.view addSubview:button];
}

- (void)handleButtonAction {
  FlutterViewController* flutterViewController = [[FlutterViewController alloc] init];
  [self presentViewController:flutterViewController animated:false completion:nil];
}

TODO 在Flutter/Native混合App里管理UI栈

后续要做的事是写出一个混合App里管理UI栈的框架。
初步的思考是，在MaterialApp中定义的route可以作为路由，同时通过获取并保存Flutter页面history的方式（参考List<Route<dynamic>> navHistory = navState.history;）维护Flutter页面栈。打开原生页面使用MethodChannel(Plugin)，Android，iOS两端各自维护；
如果需要再次跳转Flutter页面，通过获取GlobalKey中保存的history的方式恢复Flutter页面栈。

---

延伸阅读:
https://zhuanlan.zhihu.com/p/42273996
https://www.aliyun.com/jiaocheng/21966.html
https://www.jianshu.com/p/e9ce78a01a93?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
https://flutter.io/cookbook/navigation/navigation-basics/