Flutter嵌套注册页面布局与数据传递：适配Provider方案咨询

不用拆成三个独立路由页面，把三个注册步骤整合到同一个路由内，通过Provider管理流程状态和表单数据，完全规避Navigator.push带来的状态共享问题，具体实现步骤如下：

1. 编写注册状态管理类（Provider） #

创建一个ChangeNotifier子类，统一管理表单数据和当前步骤：

class RegisterProvider extends ChangeNotifier {
  // 表单数据
  String nickname = '';
  String username = '';
  String password = '';

  // 当前步骤：0=昵称页，1=用户名页，2=密码页
  int currentStep = 0;

  // 更新表单数据
  void updateNickname(String value) {
    nickname = value;
    notifyListeners();
  }

  void updateUsername(String value) {
    username = value;
    notifyListeners();
  }

  void updatePassword(String value) {
    password = value;
    notifyListeners();
  }

  // 步骤切换
  void nextStep() {
    if (currentStep < 2) {
      currentStep++;
      notifyListeners();
    }
  }

  void prevStep() {
    if (currentStep > 0) {
      currentStep--;
      notifyListeners();
    }
  }

  // 提交注册
  Future<void> submit() async {
    // 这里写账号创建的逻辑，比如调用API
    print('提交数据：昵称=$nickname，用户名=$username，密码=$password');
    // 提交成功后的逻辑，比如返回登录页
  }
}

2. 改造步骤组件 #

把原来三个独立页面改成无状态组件，依赖RegisterProvider获取数据和方法：

昵称输入组件 #

class NicknameStep extends StatelessWidget {
  const NicknameStep({super.key});

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<RegisterProvider>(context);
    return Column(
      children: [
        TextField(
          onChanged: provider.updateNickname,
          decoration: const InputDecoration(labelText: '输入昵称'),
        ),
        ElevatedButton(
          onPressed: provider.nickname.isNotEmpty ? provider.nextStep : null,
          child: const Text('下一步'),
        ),
      ],
    );
  }
}

用户名输入组件 #

class UsernameStep extends StatelessWidget {
  const UsernameStep({super.key});

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<RegisterProvider>(context);
    return Column(
      children: [
        TextField(
          onChanged: provider.updateUsername,
          decoration: const InputDecoration(labelText: '输入用户名'),
        ),
        Row(
          children: [
            TextButton(
              onPressed: provider.prevStep,
              child: const Text('上一步'),
            ),
            ElevatedButton(
              onPressed: provider.username.isNotEmpty ? provider.nextStep : null,
              child: const Text('下一步'),
            ),
          ],
        ),
      ],
    );
  }
}

密码输入与提交组件 #

class PasswordStep extends StatelessWidget {
  const PasswordStep({super.key});

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<RegisterProvider>(context);
    return Column(
      children: [
        TextField(
          onChanged: provider.updatePassword,
          obscureText: true,
          decoration: const InputDecoration(labelText: '输入密码'),
        ),
        Row(
          children: [
            TextButton(
              onPressed: provider.prevStep,
              child: const Text('上一步'),
            ),
            ElevatedButton(
              onPressed: provider.password.isNotEmpty ? provider.submit : null,
              child: const Text('提交'),
            ),
          ],
        ),
      ],
    );
  }
}

3. 主注册页面整合步骤 #

用一个页面根据Provider的currentStep来渲染对应组件，外层用ChangeNotifierProvider包裹：

class RegisterPage extends StatelessWidget {
  const RegisterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => RegisterProvider(),
      child: Scaffold(
        appBar: AppBar(title: const Text('账号注册')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Consumer<RegisterProvider>(
            builder: (context, provider, child) {
              switch (provider.currentStep) {
                case 0:
                  return const NicknameStep();
                case 1:
                  return const UsernameStep();
                case 2:
                  return const PasswordStep();
                default:
                  return const NicknameStep();
              }
            },
          ),
        ),
      ),
    );
  }
}

核心思路解释 #

原来用Navigator.push跳转页面，每个页面属于独立路由，若Provider不是在全局（比如MaterialApp）层级提供，跨路由访问状态会有上下文问题；就算放在全局，注册状态会一直存在，不符合单一职责。

改成单路由内步骤切换后，所有组件共享同一个RegisterProvider实例，表单数据自动同步到提交页面，步骤切换只需要更新Provider内的currentStep，完全不需要依赖Navigator，完美适配Provider的状态管理逻辑。

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