Flutter：如何从其他Widget触发setState更新列表

需求 #

提交数据修改（添加或修改收益类型）完成后，触发AdminWinTypesTab的setState更新列表。

项目结构 #

• AdministrationScreen返回Scaffold，主体包含AdminWinTypesTab和悬浮操作按钮
• 悬浮按钮点击打开模态底部弹窗（ModalBottomSheet），内容为ModalBottomSheetContent
• ModalBottomSheetContent包含AdminWinTypesColumn，负责处理数据的添加/修改操作

问题原因 #

当前AdminWinTypesTab的状态与底部弹窗的状态完全独立：

• 弹窗内的setState()仅能刷新弹窗自身，无法触发表单外的AdminWinTypesTab重新构建
• AdminWinTypesTab的FutureBuilder依赖getWinTypes()获取数据，但缺少外部触发刷新的机制

解决方案 #

利用showModalBottomSheet的Future特性，在弹窗关闭后触发AdminWinTypesTab的刷新；同时给AdminWinTypesTab添加全局key，方便调用其内部的刷新方法。

修改步骤 #

1. 给AdminWinTypesTab添加全局Key
   在_AdministrationScreenState中定义全局key，用于控制AdminWinTypesTab：

final GlobalKey<_AdminWinTypesTabState> _winTypesTabKey = GlobalKey<_AdminWinTypesTabState>();

修改body部分的AdminWinTypesTab引用：

body: AdminWinTypesTab(key: _winTypesTabKey),

2. 在弹窗关闭后触发刷新
   修改悬浮按钮和编辑按钮的showModalBottomSheet代码，在弹窗关闭后调用刷新方法：

// 悬浮按钮的弹窗逻辑
showModalBottomSheet(...).then((_) {
  _winTypesTabKey.currentState?.refreshWinTypesTab();
});

// 编辑按钮的弹窗逻辑
showModalBottomSheet(...).then((_) {
  _winTypesTabKey.currentState?.refreshWinTypesTab();
});

3. 优化AdminWinTypesTab的刷新逻辑
   当前_AdminWinTypesTabState中的refreshWinTypesTab()已调用setState()，可保留，但建议将getWinTypes()的请求缓存到State变量中，避免不必要的重复请求：

class _AdminWinTypesTabState extends State<AdminWinTypesTab> {
  late Future<List<String>?> _winTypesFuture;

  @override
  void initState() {
    super.initState();
    _winTypesFuture = getWinTypes();
  }

  void refreshWinTypesTab() {
    setState(() {
      // 重新发起数据请求
      _winTypesFuture = getWinTypes();
    });
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<String>?>(
      future: _winTypesFuture,
      // ... 其余代码不变
    );
  }
}

完整修改后的关键代码片段 #

AdministrationScreen部分

class _AdministrationScreenState extends State<AdministrationScreen>
    with SingleTickerProviderStateMixin {
  final GlobalKey<_AdminWinTypesTabState> _winTypesTabKey = GlobalKey<_AdminWinTypesTabState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: const Text('Test'),
      ),
      body: AdminWinTypesTab(key: _winTypesTabKey),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            builder: (BuildContext context) {
              return SizedBox(
                height: MediaQuery.of(context).size.height / 1.75,
                child: const Scaffold(
                  body: SingleChildScrollView(
                    child: SizedBox(
                      child: Padding(
                        padding: EdgeInsets.all(20.0),
                        child: ModalBottomSheetContent(
                          add: true,
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ).then((_) {
            _winTypesTabKey.currentState?.refreshWinTypesTab();
          });
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.add),
      ),
    );
  }
}

AdminWinTypesTab的编辑按钮部分

IconButton(
  onPressed: () {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return SizedBox(
          height: MediaQuery.of(context).size.height / 1.75,
          child: Scaffold(
            body: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: ModalBottomSheetContent(
                  add: false,
                  winType: winType,
                ),
              ),
            ),
          ),
        );
      },
    ).then((_) {
      _winTypesTabKey.currentState?.refreshWinTypesTab();
    });
  },
  icon: const Icon(Icons.edit, color: Colors.green)),

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