扑。具有高分辨率图像列表的高 GPU 负载

Question

当我尝试渲染来自网络并具有高分辨率的图像列表时，我已经开始学习 Flutter 框架和高 GPU 负载。

我已经在 github 上创建了用于演示的测试项目https://github.com/troublediehard/flutter_imageList_high_gpu_load

我做错了什么吗？有没有办法在渲染前优化图像？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image loading test'),
        ),
        body: buildLists(),
      ),
    );
  }

  Widget buildLists() {
    final imageUrls1 = [
      'https://via.placeholder.com/2000',
      'https://via.placeholder.com/2001',
      'https://via.placeholder.com/2002',
    ];
    final imageUrls2 = [
      'https://via.placeholder.com/2003',
      'https://via.placeholder.com/2004',
      'https://via.placeholder.com/2005',
    ];

    return Column(
      children: <Widget>[
        buildList(imageUrls1),
        buildList(imageUrls2),
      ],
    );
  }

  buildList(List<String> urls) {
    return Container(
      height: 150,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: urls.length,
          itemBuilder: (context, index) {
        return Image.network(
          urls[index],
          height: 130,
          width: 130,
        );
      }),
    );
  }
}

Answer 1

截至 2019 年 1 月中旬，Flutter 中有一个公开问题可以表征此问题（请参阅此 github 问题，特别是指向由此创建的三个问题的链接）。希望它早日得到解决，因为有更多的人遇到了它，但我的印象是关于如何正确处理高分辨率图像有很多内部讨论，因为它需要成为适用于许多用例的灵活而强大的解决方案。我相信您看到的高 GPU 负载可能是将整个图像集加载到 GPU 纹理缓冲区的结果，尽管正如评论所述，您应该期望在真实设备和发布模式下的性能会有很大差异。

Flutter 开发人员目前的建议是使用较低分辨率的图像（即设置您的服务器以提供缩略图）。虽然这是一个有点烦人的回应，但实际上你应该考虑这样做，因为当你下载高分辨率照片时，你 1) 使用带宽，2) 使用服务器内存/处理能力，以及 3) 使用额外的手机内存（即使图像在显示之前调整了大小，这仍然是正确的）。提供缩略图应该会带来更好的用户体验，即使这意味着分别下载低分辨率和高分辨率照片（例如，当用户点击缩略图时）。