Flutter 路由练习之跳转到新页面,以及传值,自定义返回按钮

2019/12/29 11:43:1 | 阅933 来源:好空间网络 [打印] [关闭]
 

import 'package:flutter/material.dart';
import 'test.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(
          title: Text("路由练习"),
        ),
        body: MyRoute(),
      ),
    );
  }
}

class MyRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          child: Text("打开新页面"),
          onPressed: (){
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context)=>TestPage()
                )
            );
          },
        )
      ],
    );
  }
}

上面这个是主页,他有个按钮,负责跳转到新页面上

下面这个是新页面,注意新页面需要带上Scaffold() 脚手架

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("测试路由一个新页面"),
      ),
      body: Text("这个是一个新页面内容区域"),
    );
  }
}

效果图:


QQ图片20191226174025.png
22.png


2:传值: 修改上面代码其他不变

 Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context)=>TestPage(id:"20")
                )
            );

在接收的页面赋值即可如

 String id;

  TestPage({this.id='1'});

在构造函数里面赋值即可


3:自定义返回按钮

FlatButton(
            child: Text("返回"),
            onPressed:(){
              //返回上一页
              Navigator.of(context).pop();
            } ,
            )

只需要在页面合适的地方加入个按钮,监听点击事件,字节pop即可

经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。