如何在不同类中使用Flutter showModalBottomSheet并更新主界面UI？

这个场景完全可以实现，最直接的方式是通过回调函数传递更新逻辑，以下是完整代码示例：

主界面类（包含文本和触发按钮） #

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _displayText = "初始文本";

  // 更新文本的方法，将作为回调传给弹窗
  void _updateText(String newText) {
    setState(() {
      _displayText = newText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("主界面")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_displayText, style: const TextStyle(fontSize: 20)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 调用弹窗类的方法，传入上下文和更新回调
                CustomBottomSheet.show(context, _updateText);
              },
              child: const Text("打开底部弹窗"),
            ),
          ],
        ),
      ),
    );
  }
}

独立的底部弹窗类 #

class CustomBottomSheet {
  // 静态方法，用于展示弹窗，接收上下文和更新文本的回调
  static void show(BuildContext context, Function(String) updateText) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext sheetContext) {
        return SizedBox(
          height: 200,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("底部弹窗内容"),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    // 先关闭弹窗
                    Navigator.pop(sheetContext);
                    // 调用回调更新主界面文本
                    updateText("弹窗触发的更新文本");
                  },
                  child: const Text("确认并更新"),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

逻辑说明 #

1. 主界面通过setState维护文本状态，并定义_updateText方法用于更新文本
2. 点击主界面按钮时，调用弹窗类的静态方法show，将_updateText作为回调传入
3. 弹窗内的按钮点击时，先通过Navigator.pop关闭弹窗，再执行传入的回调函数，触发主界面的状态更新

如果项目复杂度较高，也可以使用ValueNotifier、Provider等状态管理方案来实现跨组件状态同步，回调方式更适合简单场景。

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