Flutter：页面实现与跳转摘要

一、页面实现(类似Activity)：

1.继承StatelessWidget方式(无状态)：

class 界面类名 extends StatelessWidget  {
  const 界面类名({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return 布局类或容器类Widget(
      ...  //省略具体页面布局
    );
  }
}

2.继承StatefulWidget方式(有状态)：

class 界面类名 extends StatefulWidget {
  const 界面类名({Key? key}) : super(key: key);
  @override
  自定义State类 createState() => 自定义State类();
}
//自定义State类
class 自定义State类 extends State<CounterWidget> {
  @override
  Widget build(BuildContext context) {
    return 布局类或容器类Widget(
      ... //省略具体页面布局
    );
  }
}

二、页面跳转：

1.普通方式打开/退出页面：

(1)打开页面：

Navigator.push(
    context, 
    //MaterialPageRoute配置要打开的页面、过渡动画等
    MaterialPageRoute(
        builder: (context) {
            return X页Widget();   //要打开的X页Widget
        },
        settings: ...,            //路由界面的配置信息，如路由界面名称
        maintainState: true,      //true是一直保存内存中,false是路由无用时释放资源
        fullscreenDialog: false   //新路由页面是否为全屏的模态对话框
    ),
);

(2)退出页面：

Navigator.pop(context);            //没有返回值
Navigator.pop(context, "返回值");  //有返回值

2.命名路由方式打开/退出页面：

(1)注册页面路由：

MaterialApp(
  ...,  //省略其他
  initialRoute:"/",        //"/"的路由作为APP的首页
  ...,  //省略其他
  routes:{   //注册路由表
   "/":(context) => 首页Widget(),          //注册首页路由
   "X页路由名":(context) => X页Widget(),  //注册X页路由
    ... //省略其他页路由
  }
);

(2)通过路由id打开新界面：

Navigator.pushNamed(context, "X页路由名");  //无参
Navigator.of(context).pushNamed("X页路由名", arguments: "参数值");  //带参

(3)页面中获取传参：

class X页 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var 参数值 = ModalRoute.of(context).settings.arguments;  //获取参数值
  }
}

3.路由钩子(打开新界面时拦截)：

MaterialApp(
  ... //省略
  onGenerateRoute:(settings) {    //路由表中没有注册的页面会触发onGenerateRoute
    return MaterialPageRoute(builder: (context) {
      //例：加条件判断是否已登录，未登录跳登录页
      return 登录页Widget(settings.arguments);
    }
  });
);

4.路由钩子(跳转时拦截)：

MaterialApp(
  ... //省略
  unknownRoute:(settings) {    //路由名匹配不到时触发unknownRoute
    return MaterialPageRoute(builder: (context) => return 错误页Widget();
  });
);

三、页面布局摘要：

Flutter：页面布局摘要_無_爲的博客-CSDN博客