Flutter入门 (二) 页面间跳转

我们先新建一个工程 把main

新建一个test.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  // Default placeholder text
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child: Text("Hello World"))
    );
  }
}

Statelesswidget用于变动比较小的组件 里面就一个build方法 而StatefulWidget里面有一个State
State拥有完整的生命周期

修改下main.dart router 静态路有 类似安卓中用Scheme跳转 他是一个Map对象， Key

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo'),
      routes: <String, WidgetBuilder> {
        '/first_page': (BuildContext context) => FirstPage(),
      },
    );
  }
}

 

class _MyHomePageState extends State<MyHomePage> {
  // Default placeholder text
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child:new CustomButton("first_page","/first_page"), //因为后面可能还要加别的方法 我把它写在了一个通用的方法里
          )
    );
  }
}

class CustomButton extends StatelessWidget {
  final String label;
  String link;

  CustomButton(this.label,this.link);

  @override
  Widget build(BuildContext context) {
    return
      new Container(
        child:RaisedButton(onPressed: () {  //类似android中的Button MateriaButton是没有背景的
          Navigator.of(context).pushNamed(link);  // 根据page名称跳转 也就是上面路有定义的
        }, child: Text(label,style: new TextStyle(height: 1),), //按钮上的文字
        ),
        width: double.infinity,); //宽度占满
  }
}

 

动态路有跳转

我们修改下body里面的内容   Flutter的布局 没android那么强大 ， 类似安卓中的LinearLayout ,横横竖竖的比较普遍

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(
        child:Container(
        child: new Column(
          children: <Widget>[   //在children里才能配置多个 widget
          new CustomButton("first_page","/first_page"),
            new RaisedButton(
              child: Text("动态跳转"),
              onPressed: dynamicJump,
            )
          ],
        ),
            margin: EdgeInsets.only(top: 50, left: 20, right: 20),
        )
        )
    );
  }

void dynamicJump(){
  Navigator.push(context,new MaterialPageRoute(builder: (context) => new FirstPage()));
}

页面参数的话 动态路有 本身就是通过new 新建的 可以自己定义方法

参数回调

参数回调

   void dynamicJump(){
     Future future=   Navigator.push(context,new MaterialPageRoute(builder: (context) => new FirstPage()));
     future.then((value){
       showDialog(
           context: context,
           builder: (context) => AlertDialog(
             title: Text('$value'),
           ));
     });

test.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  // Default placeholder text
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(
          child: new RaisedButton(
              onPressed: () {
                Navigator.of(context).pop("hello");
              },
              child: Text("Hello World"))
          )

    );
  }
}

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo'),
      routes: <String, WidgetBuilder> {
        '/first_page': (BuildContext context) => FirstPage(),
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Default placeholder text
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(
        child:Container(
        child: new Column(
          children: <Widget>[
          new CustomButton("first_page","/first_page"),
            new RaisedButton(
              child: Text("动态跳转"),
              onPressed: dynamicJump,
            )
          ],
        ),
            margin: EdgeInsets.only(top: 50, left: 20, right: 20),
        )
        )
    );
  }
   void dynamicJump(){
     Future future=   Navigator.push(context,new MaterialPageRoute(builder: (context) => new FirstPage()));
     future.then((value){
       showDialog(
           context: context,
           builder: (context) => AlertDialog(
             title: Text('$value'),
           ));
     });
   }
}

class CustomButton extends StatelessWidget {
  final String label;
  String link;

  CustomButton(this.label,this.link);

  @override
  Widget build(BuildContext context) {
    return
      new Container(
        child:RaisedButton(onPressed: () {
          Navigator.of(context).pushNamed(link);
        }, child: Text(label,style: new TextStyle(height: 1),),
        ),
        width: double.infinity,);
  }
}