Flutter based learning jumps and returns the data pages 18-19

Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )

After learning of the front page jumps, returns results page when we return to the previous page (that is, the parent page). This scene is often used, here we go subpages select an option, and then select the results back to the parent page.

Demo function: the example here to make is this, to look for the little sister, after entering the room, find your favorite little sister and little sister gave us micro letter, this time we show a small selection in the Home sister micro letter.

Knowledge points:

An asynchronous request and wait

Dart asynchronous request and wait methods and ES6 the like, directly async ... await can be achieved. For example, the following methods were looking for a little sister, and then jump, pay attention this time is asynchronous. After waiting for the results to come back, we'll show up content. Specific code as follows:

//定义一个跳转到目标界面的“内部”方法，使用异步请求的方式（等数据传递回来之后，再显示传递的数据）
  _navigateToXiaoJieJie(BuildContext context) async{
    final result=await Navigator.push(context, MaterialPageRoute(//等待数据传回来
      builder: (context)=>XiaoJieJie()
    ));
    Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));//显示数据
  }

Two, SnackBar use

SnackBarAfter a user operation, display a prompt control of information, similar Tost, it will be automatically hidden. SnackBarIt is based on Scaffoldthe showSnackBarapproach to be displayed.

Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));

Third, the return to the way data

In fact, the return data is particularly easy, so long as the second argument when you return it.

Navigator.pop(context,'我是一号小姐姐，微信是：jlcdlkcjklc');//第二个参数用于返回数据

Four, Demo code is as follows

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: '页面跳转返回数据',
      home: FristPage(),
    )
  );
}
//首界面
class FristPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(title: Text('找小姐姐要微信'),),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}
//定义一个跳转目标界面的按钮类
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: (){
          _navigateToXiaoJieJie(context);
        },
        child: Text('去找小姐姐'),
    );
  }
  //定义一个跳转到目标界面的“内部”方法，使用异步请求的方式（等数据传递回来之后，再显示传递的数据）
  _navigateToXiaoJieJie(BuildContext context) async{
    final result=await Navigator.push(context, MaterialPageRoute(//等待数据传回来
      builder: (context)=>XiaoJieJie()
    ));
    Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));//显示数据
  }
}

//目标界面
class XiaoJieJie extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('小姐姐界面'),),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text('一号小姐姐'),
              onPressed: (){
                Navigator.pop(context,'我是一号小姐姐，微信是：jlcdlkcjklc');//第二个参数用于返回数据
              },
            ),
             RaisedButton(
              child: Text('二号小姐姐'),
              onPressed: (){
                Navigator.pop(context,'我是二号小姐姐，微信是：jjdkshfjds');
              },
            ),
          ],
        ),
      ),
    );
  }
}

Fifth, the operating results

Flutter based learning jumps and returns the data pages 18-19

Guess you like