Flutter 如何创建Flutter路由与导航(1.4)

路由

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.通过声明路由名来根据路游名字跳转

 Navigator.pushNamed(context, "flutter_demo6");//跳转到flutter_demo6

导航

直接通过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)

原创不易,您的点赞是我最大的动力,留下您的点赞吧~谢谢啦