如何在回调函数中获取调用处子Widget的BuildContext？

方法1：让回调接收BuildContext参数 #

直接定义回调类型为带BuildContext参数的函数，子Widget在触发点击事件时，把自己的context传入回调。

示例代码：

// 父组件MyComplexWidget
class MyComplexWidget extends StatelessWidget {
  // 定义带context参数的回调
  final void Function(BuildContext) onWidgetATap;
  final void Function(BuildContext) onWidgetBTap;

  const MyComplexWidget({
    super.key,
    required this.onWidgetATap,
    required this.onWidgetBTap,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        WidgetA(onTap: onWidgetATap),
        WidgetB(onPressed: onWidgetBTap),
      ],
    );
  }
}

// 子组件WidgetA
class WidgetA extends StatelessWidget {
  final void Function(BuildContext) onTap;

  const WidgetA({super.key, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 触发点击时传入自身的context
      onTap: () => onTap(context),
      child: const Text("Widget A"),
    );
  }
}

// 子组件WidgetB
class WidgetB extends StatelessWidget {
  final void Function(BuildContext) onPressed;

  const WidgetB({super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => onPressed(context),
      child: const Text("Widget B"),
    );
  }
}

使用时，回调就能拿到子组件的context：

MyComplexWidget(
  onWidgetATap: (context) {
    Navigator.pushNamed(context, "newroute"); // 这里的context是WidgetA的上下文
  },
  onWidgetBTap: (context) {
    // 用WidgetB的context执行操作
  },
)

方法2：用Builder获取子层级context（适用于无法修改子组件的情况） #

如果子组件是第三方库或者不能修改其回调参数，给子组件套一层Builder，Builder的builder函数会提供子层级的context，直接用这个context执行操作。

示例代码：

class MyComplexWidget extends StatelessWidget {
  final VoidCallback onWidgetATap;

  const MyComplexWidget({super.key, required this.onWidgetATap});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Builder(
          builder: (childContext) {
            return WidgetA(
              onTap: () {
                // 直接用childContext（子组件层级的上下文）做操作
                Navigator.pushNamed(childContext, "newroute");
                // 如果要把context传给外部回调，还是需要方法1的参数定义
                // onWidgetATap(childContext);
              },
            );
          },
        ),
      ],
    );
  }
}

方法3：将固定逻辑封装到子组件中 #

如果回调逻辑比较固定（比如都是跳转路由），可以把逻辑直接写到子组件里，通过传入配置参数（比如路由名称）来控制，避免传递回调。

示例代码：

class WidgetA extends StatelessWidget {
  final String targetRoute;

  const WidgetA({super.key, required this.targetRoute});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.pushNamed(context, targetRoute),
      child: const Text("Widget A"),
    );
  }
}

// 使用MyComplexWidget时
MyComplexWidget(
  widgetATargetRoute: "newroute",
)

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