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