如何在Flutter全局通用函数中调用setState方法？

不需要在多个页面重复声明函数，有两种简单可行的方式实现需求：

方法1：传递setState回调到通用函数 #

修改全局函数，新增一个VoidCallback类型的参数，用来接收调用方的setState方法，然后在输入框的onChanged中触发这个回调：

List<Widget> assembleHeaderWidgets(
  double screenHeight, 
  double screenWidth, 
  List<Map<String, dynamic>> headers,
  VoidCallback onTextChanged, // 新增回调参数
) {
  List<Widget> widgetRows = [];

  for (var header in headers) {
    final key = header.keys.first;
    final config = header[key];
    widgetRows.add(
      Container(
        alignment: AlignmentDirectional.center,
        width: screenWidth * config['width'],
        height: 60,
        decoration: const BoxDecoration(
          border: Border(
            top: BorderSide(color: Colors.black, width: 2),
            left: BorderSide(color: Colors.black, width: 1),
            bottom: BorderSide(color: Colors.black, width: 2)           
          )
        ),
        child: TextField(
          controller: config['controller'],
          enabled: config['enabled'],
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 15
          ),
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: key,
          ),
          onChanged: (text) {
            onTextChanged(); // 调用传入的setState
          },
        ),
      )
    );
  }
  return widgetRows;
}

调用时直接传入当前State的setState即可：

Row(
  children: funcs.assembleHeaderWidgets(
    screenHeight, 
    screenWidth,
    [
      {'Record ID': {'controller': recordIdCont, 'width': .125, 'enabled': true}},
      {'Customer Name': {'controller': nameCont, 'width': .125, 'enabled': true}},
      // ... 其他header配置
    ],
    () => setState(() {}), // 传递setState回调
  )
),

方法2：传递自定义onChanged回调（更灵活） #

如果不同页面需要在输入变化时执行额外逻辑，不止是setState，可以让全局函数接收一个自定义回调，参数包含输入框标识和文本内容：

List<Widget> assembleHeaderWidgets(
  double screenHeight, 
  double screenWidth, 
  List<Map<String, dynamic>> headers,
  Function(String key, String text) onHeaderTextChanged, // 自定义回调
) {
  List<Widget> widgetRows = [];

  for (var header in headers) {
    final key = header.keys.first;
    final config = header[key];
    widgetRows.add(
      Container(
        // ... 其他属性不变
        child: TextField(
          // ... 其他属性不变
          onChanged: (text) {
            onHeaderTextChanged(key, text); // 触发自定义回调
          },
        ),
      )
    );
  }
  return widgetRows;
}

调用时可以同时处理业务逻辑和UI更新：

Row(
  children: funcs.assembleHeaderWidgets(
    screenHeight, 
    screenWidth,
    [
      // ... 你的header配置
    ],
    (key, text) {
      // 根据输入框标识执行自定义逻辑
      if (key == 'Record ID') {
        // 比如验证输入格式
      }
      setState(() {}); // 最后更新UI
    },
  )
),

补充说明 #

setState是State类的专属方法，只有在StatefulWidget的State子类中才能直接调用。全局函数不属于任何State实例，所以无法直接访问，通过传递回调的方式，既保留了函数的复用性，又能触发调用方的UI更新。

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