如何将包含setState的void函数移至独立Dart文件？

核心方案 #

通过传递状态更新回调的方式解决，和Stateless Widget使用onTap回调的逻辑完全一致：让独立类只负责生成UI结构，把状态更新的逻辑委托给主Stateful Widget处理。

具体代码实现 #

1. 封装独立工具类

创建一个专门生成Widget的工具类，接收selected参数和状态更新回调：

class WidgetGenerator {
  static Widget buildLeftDisplay(String selected, ValueChanged<String> onOptionSelected) {
    switch (selected) {
      case 'option 1':
        return Container(
          child: Column(
            children: [
              Button3(onTap: onOptionSelected),
              Button5(onTap: onOptionSelected),
            ],
          ),
        );
      case 'option 2':
        return Container(
          child: Column(
            children: [
              Button1(onTap: onOptionSelected),
              Button3(onTap: onOptionSelected),
              Button7(onTap: onOptionSelected),
            ],
          ),
        );
      default:
        return Container();
    }
  }
}

2. 在主State类中调用工具类

在主Stateful Widget的State类里，调用工具类并传入状态更新逻辑：

class _MainPageState extends State<MainPage> {
  String _selectedOption = 'option 1';
  late Widget _displayLeft;

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

  void _updateDisplay() {
    _displayLeft = WidgetGenerator.buildLeftDisplay(
      _selectedOption,
      (val) {
        setState(() {
          _selectedOption = val;
          _updateDisplay(); // 更新选中后重新生成Widget
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [_displayLeft, /* 右侧Widget */],
      ),
    );
  }
}

关键说明 #

• 独立工具类无需持有状态或调用setState，只根据输入参数返回对应UI，符合单一职责原则。
• 状态更新逻辑完全由主State类掌控，通过ValueChanged<String>回调传递给工具类生成的按钮，和Stateless Widget传递onTap的逻辑完全匹配。
• 避免使用全局变量存储Widget，改为在State类中管理_displayLeft，减少状态混乱的风险。

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