Flutter页面转跳返回数据

和安卓原生一样,Flutter 也可以返回数据到上一个页面。安卓原生是通过不同的活动启动方式来实现数据的返回,需要借助回调函数,Flutter 是通过同步异步的方式实现的。

返回数据的方法是通过异步方法(async)打开页面,然后同步(await)等待返回结果。

_navigaterToSecondPage(BuildContext context) async{
    //等待第二个页面返回结果
    final result = await Navigator.push(
      context,
      new MaterialPageRoute(builder: (context) => new SecondPage()),
    );
    //底部显示返回信息
    Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("$result")));
}

返回数据。

Navigator.pop(context,'data2');

下面将实现一个例子,在首页定义一个按钮进入第二个页面,在第二个页面有两个按钮供用户选择,不同按钮返回不同值,并在第一个页面通过 snackbar 显示返回数据。

1 .定义主页。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(
       title: Text('导航返回数据demo'),
     ),
      body: Center(
        child: FirstPage(),
      ),
    );
  }
}

2 .添加一个按钮,打开第二个页面,等待返回值。

class FirstPage extends StatelessWidget {

  _navigaterToSecondPage(BuildContext context) async{
    //等待第二个页面返回结果
    final result = await Navigator.push(
      context,
      new MaterialPageRoute(builder: (context) => new SecondPage()),
    );
    //底部显示返回信息
    Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("$result")));
  }

  @override
  Widget build(BuildContext context) {
    return new RaisedButton(
      onPressed: () {
        _navigaterToSecondPage(context);
      },
      child: Text('进入第二页'),
    );
  }
}

3 .第二个页面显示两个按钮,对应返回不同值。

class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Padding(
              padding: EdgeInsets.all(20.0),
              child: RaisedButton(
                onPressed: () {
                  Navigator.pop(context,'data1');
                },
                child: Text('返回数据1'),
              ),
            ),
            new Padding(
              padding: EdgeInsets.all(20.0),
              child: RaisedButton(
                onPressed: () {
                  Navigator.pop(context,'data2');
                },
                child: Text('返回数据2'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

效果如下:
在这里插入图片描述在这里插入图片描述

发布了38 篇原创文章 · 获赞 18 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43851639/article/details/100073610
今日推荐