Flutter TextField值无法传递：onChanged赋值后password仍为null

问题根源 #

• TextField回调未执行：SuildTextField组件中，TextField的onChanged仅返回了userTyped函数，未实际调用它传递输入值，导致password变量从未被赋值。
• 全局变量不合理：全局变量password未初始化，且独立的_BuildCreateAccountButton组件无法感知全局变量变化，即使变量被更新也无法触发UI刷新。
• 类型不明确：userTyped被定义为泛型Function，未指定参数类型，可能引发类型推断问题。

修复步骤 #

1. 修正TextField回调：将SuildTextField中onChanged: (value) => userTyped改为onChanged: userTyped，确保输入值传递到回调函数。
2. 迁移变量至State类：把email、password等变量移到_RegistrationScreenState中，通过setState管理状态，保证UI响应变量变化。
3. 简化按钮组件：将_BuildCreateAccountButton改为父组件内的方法，直接访问State变量，避免跨组件依赖全局变量。
4. 明确回调类型：将userTyped类型指定为Function(String)，确保类型安全。

修正后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

// 补充缺失的样式定义
const kLabelStyle = TextStyle(color: Colors.white, fontSize: 16);
const kHintTextStyle = TextStyle(color: Colors.grey, fontSize: 14);

class RegistrationScreen extends StatefulWidget {
  static const String id = 'registration_screen';
  @override
  State<RegistrationScreen> createState() => _RegistrationScreenState();
}

class _RegistrationScreenState extends State<RegistrationScreen> {
  // 变量迁移至State类，替代全局变量
  late String email;
  String? password; 
  late String firstName;
  late String lastName;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Stack(
            children: [
              Container(
                height: double.infinity,
                child: SingleChildScrollView(
                  physics: const AlwaysScrollableScrollPhysics(),
                  padding: const EdgeInsets.symmetric(
                    horizontal: 40.0,
                    vertical: 120.0,
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Column(
                        children: [
                          BuildTextField(
                            'Password',
                            'Enter your password',
                            Icons.key_outlined,
                            true,
                            TextInputType.text,
                            (value) {
                              setState(() {
                                password = value;
                              });
                            },
                          ),
                          const SizedBox(height: 10.0),
                          _buildCreateAccountButton(),
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  // 将按钮改为父组件内方法，直接访问State变量
  Widget _buildCreateAccountButton() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 25.0),
      width: double.infinity,
      child: ElevatedButton(
        onPressed: () {
          print('Create Account Button was pressed. print: $password');
        },
        child: const Row(
          children: [
            Text('SIGN UP '),
          ],
        ),
      ),
    );
  }
}

class BuildTextField extends StatelessWidget {
  BuildTextField(
    this.titleLine,
    this.textField,
    this.fieldIcon,
    this.isSecure,
    this.textInputType,
    this.userTyped, {
    super.key,
  });
  final String titleLine;
  final String textField;
  final IconData fieldIcon;
  final bool isSecure;
  final TextInputType textInputType;
  // 明确回调参数类型
  final Function(String) userTyped;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(titleLine, style: kLabelStyle),
        const SizedBox(height: 10.0),
        Container(
          child: TextField(
            obscureText: isSecure,
            keyboardType: textInputType,
            // 直接绑定回调函数
            onChanged: userTyped,
            onSubmitted: (value) {},
            style: const TextStyle(color: Colors.white),
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: const EdgeInsets.only(top: 14.0),
              prefixIcon: Icon(
                fieldIcon,
                color: Colors.white,
              ),
              hintText: textField,
              hintStyle: kHintTextStyle,
            ),
          ),
        ),
      ],
    );
  }
}

额外说明 #

• 避免全局变量：全局变量无法触发组件setState，易引发状态混乱，将变量放在State类中是Flutter状态管理的标准方式。
• 类型安全：明确回调参数类型可避免潜在的类型错误，提升代码可靠性。
• 组件拆分合理性：独立的_BuildCreateAccountButton无必要，改为父组件内方法更简洁高效。

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