Flutter跨文件更新变量：如何从自定义Widget更新main.dart的userDistance？

作为Flutter新手，你遇到的核心问题是子Widget如何通知父Widget更新状态，同时你的代码结构也需要做一些小调整，下面一步步帮你解决：

1. 为什么当前代码无法更新userDistance？ #

你的FormValidatorWidgets里的onSaved尝试直接赋值userDistance，但这个变量是_HomeControllerState中的私有状态变量，外部Widget根本无法直接访问，所以这段代码会报错，而且也不符合Flutter的状态管理逻辑。

2. 正确的解决方案：通过回调函数传递数据 #

Flutter中，子Widget要更新父Widget的状态，最基础的方式是父Widget传递一个回调函数给子Widget，子Widget在合适的时机（比如用户输入完成、表单保存时）调用这个回调，把数据传给父Widget，父Widget再通过setState更新自己的状态。

修改后的完整代码： #

Main.dart部分：

class HomeController extends StatefulWidget {
  HomeController({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _HomeControllerState createState() => _HomeControllerState();
}

class _HomeControllerState extends State<HomeController> {
  // ************************************
  // Variable
  // ************************************
  int? userDistance; // 建议用可空类型，初始值设为null更合理
  final _formKey = GlobalKey<FormState>();

  // ************************************
  // Initialisation
  // ************************************
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title ?? 'Home'),
        ),
        body: FutureBuilder(
          future: loadJson(), // 假设你已经实现了这个方法
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return const Center(child: CircularProgressIndicator());
            }
            return SingleChildScrollView(
              padding: const EdgeInsets.all(24),
              child: Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    // 传递回调函数给自定义Widget
                    FormValidatorWidgets.buildDistance(
                      onDistanceSaved: (value) {
                        setState(() {
                          userDistance = value;
                        });
                      },
                    ),
                    // 加一个按钮触发表单保存
                    ElevatedButton(
                      onPressed: () {
                        if (_formKey.currentState!.validate()) {
                          _formKey.currentState!.save(); // 触发所有TextFormField的onSaved
                          print('当前userDistance值：$userDistance');
                        }
                      },
                      child: const Text('保存距离'),
                    ),
                    // 可以展示当前的userDistance值
                    Text('你输入的距离是：${userDistance ?? '未输入'}'),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

自定义Widget文件部分：

import 'package:flutter/material.dart';

class FormValidatorWidgets {
  // 增加回调参数，接收父组件传过来的更新函数
  static Widget buildDistance({required ValueChanged<int?> onDistanceSaved}) {
    return TextFormField(
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: "Distance",
        hintText: "Enter a distance",
      ),
      keyboardType: TextInputType.number,
      validator: (String? value) {
        int? distance = int.tryParse(value ?? '');
        if (distance == null) {
          return "Distance is required";
        }
        if (distance <= 0) {
          return "Distance must be greater than zero";
        }
        return null; // 验证通过要返回null
      },
      onSaved: (String? value) {
        int? distance = int.tryParse(value ?? '');
        // 调用父组件的回调函数，把值传回去
        onDistanceSaved(distance);
      },
    );
  }
}

3. 关于Widget类型的疑问 #

• HomeController必须是StatefulWidget：因为它需要维护可变的userDistance状态，当状态变化时，必须调用setState来触发UI刷新，StatelessWidget无法做到这一点。
• 你的自定义Widget可以保持现状：它只是一个静态方法返回TextFormField（本质是StatelessWidget），因为它不需要自己维护状态，只负责接收用户输入并通过回调传递给父组件，这样的设计是合理的。

额外提示 #

• 记得在表单验证通过后调用_formKey.currentState!.save()，这样才会触发TextFormField的onSaved方法。
• 建议把userDistance的类型改成int?（可空整数），初始值设为null，这样更符合“未输入”的状态语义。

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