Flutter LikeButton组件是否存在无限递归？如何修复？

你的代码确实存在无限递归问题，同时结构设计不合理，具体原因和修复方案如下：

问题根源 #

你在LikeButton的create()方法中，将新的LikeButton实例作为BlocProvider的child。当你调用LikeButton(postId: post.id).create()时，会生成一个包裹了新LikeButton的BlocProvider；如果组件树发生重建，这个过程会被重复触发，陷入create() → 新LikeButton → create()的无限循环，最终导致栈溢出。

此外，当前设计违反单一职责原则：LikeButton既要负责UI渲染，又要负责创建和提供LikeCubit，耦合度过高，不利于后续维护。

修复方案（推荐拆分组件） #

将Bloc提供逻辑与UI渲染逻辑拆分为两个独立组件，实现职责分离：

1. 纯UI组件：LikeButton #

专注于渲染按钮和状态展示，依赖上层提供的LikeCubit：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'like_cubit.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<LikeCubit, LikeState>(
      builder: (context, state) {
        return Row(
          children: [
            IconButton(
              icon: Icon(
                state.isLiked ? Icons.favorite : Icons.favorite_border,
                color: state.isLiked ? Colors.pink : Colors.white,
              ),
              onPressed: () => context.read<LikeCubit>().toggleLike(),
            ),
            Text(
              state.likes.toString(),
              style: const TextStyle(
                color: Colors.white,
              ),
            ),
          ],
        );
      },
    );
  }
}

2. Bloc提供组件：LikeButtonWithProvider #

负责创建并提供LikeCubit，作为LikeButton的上层包裹：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'like_cubit.dart';
import 'like_button.dart';

class LikeButtonWithProvider extends StatelessWidget {
  const LikeButtonWithProvider({required this.postId, super.key});
  final String postId;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => LikeCubit(postId: postId),
      child: const LikeButton(),
    );
  }
}

3. 调用方式（main.dart中） #

LikeButtonWithProvider(postId: post.id)

其他临时修复方案（不推荐） #

如果不想拆分组件，可临时修改create()方法，直接返回包裹当前组件build结果的BlocProvider，但这种方式不符合Flutter组件生命周期规范，可能引发其他问题：

Widget create() {
  return BlocProvider(
    create: (_) => LikeCubit(postId: postId),
    child: Builder(
      builder: (context) => build(context),
    ),
  );
}

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