这篇文章介绍Flutter页面的入栈出栈方式、Flutter页面和Native页面互相跳转的方法，以及混合页面栈的管理方案思考。
1. Flutter页面之间的跳转
在不同的页面之间跳转，在Android里对应的是Activity(Fragment)跳转，iOS里对应的是ViewController的跳转，在Flutter里，每个页面都是Widget，跳转的过程就是Widget的入栈和出栈过程。跳转用到的类是Navigator。
例子：
- 在一个页面(比如
StatelessWidget)中跳转到SecondScreen：
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
push的第二个参数是Route，可以自己实现，也可以直接用已经帮你实现了两个平台的跳转动画的MaterialPageRoute。
- 从
SecondScreen中回到原来的页面，用Navigator.pop出栈：
// Within the SecondScreen Widget
onPressed: () {
Navigator.pop(context);
}
观察pop的方法签名，第二个参数可以携带参数返回上一个页面。
Navigator.pop(context,"携带参数");
前一个页面通过push方法的返回值来接收参数，返回值是一个Future<T>。类似Android的startActivityForResult。
Navigator的其他push/pop方法：
- pop 普通的退栈
- popAndPushNamed 退栈然后入栈一个指定name的页面
- popUntil 重复调用pop直到predicate返回true
- push 普通的叠加栈
- pushAndRemoveUntil 跳转，然后清栈(相当于Android的)
- 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的页面。
a. 跳转到一个新的页面
- 在
MethodCallHandler回调函数中打开新的NativeActivity，这样的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。
注意，在已有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/
