這篇文章介紹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。也就是先發(fā)一個「信號」給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頁面
這一部分可以參考官方文檔诀豁。
創(chuàng)建一個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棧
后續(xù)要做的事是寫出一個混合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
http://www.reibang.com/p/e9ce78a01a93?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
https://flutter.io/cookbook/navigation/navigation-basics/
