Flutter中如何在有状态组件间传递并调用函数？

问题场景 #

需要在两个有状态组件间传递函数：

• 父组件定义的函数：

void _setJobAddress(jobAddress) {
  setState(() {
    _jobAddress = jobAddress;
  });
}

• 通过导航跳转传递函数到子组件：

TextButton(
  onPressed: () => {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SearchLocationScreen(_setJobAddress)
      )
    )
  },
)

• 子组件SearchLocationScreen尝试接收并调用该函数时触发错误。

错误原因 #

从报错信息可明确问题：

Closure call with mismatched arguments: function '_CreateUpdateJobViewState._setJobAddress'
Tried calling: _CreateUpdateJobViewState._setJobAddress()
Found: _CreateUpdateJobViewState._setJobAddress(dynamic) => void

核心问题是子组件initState方法中调用widget.setJobAddess()时未传入参数，但父组件的_setJobAddress必须接收一个jobAddress参数才能执行。另外子组件的函数类型定义不够严谨，存在动态类型风险。

修复步骤 #

1. 移除initState中无参的函数调用 #

删除子组件initState里的widget.setJobAddess();，同时补充必须调用的super.initState()：

@override
void initState() {
  super.initState(); // Flutter要求initState必须调用该方法
  // 移除无参的widget.setJobAddess();
}

2. 优化子组件的函数类型定义 #

给子组件的函数参数指定明确类型，提升代码可读性和类型安全性：

class SearchLocationScreen extends StatefulWidget {
  // 明确函数类型：接收String参数，无返回值
  final void Function(String) setJobAddress;

  const SearchLocationScreen(
    this.setJobAddress, {
    Key? key,
  }) : super(key: key);

  @override
  State<SearchLocationScreen> createState() => _SearchLocationScreenState();
}

3. 保留按钮的正确调用逻辑 #

你写的按钮点击传参逻辑是正确的，继续保留：

ElevatedButton.icon(
  onPressed: () async {
    print('setting job location');
    widget.setJobAddress('TEXT'); // 正确传入参数
    Navigator.pop(context);
  },
  // ... 其他按钮配置项
)

4. 父组件函数补充类型标注（可选但推荐） #

给父组件的_setJobAddress加上类型标注，让代码更规范：

void _setJobAddress(String jobAddress) {
  setState(() {
    _jobAddress = jobAddress;
  });
}

完整修复后的子组件代码示例 #

class SearchLocationScreen extends StatefulWidget {
  final void Function(String) setJobAddress;

  const SearchLocationScreen(
    this.setJobAddress, {
    Key? key,
  }) : super(key: key);

  @override
  State<SearchLocationScreen> createState() => _SearchLocationScreenState();
}

class _SearchLocationScreenState extends State<SearchLocationScreen> {
  List<AutocompletePrediction> placePredictions = [];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 页面其他内容
      Padding(
        padding: const EdgeInsets.all(defaultPadding),
        child: ElevatedButton.icon(
          onPressed: () async {
            print('setting job location');
            widget.setJobAddress('TEXT');
            Navigator.pop(context);
          },
          icon: const Icon(Icons.home),
          label: const Text("Set job location"),
          style: ElevatedButton.styleFrom(
            backgroundColor: secondaryColor10LightTheme,
            foregroundColor: textColorLightTheme,
            elevation: 0,
            fixedSize: const Size(double.infinity, 40),
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),
        ),
      ),
    );
  }
}

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