加载页面时图像的 ListView 冻结

Question

我有一个图像列表，其中只有两个在 ContrainedBox 小部件内的卡片小部件中。我想补充更多。当我单击并加载页面时，应用程序会冻结。

这是我的小部件

 @override
  Widget build(BuildContext context) {
    return DevScaffold(
      title: "Team",
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: teams.length,
        itemBuilder: (BuildContext context, int index) {
        return Card(
            elevation: 0.0,
            child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ConstrainedBox(
                      constraints: BoxConstraints.expand(
                        height: MediaQuery.of(context).size.height * 0.2,
                        width: MediaQuery.of(context).size.width * 0.3,
                      ),
                      child: CachedNetworkImage(
                        fit: BoxFit.cover,
                        imageUrl: teams[index].image,
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    ),...

这是我的数据类：

List<Sponsor> sponsors = [
  Sponsor(
    name: "Google Developer Groups",
    image: "https://devfestflorida.org/images/logos/gdg-logo-new.svg",
    desc: "Platinum Sponsor",
    url: 'https://developers.google.com/community/gdg/',
  ),
  Sponsor(
    name: "Neoware Studios",
    image: "https://devfestflorida.org/images/logos/STUDIOSLOGO_WITHTM.png",
    desc: "Platinum Sponsor",
    url: 'https://www.neowarestudios.com/',
  ),
];...

在有意义的事情的颤振方面没有抛出真正的异常，但这是日志：

C:\Users\javier.carrion\OneDrive\CodeVista\TechEvents\DevFest\DevFest2019Nov\devfestcenfl\devfestcenfl>flutter analyze
Analyzing devfestcenfl...
No issues found! (ran in 17.4s)

C:\Users\javier.carrion\OneDrive\CodeVista\TechEvents\DevFest\DevFest2019Nov\devfestcenfl\devfestcenfl>
C:\Users\javier.carrion\OneDrive\CodeVista\TechEvents\DevFest\DevFest2019Nov\devfestcenfl\devfestcenfl>
C:\Users\javier.carrion\OneDrive\CodeVista\TechEvents\DevFest\DevFest2019Nov\devfestcenfl\devfestcenfl>
C:\Users\javier.carrion\OneDrive\CodeVista\TechEvents\DevFest\DevFest2019Nov\devfestcenfl\devfestcenfl>

颤振医生：

[√] Flutter (Channel stable, v1.9.1+hotfix.5, on Microsoft Windows [Version 10.0.16299.1087], locale en-US)
    • Flutter version 1.9.1+hotfix.5 at C:\src\flutter
    • Framework revision 1aedbb1835 (13 days ago), 2019-10-17 08:37:27 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\javier.carrion\AppData\Local\Android\Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio1\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[√] Android Studio (version 3.4)
    • Android Studio at C:\Program Files\Android\Android Studio1
    • Flutter plugin version 35.3.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[√] VS Code, 64-bit edition (version 1.39.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.5.1

[√] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)

• No issues found!

Answer 1

如 cmets 所示，CachedNetworkImage 不会呈现 svg。 Flutter 不支持 SVG，但是您可以使用提供支持的包，例如 flutter_svg。

这里有更多关于svg支持的信息