一个专注于 StreamBuilder 的小部件刷新整个屏幕

Question

我有这个小部件。

class YourStreamBuilder extends StatefulWidget {
  final String postId;
  const YourStreamBuilder({Key? key, required this.postId}) : super(key: key);

  @override
  State<YourStreamBuilder> createState() => _YourStreamBuilderState();
}

class _YourStreamBuilderState extends State<YourStreamBuilder> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<DocumentSnapshot>(
      stream: FirebaseFirestore.instance
          .collection('posts')
          .doc(widget.postId)
          .snapshots(),
      builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const SizedBox();
        }

        if (snapshot.hasError) {
          return Center(
            child: Text('Error: ${snapshot.error}'),
          );
        }

        int likesCount = snapshot.data!['likes'].length;

        bool isLiked = false;

        //check user liked or not

        isLiked = (snapshot.data!.data() as Map<String, dynamic>)['likes']
            .contains(FirebaseAuth.instance.currentUser!.uid);

        return Column(
          children: [
            GestureDetector(
              onTap: () async {
                await StatusScreenBackend()
                    .addorRemoveLike(widget.postId, isLiked);
              },
              child: isLiked
                  ? SvgPicture.asset(
                      'assets/icons/filling.svg',
                      key: ValueKey<bool>(isLiked),
                      semanticsLabel: 'Acme Logo',
                      color: Colors.red,
                      height: 35,
                    )
                  : SvgPicture.asset(
                      'assets/icons/like_icon.svg',
                      key: ValueKey<bool>(isLiked),
                      semanticsLabel: 'Acme Logo',
                      color: Colors.white,
                      height: 35,
                    ),
            ),

            // SvgToggleWidget(postId: postId, isLiked: isLiked),
            CustomText(
              size: 16,
              text: likesCount.toString(),
              textColor: Colors.white,
            ),
          ],
        );
      },
    );
  }
}

我从主屏幕调用它，就像这样（在专栏中）

YourStreamBuilder(postId: firstsnapshot.docs[index].data()['postId']),

像这样

---

工作正常；但是，当触摸时，它会刷新整个页面。我希望它仅刷新该特定项目（“赞”按钮颜色）和“赞”数量。在我的主屏幕上，还有其他 FutureBuilders 和 Stream Builders。

Answer 1

您可以将特定的小部件包装在 RepaintBoundary() 中。这可以防止小部件树的其他部分重新渲染。