Flutter 如何建立Flutter路由與導航(1.4)

今天給大家帶來的是Flutter的2種跳轉頁面方式

• 路由
• 導航
• 傳回上一個頁面
• 頁面的銷毀
• SwitchListTile

路由

1.聲明路由

需要在MaterialApp().中有一個routes()路由屬性在此屬性中聲明路由

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("AppBar"),
        ),
        body: MainHomePage(),
      ),
      routes: <String, WidgetBuilder>{//聲明路由
        "flutter_demo1": (BuildContext content) => Flutter_Demo1(),
        "flutter_demo2": (BuildContext content) => Flutter_Demo2(),
        "flutter_demo3": (BuildContext content) => Flutter_Demo3(),
        "flutter_demo4": (BuildContext content) => Flutter_Demo4(),
        "flutter_demo5": (BuildContext content) => Flutter_Demo5(),
        "flutter_demo6": (BuildContext content) {//也可以這種寫法
           return Flutter_Demo6();
        },
      },
    );
           

2.通過聲明路由名來根據路遊名字跳轉

導航

直接通過MaterialPageRoute()來跳轉到Flutter_Demo4()

Navigator.push(
 context, 
 MaterialPageRoute(
 		builder: (context) => Flutter_Demo4()
 		)
 );
           

傳回上一個頁面

GestureDetector(//手勢響應(下一章介紹)
            onTap: (){
              Navigator.pop(context);//傳回上衣頁面
            },
            child: Icon(Icons.arrow_back),

          ),
           

頁面的銷毀

常用與啟動頁面或登入頁面

将route == null即可完成頁面的銷毀

Navigator.pushAndRemoveUntil(context,
           new MaterialPageRoute(builder: (BuildContext context) {
           			//跳轉到的頁面
                   return MainPage();
            }), (route) => route == null
 );
           

SwitchListTile

滑動元件

SwitchListTile參數	類型	說明
title	Widget	主标題
value	bool	是否選中
subtitle	Widget	副标題
dense	bool	是否垂直密集居中 預設false
activeColor	Color	選中時滑動小球
activeTrackColor	Color	選中時滑道顔色
inactiveThumbColor	Color	未選中時滑動小球顔色
inactiveTrackColor	Color	未選中時滑道顔色
secondary	Widget	左邊子Widget(一般放圖檔)
selected	bool	是否跟随activeColor顔色變化
onChanged	ValueChanged<bool>	響應事件

SwitchListTile(
            title: Text('${isByName?'':'不'}是否開啟路由'),
            value: isByName,//是否選中
            subtitle: Text("副标題"),//副标題
            dense: true,//是否垂直密集居中 預設false
          activeColor: Colors.black,//選中時滑動小球顔色
          activeTrackColor: Colors.yellow,//選中時滑道顔色
          inactiveThumbColor: Colors.red,//未選中時滑動小球顔色
          inactiveTrackColor: Colors.deepPurple,//未選中時滑道顔色

          secondary: Icon(Icons.android),//左邊圖檔
          selected: true,//副标題 左邊圖檔跟随activeColor顔色變化
            onChanged: (value) {//響應事件
              setState(() {
                print(("SZJsetState"));
                isByName = value;
              });
            },
          )
           

效果圖:

完整代碼

上一章:Flutter 如何進行Flutter布局開發(1.3)

下一章: Flutter 如何進行Flutter點選事件響應和手勢監聽(1.5)

原創不易,您的點贊是我最大的動力,留下您的點贊吧~謝謝啦