Performance 颤振具有高分辨率图像列表的高GPU负载

我已经开始学习颤振框架和高GPU负载，当我试图呈现来自网络的高分辨率图像列表时

我已经在github上创建了用于演示的测试项目

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

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,
        );
      }),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：脚手架(
appBar:appBar(
标题：文本（“图像加载测试”），
),
正文：buildList（），
),
);
}
小部件构建列表（）{
最终图像URLS1=[
'https://via.placeholder.com/2000',
'https://via.placeholder.com/2001',
'https://via.placeholder.com/2002',
];
最终图像URLS2=[
'https://via.placeholder.com/2003',
'https://via.placeholder.com/2004',
'https://via.placeholder.com/2005',
];
返回列(
儿童：[
构建列表（imageUrls1），
构建列表（imageUrls2），
],
);
}
构建列表（列出URL）{
返回容器(
身高：150，
子项：ListView.builder(
滚动方向：轴水平，
itemCount:url.length，
itemBuilder：（上下文，索引）{
返回图像网络(
网址[索引]，
身高：130，
宽度：130，
);
}),
);
}
}

自2019年1月中旬起，《颤振》中有一个未决问题是该问题的特征（请特别参阅与由此产生的三个问题的链接）。希望它能尽快得到解决，因为越来越多的人已经接触到它，但我得到的印象是，内部有很多关于如何正确处理高分辨率图像的讨论，因为它需要一个灵活和健壮的解决方案，适用于许多使用情形。我相信您看到的高GPU负载可能是将整个图像集加载到GPU纹理缓冲区的结果，尽管有评论指出，您应该期望在实际设备和发布模式下有很大的性能差异

---

颤振开发者目前的建议是使用低分辨率图像（即，将服务器设置为提供缩略图）。虽然这是一个有点恼人的回答，但实际上你无论如何都应该考虑这样做，因为当你下载高分辨率照片时，你1）使用带宽，2）使用服务器内存/处理能力，3）使用额外的手机内存（即使图像在显示前已调整大小，这仍然是真的）。提供缩略图应该会带来更好的用户体验，即使这意味着低分辨率和高分辨率照片都是单独下载的（例如，当用户点击缩略图时）

性能覆盖的输出在调试模式或模拟器/仿真器上没有意义。在设备上以--profile模式运行以获得更具代表性的performance@JonahWilliams是的，它在发布模式下运行良好。根据Xcode profiler的说法，它不会产生显著的GPU负载。是的，它在iOS设备上的发布模式下工作正常。但是，对于这样简单的任务，在调试中有高负载是非常糟糕的开发人员经验。开发失效是颤振的关键特性之一，所以我希望它能被修复。