Flutter中如何将TextField输入值保存至外部类变量并复用？

下面给你几种实用的实现方案，适配你的4个输入框场景：

方法1：全局单例类（最简单直接） #

创建一个独立的单例类存储输入值，整个App内任意位置都能访问：

// 全局输入值管理类
class InputValues {
  // 单例实例，确保全局唯一
  static final InputValues _instance = InputValues._internal();
  factory InputValues() => _instance;
  InputValues._internal();

  // 存储四个输入值（转成int类型，方便后续数学运算）
  int? e;
  int? f;
  int? g;
  int? h;
}

在你的TextField所在类中更新值：

TextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  onChanged: (newVal) {
    // 空输入时设为null，非空则转成int
    InputValues().e = newVal.isEmpty ? null : int.parse(newVal);
  },
),
// 其余三个TextField同理，分别赋值给InputValues().f、.g、.h

在其他类中调用这些值：

void calculateResult() {
  int? e = InputValues().e;
  int? f = InputValues().f;
  if (e != null && f != null) {
    int sum = e + f;
    // 处理运算结果
  }
}

方法2：使用Provider状态管理（适合需要UI自动刷新的场景） #

如果你的App需要在输入值变化时自动更新UI，Provider是轻量且合适的选择：

1. 先添加依赖到pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

2. 创建状态管理类：

import 'package:flutter/foundation.dart';

class InputProvider extends ChangeNotifier {
  int? _e;
  int? _f;
  int? _g;
  int? _h;

  // 获取值的 getter 方法
  int? get e => _e;
  int? get f => _f;
  int? get g => _g;
  int? get h => _h;

  // 更新值的方法，更新后通知UI刷新
  void updateE(String value) {
    _e = value.isEmpty ? null : int.parse(value);
    notifyListeners();
  }

  void updateF(String value) {
    _f = value.isEmpty ? null : int.parse(value);
    notifyListeners();
  }

  // 同理添加 updateG、updateH 方法
}

3. 在main.dart中配置Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => InputProvider(),
      child: const MyApp(),
    ),
  );
}

4. 在TextField所在类中更新值：

TextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  onChanged: (newVal) {
    Provider.of<InputProvider>(context, listen: false).updateE(newVal);
  },
),

5. 在其他类中获取值（需要监听变化时设置listen: true）：

@override
Widget build(BuildContext context) {
  final inputProvider = Provider.of<InputProvider>(context);
  return Text("当前e的值：${inputProvider.e}");
}

方法3：使用GetX状态管理（最简洁，无需Context） #

GetX可以让你脱离Context直接访问全局状态，代码更精简：

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5

2. 创建GetX控制器：

import 'package:get/get.dart';

class InputController extends GetxController {
  final RxInt? e = RxInt(null);
  final RxInt? f = RxInt(null);
  final RxInt? g = RxInt(null);
  final RxInt? h = RxInt(null);

  void updateE(String value) {
    e?.value = value.isEmpty ? null : int.parse(value);
  }

  void updateF(String value) {
    f?.value = value.isEmpty ? null : int.parse(value);
  }

  // 同理添加 updateG、updateH 方法
}

3. 在main.dart中全局初始化控制器：

void main() {
  Get.put(InputController());
  runApp(const MyApp());
}

4. 在TextField所在类中更新值：

final inputController = Get.find<InputController>();

TextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  onChanged: (newVal) {
    inputController.updateE(newVal);
  },
),

5. 在其他类中获取值：

final inputController = Get.find<InputController>();

void calculate() {
  int? e = inputController.e?.value;
  int? f = inputController.f?.value;
  if (e != null && f != null) {
    int product = e * f;
    // 处理运算结果
  }
}

注意事项 #

• 由于你需要做数学运算，建议把输入的字符串转成int或double类型，避免后续运算报错，以上示例都做了类型转换处理。
• 输入为空时记得做非空判断，防止空指针异常。

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