Flutter入門09 -- 事件監(jiān)聽與路由跳轉(zhuǎn)

在大前端的開發(fā)中，必然存在各種各樣與用戶交互的情況，比如手指點(diǎn)擊，滑動(dòng)，長(zhǎng)按等等；
在Flutter中，手勢(shì)有兩個(gè)不同的層次：
- 第一層：原始指針事件，描述了屏幕上由觸摸板，鼠標(biāo)，指示筆等觸發(fā)的指針的位置和移動(dòng)；
- 第二層：手勢(shì)識(shí)別，這個(gè)是在原始事件上的一種封裝；

指針事件Pointer

Pointer表示人機(jī)界面的原始數(shù)據(jù)，一共有四種指針事件：
- PointerDownEvent：指針在特定位置與屏幕接觸；
- PointerMoveEnent：指針從屏幕的一個(gè)位置移動(dòng)到另一個(gè)位置；
- PointerUpEvent：指針與屏幕停止接觸；
- PointerCancelEvent：指針因?yàn)槟承┨厥獾那闆r被取消；
Pointer事件的原理：在指針落下時(shí)，框架做了一個(gè)Hit Test操作，確定與屏幕發(fā)生接觸的位置上有哪些widget以及分發(fā)給最內(nèi)部的組件去響應(yīng)；事件會(huì)沿著最內(nèi)部的組件向組件樹的根冒泡分發(fā)；不能取消或者停止事件的進(jìn)一步分發(fā)；
基本上與iOS的事件傳遞與響應(yīng)機(jī)制的原理一致；
案例代碼：

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Center(
        child: Listener(
          onPointerDown: (event) {
            print("手指按下: $event");
            print(event.position);
            print(event.localPosition);
          },
          onPointerMove: (event) {
            print("手指移動(dòng): $event");
          },
          onPointerUp: (event) {
            print("手指抬起: $event");
          },
          onPointerCancel: (event) {
            print("取消 $event");
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      )
    );
  }
}

給目標(biāo)組件Container包裝一個(gè)事件監(jiān)聽Listener，內(nèi)部實(shí)現(xiàn)各種不同事件的回調(diào)方法；
event.position：是以屏幕左上角為原點(diǎn)；
event.localPosition：是以目標(biāo)組件Container的左上角為原點(diǎn)；

手勢(shì)識(shí)別

手勢(shì)是對(duì)一系列Pointer的封裝，官方建議在開發(fā)中盡可能使用手勢(shì)，而不是Pointer；

手勢(shì)的分類：

點(diǎn)擊
- OnTapDown：手指按下
- OnTapUp：手指抬起
- OnTap：點(diǎn)擊事件完成
- OnTapCancel：事件取消
雙擊
- OnDoubleTap：快速點(diǎn)擊了兩次
長(zhǎng)按
- OnLongPress：在屏幕上保持了一段時(shí)間
縱向拖拽
- OnVerticalDragStart：指針與屏幕產(chǎn)生接觸并可能開始縱向移動(dòng)；
- OnVerticalDragUpdate：指針與屏幕產(chǎn)生接觸，在縱向上發(fā)生移動(dòng)并保持移動(dòng)；
- OnVerticalDragEnd：指針與屏幕產(chǎn)生接觸結(jié)束；
橫向拖拽
- OnHorizontalDragStart：指針與屏幕產(chǎn)生接觸并可能開始橫向移動(dòng)；
- OnHorizontalDragUpdate：指針與屏幕產(chǎn)生接觸，在橫向上發(fā)生移動(dòng)并保持移動(dòng)；
- OnHorizontalDragEnd：指針與屏幕產(chǎn)生接觸結(jié)束；
移動(dòng)
- OnPathStart：指針與屏幕產(chǎn)生接觸并可能開始橫向移動(dòng)或者縱向移動(dòng)，如果設(shè)置了onHorizontalDragStart或者onVerticalDragStart，該回調(diào)會(huì)引發(fā)崩潰；
- OnPathUpdate：指針與屏幕產(chǎn)生接觸，在橫向或者縱向上發(fā)生移動(dòng)并保持移動(dòng)，如果設(shè)置了OnHorizontalDragUpdate或者OnVerticalDragUpdate，該回調(diào)會(huì)引發(fā)崩潰；
- OnPathEnd：指針與屏幕產(chǎn)生了接觸，并以特定的速度移動(dòng)，此后不再在屏幕上接觸發(fā)生移動(dòng)，如果設(shè)置了OnHorizontalDragEnd或者OnVerticalDragEnd，該回調(diào)會(huì)引發(fā)崩潰；
案例演練：

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("商品列表"),
        ),
        body: Center(
          child: GestureDetector(
            onTapDown: (details) {
              print("手指按下");
              print(details.globalPosition);
              print(details.localPosition);
            },
            onTapUp: (details) {
              print("手指抬起");
            },
            onTapCancel: () {
              print("手勢(shì)取消");
            },
            onTap: () {
              print("點(diǎn)擊");
            },

            onDoubleTap: () {
              print("雙擊");
            },

            onLongPress: () {
              print("長(zhǎng)按");
            },

            child: Container(
              width: 200,
              height: 200,
              color: Colors.greenAccent,
            ),
          ),
        )
    );
  }
}

給目標(biāo)組件Container，包裝一個(gè)GestureDetector手勢(shì)管理器，實(shí)現(xiàn)各種手勢(shì)的監(jiān)聽回調(diào)函數(shù)；

案例演練：組件重疊顯示時(shí)的手勢(shì)識(shí)別

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Center(
        child: GestureDetector(
          onTapDown: (details) {
            print("outside click");
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
            alignment: Alignment.center,
            child: GestureDetector(
              onTapDown: (details) {
                print("inside click");
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
          ),
        ),
      )
    );
  }
}

運(yùn)行效果如下所示：

image.png

兩個(gè)組件都加了手勢(shì)監(jiān)聽，當(dāng)點(diǎn)擊綠色組件的時(shí)候，紅色組件偶爾也會(huì)出現(xiàn)監(jiān)聽回調(diào)，為了解決這個(gè)問題，改變組件的布局層級(jí)，利用Stack組件，代碼如下：

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            GestureDetector(
              onTapDown: (details) {
                print("red click");
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
                alignment: Alignment.center,
              )
            ),

            GestureDetector(
              onTapDown: (details) {
                print("greenAccent click");
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            )
          ],
        )
      )
    );
  }
}

當(dāng)點(diǎn)擊綠色組件的時(shí)候，只有綠色組件響應(yīng)手勢(shì)，紅色組件不會(huì)響應(yīng)；
現(xiàn)在想要實(shí)現(xiàn)：當(dāng)點(diǎn)擊綠色組件時(shí)，只有紅色組件響應(yīng)手勢(shì)事件，即實(shí)現(xiàn)了事件的穿透效果，代碼如下：

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            GestureDetector(
              onTapDown: (details) {
                print("red click");
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
                alignment: Alignment.center,
              )
            ),

            IgnorePointer(
              child: GestureDetector(
                onTapDown: (details) {
                  print("greenAccent click");
                },
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
            )
          ],
        )
      )
    );
  }
}

給綠色組件最外層包裹了一個(gè)IgnorePointer，實(shí)現(xiàn)了手勢(shì)事件的忽略；

跨組件事件的傳遞

使用第三方庫(kù)event_bus實(shí)現(xiàn)跨組件事件的傳遞；
工程中引用event_bus：

dependencies:
  event_bus: ^1.1.1

使用步驟：
- 1.創(chuàng)建全局的EventBus對(duì)象；
- 2.發(fā)出事件；
- 1. 監(jiān)聽事件的類型；
案例代碼如下：

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

//1.創(chuàng)建全局的EventBus對(duì)象
final EventBus eventBus = EventBus();

class SFUserInfo {
  String name;
  int level;

  SFUserInfo(this.name,this.level);
}

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SFButton(),
            SFText(),
          ],
        ),
      )
    );
  }
}

class SFButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("按鈕"),
      onPressed: () {
        print("點(diǎn)擊按鈕");
        //2.發(fā)出事件
        final userInfo = SFUserInfo("liyanyan",100);
        eventBus.fire(userInfo);
      },
    );
  }
}

class SFText extends StatefulWidget {
  @override
  _SFTextState createState() => _SFTextState();
}

class _SFTextState extends State<SFText> {

  String _message = "Hello World";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //3.監(jiān)聽事件的類型
    eventBus.on<SFUserInfo>().listen((data) {
      print(data.name);
      print(data.level);
      _message = "${data.name} -- ${data.level}";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text("Hello World!!!",style: TextStyle(fontSize: 25));
  }
}

路由管理

路由的概念由來已久，包括網(wǎng)絡(luò)路由，后端路由，到現(xiàn)在廣為流行的前端路由；
無論路由的概念如何應(yīng)用，它的核心是一個(gè)路由映射表，例如名字detail映射到DetailPage頁(yè)面；
有了映射表之后，我們就可以方便的根據(jù)名字來完成路由的轉(zhuǎn)發(fā)，即頁(yè)面跳轉(zhuǎn)；
在Flutter中，路由管理主要有兩個(gè)類Route與Navigator

Route

Route：一個(gè)頁(yè)面要想被路由統(tǒng)一管理，必須包裝為一個(gè)Route，Route是一個(gè)抽象類，所以只能實(shí)例化其子類；
MaterialPageRoute是使用最廣泛的路由，其在不同的平臺(tái)會(huì)有不同的表現(xiàn)：
- 在Android平臺(tái)，打開一個(gè)頁(yè)面從屏幕底部滑到屏幕頂部；
- 在iOS平臺(tái)，打開一個(gè)頁(yè)面從屏幕右側(cè)滑到屏幕左側(cè)；
- 在iOS平臺(tái)還可以使用CupertinoPageRoute

Navigator

Navigator：管理所有的Route的widget，通過一個(gè)棧進(jìn)行管理的；
在開發(fā)中我們不需要手動(dòng)去創(chuàng)建一個(gè)Navigator，因?yàn)樵陂_發(fā)中使用的MaterialApp，CupertinoApp，WidgetsApp它們默認(rèn)是有插入Navigator的，所以，我們?cè)谛枰臅r(shí)候，只需要直接使用即可；

路由的基本使用

需求：首頁(yè)與詳情頁(yè)兩個(gè)頁(yè)面，當(dāng)首頁(yè)->詳情頁(yè) 攜帶數(shù)據(jù)過去，當(dāng)詳情頁(yè) -> 首頁(yè) 傳遞數(shù)據(jù)給首頁(yè)，代碼如下：
首頁(yè)代碼：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/SFDetail.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatefulWidget {
  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {

  String homeMessage = "default message";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首頁(yè)"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(homeMessage,style: TextStyle(fontSize: 20)),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail(context);
              },
            )
          ],
        )
      )
    );
  }

  void goToDetail(BuildContext ctx) {
    Future result = Navigator.of(ctx).push(MaterialPageRoute(
      builder: (ctx) {
        return SFDetail("liyanyan");
      }
    ));

    result.then((value) {
      print(value);
      setState(() {
        homeMessage = value;
      });
    });
  }
}

詳情頁(yè)代碼：

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

class SFDetail extends StatelessWidget {
  final String message;

  SFDetail(this.message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("詳情頁(yè)"),
        leading: IconButton(
          icon: Icon(Icons.backspace),
          onPressed: () => backHomePage(context),
        ),
      ),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(message,style: TextStyle(fontSize: 20)),
              RaisedButton(
                child: Text("返回首頁(yè)"),
                onPressed: () => backHomePage(context),
              )
            ],
          )
      ),
    );
  }

  void backHomePage(BuildContext ctx) {
    Navigator.of(ctx).pop("xie shen fang");
  }
}

首頁(yè) -> 詳情頁(yè) 創(chuàng)建MaterialPageRoute路由

void goToDetail(BuildContext ctx) {
    Future result = Navigator.of(ctx).push(MaterialPageRoute(
      builder: (ctx) {
        return SFDetail("liyanyan");
      }
    ));

    result.then((value) {
      print(value);
      setState(() {
        homeMessage = value;
      });
    });
  }

詳情頁(yè) -> 首頁(yè)

void backHomePage(BuildContext ctx) {
    Navigator.of(ctx).pop("xie shen fang");
  }

在詳情頁(yè) 去除了系統(tǒng)提供的返回按鈕，使用自己的按鈕；
在詳情頁(yè)，使用系統(tǒng)的提供返回的按鈕，但是我們要重寫點(diǎn)擊事件的邏輯，可以使用WillPopScope，如下所示：

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

class SFDetail extends StatelessWidget {
  final String message;

  SFDetail(this.message);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        //當(dāng)返回為true時(shí)，可以自動(dòng)返回；
        //當(dāng)返回為false時(shí)，不能自動(dòng)返回首頁(yè)，需要我們手寫代碼進(jìn)行返回；
        backHomePage(context);
        return Future.value(false);
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text("詳情頁(yè)"),
        ),
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(message,style: TextStyle(fontSize: 20)),
                RaisedButton(
                  child: Text("返回首頁(yè)"),
                  onPressed: () => backHomePage(context),
                )
              ],
            )
        ),
      ),
    );
  }

  void backHomePage(BuildContext ctx) {
    Navigator.of(ctx).pop("xie shen fang");
  }
}

onWillPop參數(shù)，傳入函數(shù)，其函數(shù)的返回值為Future.value(bool)
當(dāng)bool = true時(shí)，可以自動(dòng)返回；
當(dāng)bool = false時(shí)，不能自動(dòng)返回首頁(yè)，需要我們手寫代碼進(jìn)行返回；
上述采用的簡(jiǎn)單的路由跳轉(zhuǎn)，下面介紹路由表映射的跳轉(zhuǎn)，再新建一個(gè)SFAbout頁(yè)面：

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

class SFAbout extends StatelessWidget {

  static const String routeName = "SFAbout";

  @override
  Widget build(BuildContext context) {

    final message = ModalRoute.of(context).settings.arguments as String;
    
    return Scaffold(
      appBar: AppBar(
        title: Text("關(guān)于頁(yè)面"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(message),
            RaisedButton(
              child: Text("返回首頁(yè)"),
              onPressed: () {

              },
            )
          ],
        ),
      ),
    );
  }
}

首頁(yè)代碼改造如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/SFAbout.dart';
import 'package:learn_flutter_01/day02/SFDetail.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        SFHomePage.routeName : (ctx) => SFHomePage(),
        SFAbout.routeName : (ctx) => SFAbout()
      },
      initialRoute: SFHomePage.routeName
    );
  }
}

class SFHomePage extends StatefulWidget {

  static const String routeName = "/";

  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {

  String homeMessage = "default message";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首頁(yè)"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(homeMessage,style: TextStyle(fontSize: 20)),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到關(guān)于頁(yè)面"),
              onPressed: () {
                goToAbout(context);
              },
            )
          ],
        )
      )
    );
  }

  void goToDetail(BuildContext ctx) {
    Future result = Navigator.of(ctx).push(MaterialPageRoute(
      builder: (ctx) {
        return SFDetail("liyanyan");
      }
    ));

    result.then((value) {
      print(value);
      setState(() {
        homeMessage = value;
      });
    });
  }

  void goToAbout(BuildContext ctx) {
    Future result = Navigator.of(context).pushNamed(SFAbout.routeName,arguments: "liyanyan");

    result.then((value) {
      print(value);
    });
  }
}

在MaterialApp組件中，傳入routes與initialRoute兩個(gè)參數(shù)，其中routes表示路由表，initialRoute表示App的首頁(yè)路由為SFHomePage()；
在首頁(yè) 跳轉(zhuǎn) SFAbout頁(yè)面時(shí)，執(zhí)行：Navigator.of(context).pushNamed(SFAbout.routeName,arguments: "liyanyan") 其中arguments為攜帶的數(shù)據(jù)；
在SFAbout頁(yè)面接收到首頁(yè)的數(shù)據(jù)：final message = ModalRoute.of(context).settings.arguments as String
SFDetail頁(yè)面的構(gòu)造函數(shù)，定義了一個(gè)入?yún)ⅲ敲丛?code>MaterialApp的routes，寫路由映射時(shí)，不能傳參的，這時(shí)就引入了onGenerateRoute，再次生成一個(gè)新的路由，可傳參的，實(shí)現(xiàn)如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/SFAbout.dart';
import 'package:learn_flutter_01/day02/SFDetail.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        SFHomePage.routeName : (ctx) => SFHomePage(),
        SFAbout.routeName : (ctx) => SFAbout()
      },
      initialRoute: SFHomePage.routeName,
      onGenerateRoute: (setttings) {
        if (setttings.name == SFDetail.routeName) {
          return MaterialPageRoute(
              builder: (ctx) {
                return SFDetail(setttings.arguments);
              }
          );
        }
        return null;
      }
    );
  }
}

class SFHomePage extends StatefulWidget {

  static const String routeName = "/";

  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {

  String homeMessage = "default message";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首頁(yè)"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(homeMessage,style: TextStyle(fontSize: 20)),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到關(guān)于頁(yè)面"),
              onPressed: () {
                goToAbout(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail2(context);
              },
            )
          ],
        )
      )
    );
  }

  void goToDetail(BuildContext ctx) {
    Future result = Navigator.of(ctx).push(MaterialPageRoute(
      builder: (ctx) {
        return SFDetail("liyanyan");
      }
    ));

    result.then((value) {
      print(value);
      setState(() {
        homeMessage = value;
      });
    });
  }

  void goToAbout(BuildContext ctx) {
    Future result = Navigator.of(context).pushNamed(SFAbout.routeName,arguments: "liyanyan");

    result.then((value) {
      print(value);
    });
  }

  void goToDetail2(BuildContext ctx) {
    Navigator.of(context).pushNamed(SFDetail.routeName,arguments: "123");
  }
}

如果跳轉(zhuǎn)的頁(yè)面在路由映射表中沒有注冊(cè)，就會(huì)跳轉(zhuǎn)報(bào)錯(cuò)，一般我們定義一個(gè)錯(cuò)誤頁(yè)面SFUnKnownPage，代碼如下：

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

class SFUnKnownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("錯(cuò)誤頁(yè)面"),
      ),
      body: Center(
        child: Text("錯(cuò)誤頁(yè)面"),
      ),
    );
  }
}

然后在MaterialApp中，新增參數(shù)onUnknownRoute，傳入錯(cuò)誤頁(yè)面的路由，如下所示：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/SFAbout.dart';
import 'package:learn_flutter_01/day02/SFDetail.dart';
import 'package:learn_flutter_01/day02/SFUnknownPage.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        SFHomePage.routeName : (ctx) => SFHomePage(),
        SFAbout.routeName : (ctx) => SFAbout()
      },
      initialRoute: SFHomePage.routeName,
      onGenerateRoute: (setttings) {
        if (setttings.name == SFDetail.routeName) {
          return MaterialPageRoute(
              builder: (ctx) {
                return SFDetail(setttings.arguments);
              }
          );
        }
        return null;
      },
      onUnknownRoute: (settings) {
        return MaterialPageRoute(
          builder: (ctx) {
            return SFUnKnownPage();
          }
        );
      },
    );
  }
}

class SFHomePage extends StatefulWidget {

  static const String routeName = "/";

  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {

  String homeMessage = "default message";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首頁(yè)"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(homeMessage,style: TextStyle(fontSize: 20)),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到關(guān)于頁(yè)面"),
              onPressed: () {
                goToAbout(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail2(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到設(shè)置頁(yè)面"),
              onPressed: () {
                goToAbou2(context);
              },
            )
          ],
        )
      )
    );
  }

  void goToDetail(BuildContext ctx) {
    Future result = Navigator.of(ctx).push(MaterialPageRoute(
      builder: (ctx) {
        return SFDetail("liyanyan");
      }
    ));

    result.then((value) {
      print(value);
      setState(() {
        homeMessage = value;
      });
    });
  }

  void goToAbout(BuildContext ctx) {
    Future result = Navigator.of(context).pushNamed(SFAbout.routeName,arguments: "liyanyan");

    result.then((value) {
      print(value);
    });
  }

  void goToDetail2(BuildContext ctx) {
    Navigator.of(context).pushNamed(SFDetail.routeName,arguments: "123");
  }

  void goToAbou2(BuildContext ctx) {
    ///setting為定義的頁(yè)面 跳轉(zhuǎn)頁(yè)面會(huì)直接報(bào)錯(cuò)
    Navigator.of(context).pushNamed("/settings");
  }
}

setting為定義的頁(yè)面跳轉(zhuǎn)頁(yè)面會(huì)直接報(bào)錯(cuò)；
代碼封裝，將有關(guān)的路由封裝到一個(gè)專門處理路由的類SFRouter，如下所示：


import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/SFAbout.dart';
import 'package:learn_flutter_01/day02/SFDetail.dart';
import 'package:learn_flutter_01/main.dart';
import '../SFUnknownPage.dart';

class SFRouter {

  static final Map<String,WidgetBuilder> routers = {
    SFHomePage.routeName : (ctx) => SFHomePage(),
    SFAbout.routeName : (ctx) => SFAbout(),
  };

  static final String initialRoute = SFHomePage.routeName;

  static final RouteFactory generateRoute = (settings) {
    if (settings.name == SFDetail.routeName) {
      return MaterialPageRoute(
        builder: (ctx) {
          return SFDetail(settings.arguments);
        }
      );
    }
    return null;
  };

  static final RouteFactory unknownRoute = (settings) {
    return MaterialPageRoute(
        builder: (ctx) {
          return SFUnKnownPage();
        }
    );
  };
}

首頁(yè)調(diào)用路由就變得十分簡(jiǎn)潔了，如下所示：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/SFAbout.dart';
import 'package:learn_flutter_01/day02/SFDetail.dart';
import 'package:learn_flutter_01/day02/SFUnknownPage.dart';
import 'package:learn_flutter_01/day02/router/SFRouter.dart';

main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: SFRouter.routers,
      initialRoute: SFRouter.initialRoute,
      onGenerateRoute: SFRouter.generateRoute,
      onUnknownRoute: SFRouter.unknownRoute,
    );
  }
}

class SFHomePage extends StatefulWidget {

  static const String routeName = "/";

  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {

  String homeMessage = "default message";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首頁(yè)"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(homeMessage,style: TextStyle(fontSize: 20)),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到關(guān)于頁(yè)面"),
              onPressed: () {
                goToAbout(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到詳情頁(yè)面"),
              onPressed: () {
                goToDetail2(context);
              },
            ),
            RaisedButton(
              child: Text("跳轉(zhuǎn)到設(shè)置頁(yè)面"),
              onPressed: () {
                goToAbou2(context);
              },
            )
          ],
        )
      )
    );
  }

  void goToDetail(BuildContext ctx) {
    Future result = Navigator.of(ctx).push(MaterialPageRoute(
      builder: (ctx) {
        return SFDetail("liyanyan");
      }
    ));

    result.then((value) {
      print(value);
      setState(() {
        homeMessage = value;
      });
    });
  }

  void goToAbout(BuildContext ctx) {
    Future result = Navigator.of(context).pushNamed(SFAbout.routeName,arguments: "liyanyan");

    result.then((value) {
      print(value);
    });
  }

  void goToDetail2(BuildContext ctx) {
    Navigator.of(context).pushNamed(SFDetail.routeName,arguments: "123");
  }

  void goToAbou2(BuildContext ctx) {
    ///setting為定義的頁(yè)面 跳轉(zhuǎn)頁(yè)面會(huì)直接報(bào)錯(cuò)
    Navigator.of(context).pushNamed("/settings");
  }
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,825評(píng)論 6贊 546
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 99,814評(píng)論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,980評(píng)論 0贊 384
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)。經(jīng)常有香客問我，道長(zhǎng)，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 64,064評(píng)論 1贊 319
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 72,779評(píng)論 6贊 414
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 56,109評(píng)論 1贊 330
城市分裂傳說
那天，我揣著相機(jī)與錄音，去河邊找鬼。笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 44,099評(píng)論 3贊 450
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 43,287評(píng)論 0贊 291
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 49,799評(píng)論 1贊 338
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 41,515評(píng)論 3贊 361
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 43,750評(píng)論 1贊 375
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,221評(píng)論 5贊 365
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 44,933評(píng)論 3贊 351
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,327評(píng)論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,667評(píng)論 1贊 296
情欲美人皮
我被黑心中介騙來泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個(gè)月前我還...
沈念sama閱讀 52,492評(píng)論 3贊 400
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 48,703評(píng)論 2贊 380

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Flutter入門09 -- 事件監(jiān)聽與路由跳轉(zhuǎn)

Flutter入門09 -- 事件監(jiān)聽與路由跳轉(zhuǎn)

指針事件Pointer

手勢(shì)識(shí)別

手勢(shì)的分類：

案例演練：組件重疊顯示時(shí)的手勢(shì)識(shí)別

跨組件事件的傳遞

路由管理

Route

Navigator

路由的基本使用

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Flutter入門09 -- 事件監(jiān)聽與路由跳轉(zhuǎn)

指針事件Pointer

手勢(shì)識(shí)別

手勢(shì)的分類：

案例演練：組件重疊顯示時(shí)的手勢(shì)識(shí)別

跨組件事件的傳遞

路由管理

Route

Navigator

路由的基本使用

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频