flutter學習--頁面跳轉

一般頁面導航和返回

RaisedButton按鈕組件

它有兩個最基本的屬性：

• child：可以放入容器，圖標，文字。讓你構建多彩的按鈕。
• onPressed：點擊事件的相應，一般會調用Navigator組件。

Navigator.push 和 Navigator.pop

• Navigator.push：是跳轉到下一個頁面，它要接受兩個參數一個是上下文context，另一個是要跳轉的函數。

• Navigator.pop：是返回到上一個頁面，使用時傳遞一個context（上下文）參數，使用時要注意的是，你必須是有上級頁面的，也就是說上級頁面使用了Navigator.push。
  demo：

import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(
  title: '導航演示1',
  home: FirstScreen(),
));

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第一個頁面"),
      ),
      body:Center(
        child: RaisedButton(onPressed: (){
          Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondScreen()));
        },
        child: Text("點擊跳轉"),)
      ),
    );
  }
}

class SecondScreen extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(title:Text('技術胖商品詳情頁')),
        body:Center(child:RaisedButton(
            child:RaisedButton(
              child:Text('返回'),
              onPressed: (){
                Navigator.pop(context);
              },
            )
        ))
    );
  }
}

點擊之後跳轉

導航參數的傳遞和接收

頁面跳轉的時候參數的傳遞和接受是常用功能。

聲明數據結構類

Dart中可以使用類來抽象一個數據，比如我們模仿一個商品信息，有商品標題和商品描述。我們定義了一個Product類，裏邊有兩個字符型變量，title和description。

• title:是商品標題。
• description: 商品詳情描述
  代碼如下:

class Product {
  final String title; //商品標題
  final String description;//商品描述
  Product(this.title,this.description);//構造方法
}

構建一個商品列表

作一個商品的列表，這裏我們採用動態的構造方法，在主方法裏傳遞一個商品列表（List）到自定義的Widget中。

先來看看主方法的編寫代碼:

void main() => runApp(
  MaterialApp(
    title: "跳轉傳參",
    home: ProductList(
      products:List.generate(20, (i)=>Product("商品$i","描述$i"))
    ),
  )
);

上面的代碼是主路口文件，主要是在home屬性中，我們使用了ProductList，這個自定義組件，而且時候會報錯，因爲我們缺少這個組件。這個組件我們傳遞了一個products參數，也就是商品的列表數據，這個數據是我們用List.generate生成的。並且這個生成的List原型就是我們剛開始定義的Product這個類（抽象數據）。

ProductList自定義組件的代碼：

class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: ListView.builder(itemBuilder: (context,index){
        return ListTile(title: Text(products[index].title),onTap: (){
        });
      },
      itemCount: products.length,),
    );
  }
}

先接受了主方法傳遞過來的參數，接受後用ListView.builder方法，作了一個根據傳遞參數數據形成的動態列表。

導航參數的傳遞

使用Navigator組件，然後使用路由MaterialPageRoute傳遞參數，具體代碼如下。

Navigator.push(
  context, 
  MaterialPageRoute(
    builder:(context)=>new ProductDetail(product:products[index])
  )
);

這段代碼要寫在onTap相應事件當中

子頁面接受參數並顯示

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key ,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title:Text('${product.title}'),
      ),
      body:Center(child: Text('${product.description}'),)
    );
  }
}

完整代碼

import 'package:flutter/material.dart';

class Product {
  final String title; //商品標題
  final String description;//商品描述
  Product(this.title,this.description);//構造方法
}

void main() => runApp(
  MaterialApp(
    title: "跳轉傳參",
    home: ProductList(
      products:List.generate(20, (i)=>Product("商品$i","描述$i"))
    ),
  )
);

class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: ListView.builder(itemBuilder: (context,index){
        return ListTile(title: Text(products[index].title),onTap: (){
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder:(context)=>new ProductDetail(product:products[index])
              )
          );
        });
      },
      itemCount: products.length,),
    );
  }
}

class ProductDetail extends StatelessWidget {

  final Product product;
  ProductDetail({Key key,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}

點擊跳轉

頁面跳轉並返回數據

異步請求和等待

Dart中的異步請求和等待和ES6中的方法很像，直接使用async…await就可以實現。比如下面作了一個找小姐姐的方法，然後進行跳轉，注意這時候是異步的。等待結果回來之後，我們再顯示出來內容。具體代碼如下：

 _navigateToXiaoJieJie(BuildContext context) async{ //async是啓用異步方法

    final result = await Navigator.push(//等待
      context, 
      MaterialPageRoute(builder: (context)=> XiaoJieJie())
      );
      
      Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

SnackBar的使用

SnackBar是用戶操作後，顯示提示信息的一個控件，類似Tost，會自動隱藏。SnackBar是以Scaffold的showSnackBar方法來進行顯示的。

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

返回數據的方式

 Navigator.pop(context,'xxxx');  //xxx就是返回的參數

Demo:

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

//跳轉的Button
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed:(){
        _navigateToXiaoJieJie(context);
      },
      child: Text('去找小姐姐'),
    );
  }

  _navigateToXiaoJieJie(BuildContext context) async{ //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,'大長腿:1511008888');
                },
              ) ,
              RaisedButton(
                child: Text('小蠻腰小姐姐'),
                onPressed: (){
                  Navigator.pop(context,'大長腿:1511009999');
                },
              ) ,
            ],
          )
      ) ,
    );
  }
}