Flutter如何通过链接文本实现含OwnerRegisterPage的三页面切换

问题根因 #

之前两页切换用单个布尔值（比如showLogin/isRegister）就能覆盖两种状态，加第三个页面之后二元判断覆盖不了三种场景，硬改if/else很容易出现状态互斥、点击没反应的问题。

实现步骤 #

完全不用重构原有架构，只要把状态判断从布尔值换成多状态标记就行：

• 第一步：在Auth.dart中定义页面类型枚举，统一标记三个页面

enum AuthPageStatus {
  login, // 登录页
  userRegister, // 普通用户注册页
  ownerRegister, // 所有者注册页
}

• 第二步：改造Auth.dart的状态逻辑
  删掉原来用来切页的布尔变量，换成页面状态变量，暴露统一的切页方法给子页面调用：

class AuthPage extends StatefulWidget {
  const AuthPage({super.key});

  @override
  State<AuthPage> createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  // 默认进入登录页
  AuthPageStatus currentPage = AuthPageStatus.login;

  // 统一切页方法，所有子页面跳转都走这个方法触发更新
  void changePage(AuthPageStatus target) {
    setState(() {
      currentPage = target;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 根据当前状态返回对应页面，把切页回调透传给子页面
    switch (currentPage) {
      case AuthPageStatus.login:
        return LoginPage(
          toUserRegister: () => changePage(AuthPageStatus.userRegister),
          toOwnerRegister: () => changePage(AuthPageStatus.ownerRegister),
        );
      case AuthPageStatus.userRegister:
        return UserRegisterPage(
          toLogin: () => changePage(AuthPageStatus.login),
        );
      case AuthPageStatus.ownerRegister:
        return OwnerRegisterPage(
          toLogin: () => changePage(AuthPageStatus.login),
        );
    }
  }
}

• 第三步：对接子页面的点击事件
  给每个页面的构造函数加上对应的回调参数，点击链接的时候直接调用传进来的回调就行，不要在子页面里自己写Navigator或者直接操作父页面状态：
  • 登录页：普通注册链接绑定toUserRegister回调，所有者注册链接绑定toOwnerRegister回调
  • 普通注册页、所有者注册页：返回登录的链接绑定toLogin回调

常见问题排查 #

• 点击没反应优先查子页面构造函数有没有正确接收回调参数，回调里传的枚举值是不是对应目标页面
• 所有切页逻辑统一走父类的changePage方法，不要混着用布尔值判断，避免状态不同步
• 不用额外引入路由框架，和之前两页切换的逻辑完全一致，只是扩展了状态的可选值

内容的提问来源于stack exchange，提问作者Reach Kim