如何缓存GirdView的子组件?

Question

想让MusiclistBox在跳转到其他路由再返回之后不被重新构建

 Obx(() => RefreshIndicator(
          onRefresh: controller.onRefresh,
          child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  mainAxisSpacing: 10,
                  childAspectRatio: 0.8),
              controller: controller.scrollController,
              itemCount: controller.musiclist.length,
              itemBuilder: (BuildContext context, int index) => GestureDetector(
                  onTap: () => Get.toNamed(Routes.MUSICLIST,
                      arguments: controller.musiclist[index]['id']),
                  child: MusiclistBox(
                      picUrl: controller.musiclist[index]['cover_img_url'],
                      title: controller.musiclist[index]['title'])))))

class MusiclistBox extends StatefulWidget {
  final String picUrl;
  final String title;
  const MusiclistBox({required this.picUrl, required this.title, super.key});

  @override
  State<MusiclistBox> createState() => _MusiclistBoxState();
}

class _MusiclistBoxState extends State<MusiclistBox>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(children: [
      Container(
          height: 100,
          width: 100,
          child: Image(image: CachedNetworkImageProvider(widget.picUrl))),
      Container(
        width: 100,
        child: Text(
          widget.title,
          style: const TextStyle(fontSize: 13),
        ),
      )
    ]);
  }

  @override
  bool get wantKeepAlive => true;
}

尝试使用更改KeepAlive的方法，但跳转路由后仍会重新构建