Flutter：如何将控制器输入值传递到另一页面的状态组件

核心问题拆解 #

需要实现从LoginForm（login.dart）的手机号输入框，将输入值传递到OTPScreen（OTP.dart），当前问题是OTPScreen声明需要接收MobileNum参数，但跳转时未传递，且存在参数接收逻辑缺失。

代码缺失点排查 #

1. OTPScreen参数接收逻辑缺失：未在OTPScreen的构造函数中定义并声明必填的mobileNum参数
2. LoginForm跳转传值逻辑缺失：点击跳转按钮时，未从_mobileNumberController中获取输入的手机号，也未将其作为参数传递给OTPScreen
3. 可选风险点：未对手机号输入做基本非空校验，未在LoginForm销毁时释放TextEditingController（存在内存泄漏风险）

分步解决方案 #

1. 完善OTPScreen的参数接收（OTP.dart） #

修改OTPScreen的StatefulWidget定义，添加必填的mobileNum参数，并在State中通过widget.mobileNum访问该值：

class OTPScreen extends StatefulWidget {
  // 定义接收手机号的参数
  final String mobileNum;

  // 构造函数声明参数为必填
  const OTPScreen({super.key, required this.mobileNum});

  @override
  State<OTPScreen> createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("验证码验证")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 展示接收的手机号
            Text("请输入手机号 ${widget.mobileNum} 的验证码"),
            // 其他OTP输入逻辑...
          ],
        ),
      ),
    );
  }
}

2. 实现LoginForm的跳转传值逻辑（login.dart） #

在LoginForm中，获取_mobileNumberController的输入文本，校验后跳转并传递参数：

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

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final TextEditingController _mobileNumberController = TextEditingController();

  // 销毁控制器，避免内存泄漏
  @override
  void dispose() {
    _mobileNumberController.dispose();
    super.dispose();
  }

  // 跳转至OTP页面的逻辑
  void _goToOTPScreen() {
    String inputMobile = _mobileNumberController.text.trim();
    // 简单非空校验
    if (inputMobile.isNotEmpty) {
      Navigator.push(
        context,
        MaterialPageRoute(
          // 传递手机号参数给OTPScreen
          builder: (context) => OTPScreen(mobileNum: inputMobile),
        ),
      );
    } else {
      // 提示用户输入手机号
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("请输入手机号")),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          controller: _mobileNumberController,
          keyboardType: TextInputType.phone,
          decoration: const InputDecoration(
            labelText: "手机号",
            hintText: "请输入11位手机号",
          ),
        ),
        // 跳转按钮
        ElevatedButton(
          onPressed: _goToOTPScreen,
          child: const Text("获取验证码"),
        ),
      ],
    );
  }
}

3. （可选）命名路由传值方式 #

如果项目使用命名路由，修改路由注册和跳转逻辑：

• 路由注册（main.dart）：

MaterialApp(
  initialRoute: '/login',
  routes: {
    '/login': (context) => const LoginPage(),
    // 通过ModalRoute获取arguments参数
    '/otp': (context) => OTPScreen(
          mobileNum: ModalRoute.of(context)!.settings.arguments as String,
        ),
  },
);

• LoginForm中的跳转逻辑修改：

void _goToOTPScreen() {
  String inputMobile = _mobileNumberController.text.trim();
  if (inputMobile.isNotEmpty) {
    Navigator.pushNamed(
      context,
      '/otp',
      arguments: inputMobile, // 传递参数
    );
  }
}

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