美文网首页
Flutter 页面跳转并返回数据

Flutter 页面跳转并返回数据

作者: 前端新阳 | 来源:发表于2020-05-26 01:06 被阅读0次

【重点】:异步请求与返回数据

  • main.dart代码:
import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title: '页面跳转返回数据',
    home: FirstPage()
  ));
}

class FirstPage 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, '大长腿小姐姐:13522202020');
              },
            ),
            RaisedButton(
              child: Text('小蛮腰小姐姐'),
              onPressed: (){
                Navigator.pop(context, '小蛮腰小姐姐:13588889999');
              },
            ),
          ],
        ),
      ),
    );
  }
}

【效果】如下:


首页
选中其中一个选项
接收到数据的首页,弹框2秒钟消失

相关文章

网友评论

      本文标题:Flutter 页面跳转并返回数据

      本文链接:https://www.haomeiwen.com/subject/pmmpahtx.html