8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

返回上一页时图像不必要地重新加载

Ali Rehman 1月前

8 0

我的 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

帖子版权声明 1、本帖标题:返回上一页时图像不必要地重新加载
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Ali Rehman在本站《dart》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: