Flutter：学会在页面间传递参数

目录传送门：《Flutter快速上手指南》先导篇

在 Flutter 中，有一套本身的页面传参机制。

咱们仍然须要经过 Navigator 来实现页面间的传参。

1.如何进行页面传参

Flutter 中页面传参的思路是，为页面 Widget 的构造函数中增长参数，经过构造函数来给页面传参。

class HomePage extends StatelessWidget {
  final PageData data;

  // 带所需参数的构造函数
  const HomePage({Key key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Container(
        color: Colors.white,
        child: Center(
          child: Text(data != null ? data.data : 'There is no data!'),
        ),
      ),
    );
  }
}
复制代码

来看看跳转时如何给他传参数：

var data = PageData('Come form SplashPage!');
// 使用 Navigator 跳转页面
Navigator.push(context, MaterialPageRoute(
        builder: (context) => HomePage(
              data: data,
            )));
复制代码

2.如何接收页面回参

想要页面可以接收回，在跳转的时候，须要在跳转的时候进行处理：

// 须要使用异步的方式跳转，而后等待结果返回
void jumpToHome(BuildContext context) async {
  var data = PageData('Come form SplashPage!');
  // 使用 Navigator 跳转页面
  // 使用 await 等待结果返回
  var result = await Navigator.push( context, MaterialPageRoute(
          builder: (context) => HomePage(
                data: data,
              )));
  if (result != null) {
    // 通知状态变化，更新 ui
    setState(() {
      text = result;
    });
  }
}
复制代码

其实，接收页面回参的方式也很简单，就是须要在一个异步函数中异步跳转，而后经过 await 等待结果返回。

固然，因为 Navigator.push() 返回的是一个 Future，你也能够在 then() 函数中接收返回参数处理。

Navigator.push( context, MaterialPageRoute(
          builder: (context) => HomePage(
                data: data,
              ))).then((result){ //... });
复制代码

在另外一个页面中，返回结果给上一个页面：

Navigator.pop(context, result);
复制代码

就是在 pop 的时候带上要返回的信息就能够了。

3.一个完整的传参、回参例子

建立第一个页面，splash_page.dart:

class SplashPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _SplashPage();
  }
}

class _SplashPage extends State<SplashPage> {
  final splashUrl =
      'https://raw.githubusercontent.com/chenBingX/img/master/其它/u=343452579,826911251&fm=26&gp=0.jpg';

  var text = 'Next';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      alignment: Alignment(0, 0.75),
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              image: DecorationImage(image: NetworkImage(splashUrl))),
        ),
        GestureDetector(
          // 设置点击事件
          onTap: () {
            jumpToHome(context);
          },
          child: Container(
              padding: EdgeInsets.only(left: 12, top: 6, right: 12, bottom: 6),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(6)),
                gradient: LinearGradient(
                  colors: <Color>[Colors.red, Colors.green, Colors.blue],
                ),
              ),
              child: Text(
                text,
                style: TextStyle(color: Colors.white, fontSize: 16),
              )),
        ),
      ],
    );
  }

  void jumpToHome(BuildContext context) async {
    var data = PageData('Come form SplashPage!');
    // 使用 Navigator 跳转页面
    var result = await Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => HomePage(
                  data: data,
                )));
    if (result != null) {
      setState(() {
        text = result;
      });
    }
  }
}
复制代码

建立第二个页面，home_page.dart :

class HomePage extends StatelessWidget {
  final PageData data;

  // 带所需参数的构造函数
  const HomePage({Key key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: GestureDetector(
          onTap: () {
            Navigator.pop(context, 'HomePage popped!');
          },
          child: Container(
            color: Colors.white,
            child: Center(
              child: Text(data != null ? data.data : 'There is no data!'),
            ),
          ),
        ));
  }
}
复制代码

运行起来，main.dart ：

void main() => runApp(MaterialApp(
      title: 'Flutter',
      home: SplashPage(),
    ));
复制代码

运行效果：

目录传送门：《Flutter快速上手指南》先导篇

如何找到我？

传送门：CoorChice 的主页

传送门：CoorChice 的 Github