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,);
  }
}