Flutter Statefulwidget：在外部更新状态时如何重建小部件

Question

我正在遇到一个问题，即在扑朔迷离中更新 statefulwidget 中的变量。具体来说，我有一个自定义窗口小部件 customErrorformfield ，它扩展了 statefulwidget 。该小部件包含一个方法 setErlorlist 来更新列表变量 errorList 。但是，当 setErrorlist 从另一个类调用时， build 方法 customErrorformfield 并不能反映更新的 errorlist 。

我了解到 setstate 应该触发小部件的重建，但是我不确定如何在 statefulwidget 中适当调用 setState 从外部类更新。这是相关的代码段，以更好地理解：

class CustomErrorFormField extends StatefulWidget {
  // Variable declaration
  List<String> errorList = [];

  // Method to update errorList
  void setErrorList(List<String> listOfError) {
    errorList = listOfError;
  }

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

class _CustomErrorFormFieldState extends State<CustomErrorFormField> {
  @override
  Widget build(BuildContext context) {
    // Trying to print updated errorList, but not reflecting changes
    print(widget.errorList); 
    return ... // UI Code
  }
}

在另一类中，我正在更新错误列表这样：

// Instance creation and update
CustomErrorFormField nameTextFild = CustomErrorFormField(...);

// Inside some method
setState(() {
  // Updating errorList using setErrorList method
  if (condition) {
    nameTextFild.setErrorList([...]);
  } else {
    nameTextFild.setErrorList([...]);
  }
});

Answer 1

不建议您从小部件外部更改小部件的状态。

您应该做的是将验证逻辑作为函数传递，并让小部件处理状态更改。

CustomFormField：

import 'package:flutter/material.dart';

class CustomErrorFormField extends StatefulWidget {
  //Take the validation logic as a parameter.
  final List<String> Function(String value) validator;
  const CustomErrorFormField({required this.validator});

  @override
  _CustomErrorFormFieldState createState() {
    return _CustomErrorFormFieldState();
  }
}

class _CustomErrorFormFieldState extends State<CustomErrorFormField> {
  
  //Keep the state inside the widget itself
  List<String> errorList = [];

  //Update the state from inside the widget
  void setErrorList(List<String> listOfError) {
    setState(() {
      errorList = listOfError;
    });
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      child: TextFormField(
        validator: (String value){
           //Use the validation logic to decide the error.
           setErrorList(widget.validator(value))
          }
        }
      ),
    );
  }
}

我使用TextFormField作为示例，您可以使用任何在更改时接受回调的小部件。

如果您从头开始制作所有内容，则可以将验证器函数附加到文本更改时触发的回调函数。通常这是在控制器的帮助下完成的。

用法：

final nameTextFild = CustomErrorFormField(
  key: ValueKey(count),
  labelName: "Name",
  iContext: context,
  validator: (String value) {
    if (!value.contains(RegExp(r'[0-9]'))) {
      return [];
    } else {
      return ["Invalid characters, use letters only."];
    }
  },
);