如何跨文件获取TextEditingController状态以禁用ElevatedButton

问题背景 #

我有两个Flutter文件，第一个文件包含若干TextFormField，第二个文件包含ElevatedButton。希望实现：当任意一个TextFormField为空时，禁用该按钮。

原表单文件核心代码如下：

class FormTextState extends State<FormText>{

final TextEditingController inputController1 = TextEditingController();
final TextEditingController inputController2 = TextEditingController();
final TextEditingController inputController3 = TextEditingController();
bool submit1 = false;
bool submit2 = false;
bool submit3 = false;

@override
void initState(){
  super.initState();
  inputController1.addListener(() { setState(() {
    submit1 = inputController1.text.isNotEmpty;
  });
  });

  inputController2.addListener(() { setState(() {
    submit2 = inputController2.text.isNotEmpty;
  });
  });

  inputController3.addListener(() { setState(() {
    submit3 = inputController3.text.isNotEmpty;
  });
  });
}

@override
void dispose(){
  inputController1.dispose();
  inputController2.dispose();
  inputController3.dispose();
  super.dispose();
}
}

每个TextFormField绑定对应控制器：

TextFormField(
controller: inputController1,
)

同一文件内可通过以下方式控制按钮：

ElevatedButton(
    onPressed: submit1 && submit2 && submit3 ? () => doSomething() : null,
)

但跨文件时，submit1、submit2、submit3无法直接访问，以下是三种可行的解决方案：

方法一：回调函数传递状态（简单场景首选） #

适合表单和按钮有直接父组件关联的场景，通过回调将表单有效性状态传递给父组件，再由父组件传递给按钮。

步骤1：修改表单组件，添加回调参数 #

class FormText extends StatefulWidget {
  // 添加回调，用于传递表单是否有效
  final ValueChanged<bool>? onFormValidChanged;

  const FormText({Key? key, this.onFormValidChanged}) : super(key: key);

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

步骤2：在表单状态类中计算整体有效性并回调 #

@override
void initState(){
  super.initState();
  
  // 统一计算表单整体有效性的方法
  void updateFormValidity() {
    bool isValid = inputController1.text.isNotEmpty && 
                   inputController2.text.isNotEmpty && 
                   inputController3.text.isNotEmpty;
    // 把状态传递给父组件
    widget.onFormValidChanged?.call(isValid);
  }

  inputController1.addListener(() {
    setState(() {
      submit1 = inputController1.text.isNotEmpty;
    });
    updateFormValidity();
  });

  inputController2.addListener(() {
    setState(() {
      submit2 = inputController2.text.isNotEmpty;
    });
    updateFormValidity();
  });

  inputController3.addListener(() {
    setState(() {
      submit3 = inputController3.text.isNotEmpty;
    });
    updateFormValidity();
  });
}

步骤3：父组件整合表单和按钮 #

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  bool _isFormValid = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FormText(
          onFormValidChanged: (isValid) {
            setState(() {
              _isFormValid = isValid;
            });
          },
        ),
        // 将有效性状态传递给按钮组件
        SubmitButton(isEnabled: _isFormValid),
      ],
    );
  }
}

// 按钮所在组件
class SubmitButton extends StatelessWidget {
  final bool isEnabled;

  const SubmitButton({Key? key, required this.isEnabled}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: isEnabled ? () => doSomething() : null,
      child: const Text('提交'),
    );
  }
}

方法二：Provider状态管理（复杂场景首选） #

如果组件层级较深，或需要在多个地方共享表单状态，推荐使用Flutter官方轻量状态管理库Provider。

步骤1：添加Provider依赖 #

在pubspec.yaml中添加：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

步骤2：创建表单状态模型 #

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

class FormStateModel extends ChangeNotifier {
  bool _isValid = false;
  final TextEditingController inputController1 = TextEditingController();
  final TextEditingController inputController2 = TextEditingController();
  final TextEditingController inputController3 = TextEditingController();

  bool get isValid => _isValid;

  FormStateModel() {
    // 监听所有输入框变化，自动更新有效性
    inputController1.addListener(_updateValidity);
    inputController2.addListener(_updateValidity);
    inputController3.addListener(_updateValidity);
  }

  void _updateValidity() {
    _isValid = inputController1.text.isNotEmpty && 
               inputController2.text.isNotEmpty && 
               inputController3.text.isNotEmpty;
    notifyListeners(); // 通知所有监听组件状态变化
  }

  @override
  void dispose() {
    inputController1.dispose();
    inputController2.dispose();
    inputController3.dispose();
    super.dispose();
  }
}

步骤3：在父组件中提供状态 #

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

class ParentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => FormStateModel(),
      child: Scaffold(
        body: Column(
          children: const [
            FormText(),
            SubmitButton(),
          ],
        ),
      ),
    );
  }
}

步骤4：修改表单组件使用模型中的控制器 #

class FormText extends StatelessWidget {
  const FormText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final formModel = Provider.of<FormStateModel>(context);
    return Column(
      children: [
        TextFormField(controller: formModel.inputController1),
        TextFormField(controller: formModel.inputController2),
        TextFormField(controller: formModel.inputController3),
      ],
    );
  }
}

步骤5：按钮组件获取状态控制禁用 #

class SubmitButton extends StatelessWidget {
  const SubmitButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<FormStateModel>(
      builder: (context, formModel, child) {
        return ElevatedButton(
          onPressed: formModel.isValid ? () => doSomething() : null,
          child: const Text('提交'),
        );
      },
    );
  }
}

方法三：全局静态变量（不推荐） #

仅适合临时测试场景，会导致代码耦合度高，难以维护：

修改表单状态类，将状态变量设为静态：

class FormTextState extends State<FormText>{
  static bool submit1 = false;
  static bool submit2 = false;
  static bool submit3 = false;
  
  // 其余代码不变
}

按钮组件直接访问静态变量：

ElevatedButton(
  onPressed: FormTextState.submit1 && FormTextState.submit2 && FormTextState.submit3 ? () => doSomething() : null,
  child: const Text('提交'),
)

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