如何从同级ChildWidgetB触发ChildWidgetA中的操作?
我的最终解决方案
说明:
最终我重构了代码结构,取消了同级组件通信的路径。
ParentWidget |-ChildWidgetA |-ChildWidgetB
因为我需要两个不同版本的ChildWidgetA(一个静态版本,一个带编辑字段的版本),且需要双向通信(组件B向A发送指令,A向B返回最终状态)……
这样的同级通信过于复杂,于是我将原同级组件改为父子结构,让通信更简单。
经验总结:如果需要同级组件通信,尽量将它们调整为父子结构。同级组件通信虽可行,但代码逻辑会因间接流程变得难以维护。
原始提问
场景:父组件ParentWidget包含两个子组件。
结构如下:
ParentWidget |-ChildWidgetA |-ChildWidgetB
ChildWidgetA包含数据录入表单,ChildWidgetB包含操作按钮(保存、取消、导出等)。
需求:点击ChildWidgetB中的按钮,触发ChildWidgetA读取并保存文本数据的操作。
调整为如下父子结构可实现需求(子组件可通过父组件提供的回调通信),但在实际场景中暂不可行,除非没有其他解决方案:
ParentWidget |-ChildWidgetA |-ChildWidgetB
同时,我也不想在无关的ParentWidget中引入数据录入表单的相关逻辑,例如创建TextEditingController对象来帮助ControlsWidget读取文本值进行保存。
问题:如果通过修改/重构代码,有哪些可行方案可以实现需求?(例如流、事件监听器、状态管理等?)
以下是演示该结构问题的带注释示例代码:
class ParentWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ DataEntryFormWidget(), // 需读取、保存值的TextField ControlsWidgetWithSaveButton(), // 用于触发保存操作的按钮 ], ); } } class DataEntryFormWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ TextFormField(), // 假设已有读取这些字段值的方式 TextFormField(), // 其他字段 ] ); } void doSave() { // 读取TextFormField的值 // 这是ControlsWidgetWithSaveButton无法实现的操作 // 因为它无法访问TextFormField... // 因此不能直接将该代码/函数移至ControlsWidget。 // // getDatabase.save(... 读取到的值 ...) // (保存逻辑正常) } } class ControlsWidgetWithSaveButton extends StatelessWidget { @override Widget build(BuildContext context) { return Row( children: [ ElevatedButton( onPressed: () { // 问题所在: // 此处希望调用/触发doSave()函数。 // 如果能获取数据,也可在此处执行数据库写入操作... }, child: const Text('Save'), ), // ... <假设还有其他按钮> ] ); } }
内容的提问来源于stack exchange,提问作者Bill Patterson
相关产品推荐
相关产品推荐

