Flutter/Dart - 从外部 class 更新 state

Question

我是 Flutter/Dart 的新手，我已经为我的应用程序完成了所有布局，现在是时候调用我的应用程序的 API 了。 我正在尝试尽可能干净地管理 forms。

我创建了一个 class 来管理TextFields数据（值和错误），如果我的 API 返回错误我希望屏幕更新而不必调用setState(() {}) ，这可能吗？

此外，我的应用程序的许多屏幕都使用用户实时输入的值，如果发生这种情况，我将不得不多次调用setState(() {})方法。

知道如何通过对setState(() {})方法的过多调用来做到这一点吗？

我为演示创建了一个测试项目，这些是我的文件：

文件路径： /main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final LoginFormData _loginFormData = LoginFormData();

  void _submitLoginForm() {
    // Validate and then make a call to the login api
    // If the api returns any erros inject then in the LoginFormData class
    _loginFormData.setError('email', 'Invalid e-mail');

    setState(() {}); // Don't want to call setState
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test App'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  errorText: _loginFormData.firstError('email'),
                  labelText: 'E-mail',
                ),
                onChanged: (value) => _loginFormData.setValue('email', value),
              ),
              TextField(
                decoration: InputDecoration(
                  errorText: _loginFormData.firstError('password'),
                  labelText: 'Password',
                ),
                obscureText: true,
                onChanged: (value) =>
                    _loginFormData.setValue('password', value),
              ),
              ElevatedButton(
                onPressed: _submitLoginForm,
                child: const Text('Login'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

文件路径： /login_form_data.dart

import 'form/form_data.dart';
import 'form/form_field.dart';

class LoginFormData extends FormData {
  @override
  Map<String, FormField> fields = {
    'email': FormField(),
    'password': FormField(),
    'simple_account': FormField(
      value: true,
    ),
  };

  LoginFormData();
}

文件路径： /form/form_data.dart

class FormData {
  final Map<String, dynamic> fields = {};

  dynamic getValue(
    String key, {
    String? defaultValue,
  }) {
    return fields[key]?.value ?? defaultValue;
  }

  void setValue(
    String key,
    String value,
  ) {
    fields[key].value = value;
  }

  void setError(
    String key,
    String error,
  ) {
    fields[key]?.errors.add(error);
  }

  dynamic firstError(
    String key,
  ) {
    return fields[key]?.errors.length > 0 ? fields[key]?.errors[0] : null;
  }

  FormData();
}

文件路径： /form/form_field.dart

class FormField {
  dynamic value;

  List errors = [];

  FormField({
    this.value,
  });
}

Answer 1

您本质上是在寻找State 管理解决方案。 有多种解决方案（您可以在这里阅读它们： https://docs.flutter.dev/development/data-and-backend/state-mgmt/options ）

State 管理允许您声明何时希望您的小部件更改 state 而不必强制调用 setState 方法。

Flutter推荐Provider作为初学者解决方案，网上可以找到很多教程。

话虽如此，让我向您展示如何使用一个非常基本的解决方案来实现此结果：Change Notifier Quoting flutter 文档：

“可以扩展或混合的 class 使用 VoidCallback 提供更改通知 API 进行通知。”

我们将使 FormData 成为一个更改通知程序，并且我们将使您的应用程序监听实例上的更改，并根据它们重建自身。 第 1 步：根据您发布的代码，我可以看出您将根据父 class FormData 的 setValue 和 setError 方法与 LoginFormData 进行交互。 所以我们要让 FormData 继承 ChangeNotifer，并在这两个方法上调用 notifyListeners()。

class FormData extends ChangeNotifier {
  final Map<String, dynamic> fields = {};

  dynamic getValue(
    String key, {
    String? defaultValue,
  }) {
    return fields[key]?.value ?? defaultValue;
  }

  void setValue(
    String key,
    String value,
  ) {
    fields[key].value = value;
    notifyListeners();
  }

  void setError(
    String key,
    String error,
  ) {
    fields[key]?.errors.add(error);
    notifyListeners();
  }

  dynamic firstError(
    String key,
  ) {
    return fields[key]?.errors.length > 0 ? fields[key]?.errors[0] : null;
  }

  FormData();
}

现在，每次调用 setValue 或 setError 时，FormData 的实例都会通知侦听器。 第 2 步：现在我们必须在您的应用程序中设置一个小部件来监听这些变化。 由于您的应用程序仍然很小，因此很容易找到放置此侦听器的位置。 但是随着您的应用程序的增长，您会发现这样做变得越来越困难，而这正是像 Provider 这样的包派上用场的地方。 我们将使用 AnimatedBuilder 包装脚手架主体上的第一个 Padding 小部件。 尽管名称具有误导性，但动画生成器并不局限于动画。 它是一个小部件，它接收任何可监听的 object 作为参数，并在每次收到通知时重建自身，传递可监听的更新版本。

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final LoginFormData _loginFormData = LoginFormData();

  void _submitLoginForm() {
    // Validate and then make a call to the login api
    // If the api returns any erros inject then in the LoginFormData class
    _loginFormData.setError('email', 'Invalid e-mail');

    //setState(() {}); No longer necessary
  }

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test App'),
      ),
      body: AnimatedBuilder(
        animation: _loginFormData,
        builder: (context, child) {
          return Padding(
            padding: const EdgeInsets.all(30),
            child: Center(
              child: Column(
                //... The rest of your widgets
              ),
            ),
          );
        }
      ),
    );
  }
}