flutter混合(iOS)開發第一步使用(Flutter_Boost)完成頁面之間的跳轉傳值(二)

ryan_冉發表於2020-06-19
FlutteriOS

書接上回！！！檢視上回

上回我們說到原生跳轉到Flutter這回我們說返回並且傳值回去

Flutter返回Native並傳值

 appBar: AppBar(
        title: const Text('First Route1'),
        leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
//              返回到原生介面傳值
              Map<String, dynamic> tmp = {
                "name": "flutterName",
                "age": "GooleAge"
              };
              try {
              <!--這裡的 flutterCallBack 是我們在頁面上要類似 key 值的東西 tmp 就不解釋了，上面那個值-->
                FlutterBoost.singleton.channel
                    .sendEvent("flutterCallBack", tmp);
              } catch (e) {
                print(e);
              }
              <!--這裡的 backNative 是我們返回的時候需要監控的地方在 PlatformRouterImp 裡面，因為頁面多了我有時候還要做一些其他操作-->
              FlutterBoost.singleton.close('backNative');
            }),
      ),
複製程式碼

原生裡面我們接受方式

//        獲取Dart傳過來的值
         _ = FlutterBoostPlugin.sharedInstance() .addEventListener({ (name, parmas) in
            DLog("====================\(parmas!["name"] ?? "沒有值")")
            <!--這裡的值就是Dart裡面的那個一定要一樣-->
        }, forName: "flutterCallBack")
複製程式碼

假裝一個分割線-------------------------------------------------------------- 第二種

FlutterA TO FlutterB 跳轉和傳值

這個只需要在Dart中做操作

這裡我們需要再mian裡面再寫一個

'second': (String pageName, Map<String, dynamic> params, String _) =>
    SecondRouteWidget(params),
複製程式碼

我FlutterA頁面寫了一個Button來點選並且傳送引數

RaisedButton(
    child: const Text('Open second route'),
        onPressed: () {
        print('open second page!');
//            開啟flutter頁面
        FlutterBoost.singleton.open('second',urlParams: {"name":"flutterPage1 傳遞過來的值是這樣的"}).then((Map<dynamic, dynamic> value) {
        setState(() {
            secondTwoPageString = value["result"];
                });
            });
        },
    ),
複製程式碼

這裡第二個路由我們第二個頁面接受一個引數，所有需要再第二頁面初始化一個構造器

class SecondRouteWidget extends StatefulWidget {
  final Map<dynamic, dynamic> params;

  SecondRouteWidget(this.params);

  @override
  _SecondRouteWidgetState createState() => _SecondRouteWidgetState();
}

<!--然後接受一下-->
class _SecondRouteWidgetState extends State<SecondRouteWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('secondPage'),
      ),
      body: Center(
        child: Column(
         child: Text(
         <!--看一下傳過來的值-->
              widget.params["name"],
            )
        ),
      ),
    );
  }
}
複製程式碼

這樣Flutter跳轉Flutter就完成了剩下就是跳轉回去，並且傳值 同樣的還是在second頁面寫一個按鈕跳轉回去

class SecondRouteWidget extends StatefulWidget {
  final Map<dynamic, dynamic> params;

  SecondRouteWidget(this.params);

  @override
  _SecondRouteWidgetState createState() => _SecondRouteWidgetState();
}

<!--然後接受一下-->
class _SecondRouteWidgetState extends State<SecondRouteWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('secondPage'),
      ),
      body: Center(
        child: Column(
         child: RaisedButton(
              child: const Text('返回上一個Flutter頁面'),
              onPressed: () {
                // Navigate back to first route when tapped.(返回Flutter頁面)
                final BoostContainerSettings settings =
                    BoostContainer.of(context).settings;
                //            傳值回到上個flutter頁面
                FlutterBoost.singleton.close(
                  settings.uniqueId,
                  result: <String, dynamic>{'result': 'data from second'},
                );
              },
            ),
        ),
      ),
    );
  }
}
複製程式碼

在FlutterA頁面跳轉的那個地方我們其實已經監聽到返回了，並且還有值就是

RaisedButton(
    child: const Text('Open second route'),
        onPressed: () {
        print('open second page!');
//            開啟flutter頁面
        FlutterBoost.singleton.open('second',urlParams: {"name":"flutterPage1 傳遞過來的值是這樣的"}).
        <!--就是這裡，返回值就會返回在這個Value裡面-->
        then((Map<dynamic, dynamic> value) {
        setState(() {
            secondTwoPageString = value["result"];
                });
            });
        },
    ),
複製程式碼

這樣我們就完成第二步Flutter內部的跳轉和傳值下面來第三步Flutter到原生傳值返回傳值Flutter跳轉原生，原生返回傳值我寫在下一篇吧！

各位大佬：小弟正在Flutter學習中，如有什麼不妥的地方還望各位大佬斧正！！！

相關文章