Flutter跨页面调用setState不生效问题的排查与解决

核心问题 #

你在CustomIcon组件的Navigator.pushNamed的then回调里，仅引用了callback函数但未实际调用，导致HomeScreen中的setState根本没执行，自然不会触发页面重建。

修复步骤 #

1. 修正CustomIcon的回调调用逻辑 #

把widget.callback!改为widget.callback?.call()（或widget.callback!()，前者更安全），确保函数被执行：

@override
Widget build(BuildContext context) {
  return InkWell(
    onTap: () {
      Future future;
      if (widget.arguments != null) {
        future = Navigator.pushNamed(
          context,
          widget.functionRoute!,
          arguments: widget.arguments,
        );
      } else {
        future = Navigator.pushNamed(context, widget.functionRoute!);
      }
      future.then((value) {
        // 调用回调函数，而非仅引用
        widget.callback?.call();
      });
    },
    // 其余代码不变
  );
}

2. 优化代码健壮性与简洁性 #

可以进一步完善参数类型和逻辑，减少冗余：

• 给callback指定明确的VoidCallback?类型，避免动态类型隐患
• 简化Navigator调用逻辑，移除重复代码

修改后的CustomIcon完整代码：

class CustomIcon extends StatefulWidget {
  final String iconPath;
  final String iconLabel;
  final String iconTitle;
  final WidgetRef? ref;
  final String? functionRoute;
  final dynamic arguments;
  final VoidCallback? callback; // 明确类型为VoidCallback

  CustomIcon({
    Key? key,
    this.ref,
    required this.iconLabel,
    required this.iconPath,
    required this.iconTitle,
    this.callback,
    this.arguments,
    // 移除未使用的onPressed参数
  }) : super(key: key);

  @override
  State<CustomIcon> createState() => _CustomIconState();
}

class _CustomIconState extends State<CustomIcon> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.pushNamed(
          context,
          widget.functionRoute!,
          arguments: widget.arguments,
        ).then((value) {
          widget.callback?.call();
        });
      },
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: kHeader2,
              borderRadius: BorderRadius.circular(15),
            ),
            child: SvgPicture.asset(
              widget.iconPath,
              color: Colors.white,
              semanticsLabel: widget.iconLabel,
              height: 100,
              width: 100,
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text(
              widget.iconTitle,
              style: const TextStyle(fontSize: 25),
            ),
          )
        ],
      ),
    );
  }
}

额外说明 #

• widget.callback?.call()比widget.callback!()更安全，可避免callback为null时触发空指针异常
• 若需从跳转页面返回数据并更新状态，可将callback类型改为Function(dynamic value)?，在then中传入value参数

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