我的 Flutter 应用中有两个页面：一个 NewsTile 页面，显示新闻标题列表；另一个 ReadDetails 页面，显示所选新闻项目的完整详细信息。每个 NewsTile 都包含一个小图像...

我的 Flutter 应用中有两个页面：一个 NewsTile 页面显示新闻图块列表，另一个 ReadDetails 页面显示所选新闻的完整详情。每个页面都 NewsTile 包含新闻的小图片，而 ReadDetails 页面显示同一张图片的较大版本。

我使用 Hero 和 NewsTile 之间过渡 ReadDetails 。向前导航时过渡效果很好。但是，当我使用 Get.back() （从 GetX） 或 Navigator.pop(context) ，会出现以下问题：

• All the images in the NewsTile list are reloaded ，除了 Hero 动画中涉及的图片（用户单击以导航到详细信息页面的图块）。该图片保持其之前的状态并且不会刷新。

主页

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

  @override
  Widget build(BuildContext context) {
    var dataCtrl = Get.find<DataController>();
    var ctrl = Get.find<MyController>();
    var dummyData = [NewsList(newsData: dataCtrl.dummyNewsData)];
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerTop,
      floatingActionButton: const GoToTop(),
      body: Obx(
        () {
          var topStories = dataCtrl.isDataLoaded.value
              ? dataCtrl.topStories.value.data!.newsList!
              : dummyData;
          var trendingNews = dataCtrl.isDataLoaded.value
              ? dataCtrl.trendingNews.value.data!.newsList!
              : dummyData;
          return Skeletonizer(
            enableSwitchAnimation: true,
            enabled: !dataCtrl.isDataLoaded.value,
            child: SingleChildScrollView(
              controller: ctrl.scrollController.value,
              child: Column(
                children: [
                  SectionDivider(title: 'Featured', onSeeAll: () {}),
                  FeaturedCard(newsList: topStories),
                  const SizedBox(height: 15),
                  SectionDivider(title: 'News', onSeeAll: () {}),
                  const SizedBox(height: 10),
                  const TopicsChip(),
                  const SizedBox(height: 16),
                  //* First page being called from here*//
                  //****//
                  const NewsTile(newsList: trendingNews),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

第 1 页 带有 getx 状态管理的无状态小部件

ListView.builder(
shrinkWrap: true,
itemCount: trendingNews.length,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return nkWell(
    onTap: () => Get.to(ReadDetails(newsData: newsData)),
    child: Hero(
      tag: '${newsData.imageUrl!}as image tag',
      child: ClipRRect(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(20),
          bottomLeft: Radius.circular(20),
        ),
        child: CachedNetworkImage(
          cacheKey: newsData.imageUrl,
          width: constraints.maxWidth * 0.4,
          height: constraints.maxHeight,
          placeholder: (_, __) => const MyShimmer(),
          errorWidget: (_, __, er) => const Icon(Icons.error),
          imageUrl: newsData.imageUrl!,
          fit: BoxFit.cover,
        ),
      ),
    ),
  );
 },
);

第 2 页 也是一个使用 getx 状态管理的无状态小部件

Stack(
    children: [
      Hero(
        tag: '${newsData.imageUrl!}as image tag',
        child: ClipRRect(
          borderRadius: BorderRadius.circular(15),
          child: CachedNetworkImage(
            height: Get.size.height / 2.5,
            cacheKey: newsData.imageUrl!,
            imageUrl: newsData.imageUrl!,
            placeholder: (_, __) => const MyShimmer(),
            errorWidget: (_, __, er) => const Icon(Icons.error),
            width: Get.size.width,
            fit: BoxFit.cover,
          ),
        ),
      ),
      Positioned(
        top: 4,
        left: 8,
        child: FloatingIconButton(
          onTap: () => Get.back(),
          icon: Icons.arrow_back_ios_new,
        ).animate().slide(delay: Durations.medium4),
      ),
    ],
  );

我尝试过的：

1. p6

2. p7

3. p8