performance - flutter 。具有高分辨率图像列表的高 GPU 负载

Question

当我尝试渲染来自网络且具有高分辨率的图像列表时，我已经开始学习 Flutter Framework 和高 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 中有一个 Unresolved 问题(请参阅 this github issue，特别是由此创建的三个问题的链接)。希望它能早日解决，因为更多人们一直在使用它，但我的印象是围绕如何正确处理高分辨率图像进行了大量的内部讨论，因为它需要一个灵活而强大的解决方案，适用于许多用例。我相信您看到的高 GPU 负载可能是将整组图像加载到 GPU 纹理缓冲区的结果，尽管如评论所述，您应该期望在真实设备和 Release模式下的性能有很大差异。

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