Flutter如何向Widget类型的自定义组件传递context

架构老林

2026-9-30

解决方案

你当前把cusSearchBar定义为固定的Widget实例变量，初始化时无法动态接收上下文，调整为以下两种写法即可实现context传递：

方案1：改为函数式组件（适合轻量无状态的小组件）

将组件定义为接收BuildContext作为入参的函数，调用时传入当前上下文即可：

// 定义时接收context参数
Widget cusSearchBar(BuildContext context) {
  // 此处可正常使用传入的context，例如获取主题、导航、媒体查询等能力
  return Text(
    "Supplier",
    style: TextStyle(color: Theme.of(context).primaryColor),
  );
}

// 使用时，在build方法内传入当前context即可
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: cusSearchBar(context),
    ),
  );
}

方案2：封装为独立的StatelessWidget（适合复用性高的组件）

自定义独立的组件类，Flutter框架会自动将当前上下文传递到组件的build方法中，无需手动传参：

class CusSearchBar extends StatelessWidget {
  const CusSearchBar({super.key});

  @override
  Widget build(BuildContext context) {
    // 此处可直接使用框架传入的context
    return const Text("Supplier");
  }
}

// 使用时直接在Widget树中声明即可
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const CusSearchBar(),
    ),
  );
}