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中有一个公开的问题可以作为该问题的特征（请参阅this github issue，特别是从中创建的三个问题的链接）。希望早日解决，随着越来越多的人参与其中，但是我给人的印象是，围绕如何正确处理高分辨率图像进行了很多内部讨论，因为它需要一个灵活而强大的解决方案，并且适用于许多用例。我相信您看到的GPU高负载可能是将整个图像集加载到GPU纹理缓冲区中的结果，尽管正如评论所言，您应该期望真实设备和发布模式下的性能差异很大。

Flutter开发人员当前的建议是使用较低分辨率的图像（即，将服务器设置为提供缩略图）。虽然这是一个令人讨厌的响应，但实际上无论如何，您都应该考虑做一下事情，例如，下载高分辨率照片时，您是1）使用带宽，2）使用服务器内存/处理能力以及3）使用其他手机内存（即使在显示图像之前调整了图像的大小也是如此）。提供缩略图应能带来更好的用户体验，即使这意味着低分辨率和高分辨率照片都分别下载（例如，当用户点击缩略图时）。

扑。高GPU负载以及高分辨率图像列表

1 个答案: