Flutter: page implementation and jump summary

1. Page implementation (similar to Activity):

1. Inherit the StatelessWidget method (stateless):

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

2. Inherit the StatefulWidget method (stateful):

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(
      ... //省略具体页面布局
    );
  }
}

2. Page jump:

1. Open/exit the page in normal way:

(1) Open the page:

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

(2) Exit page:

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

2. Open/exit the page by naming the routing method:

(1) Registration page routing:

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

(2) Open a new interface through the routing id:

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

(3) Obtaining parameters from the page:

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

3. Routing hook (intercept when opening a new interface):

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

4. Routing hook (intercept when jumping):

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

3. Page layout summary:

Flutter: Page Layout Summary Develop Paper