didChangeDependency 钩子和 precachImg 方法对于本地资产加载不友好

Question

我想在垂直滚动时在 PageView 中渲染多个图像 但图像即使拖到 pageView 也需要 4 到 6 秒

甚至访问堆栈溢出，但我看到结果听起来不太好 在我的 scanrio 中，当单个和单独的 img 案例工作正常并且没有 加载和再次拖动都需要时间 请帮我解决

List<String> imagesPaths = [
    'assets/images/darkImg.jpg',
    'assets/images/building.jpg',
    'assets/images/lights.jpg',
    'assets/images/mount.jpg',
    'assets/images/road2.jpg',
  ];
  List<AssetImage> assetImages = [];

  void precacheImages(BuildContext context) {

    for (String imagePath in imagesPaths) {
    
      AssetImage assetImage = AssetImage(imagePath);

      precacheImage(assetImage, context);
      assetImages.add(assetImage);
    }
  }

  @override
  void didChangeDependencies() {
    precacheImages(context);
    super.didChangeDependencies();
  }

Widget build(BuildContext context) {
    return Scaffold(
      body: _isLoading
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : PageView.builder(
              itemCount: quoteList.length,
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) {

                return Stack(
                  children: [
                    Image(
                      width: MediaQuery.of(context).size.width * 1,
                      height: MediaQuery.of(context).size.height * 1,
                      image: assetImages[index],
                      fit: BoxFit.cover,
                    ),
                 
                    Container(

                      padding: EdgeInsets.symmetric(horizontal: 12.0),
                      child: Center(
                        child: Text(
                          getCleanQuote(),
                          textAlign: TextAlign.center,
                          style: const TextStyle(
                              fontSize: 20,
                              color: Colors.white,
                              fontFamily: 'Poppins',
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),

Answer 1

使用这个包

preload_page_view: ^0.2.0

这将执行相同的任务，只需告诉您要预加载多少页面即可。这将防止一次加载所有图像，并减轻主线程的负担并在滑动时预加载图像。即使你不想使用这个包，然后在 pageChange 上使用 preCache 图像并仅加载接下来的 2 个图像，但这会增加你的工作量，所以只需使用上面的包。

以下是包的示例代码

 @override
  Widget build(BuildContext context) {
    return new PreloadPageView.builder(
     itemCount: quoteList.length,
              scrollDirection: Axis.vertical,
      itemBuilder: ...,
      onPageChanged: (int position) {...},
      .....
      preloadPagesCount: 3,
    );
  }

这将为您加载 3 个下一页。意思是总共4页