在列表视图中滚动时图像消失答案

【问题标题】：Images disappearing when scrolling in listview flutter在列表视图中滚动时图像消失
【发布时间】：2020-02-04 01:49:43
【问题描述】：

我正在用 Flutter 开发一个新应用，但是当有一些图像比屏幕高时，图像就会消失。

我正在使用最新版本的 Flutter/Dart。我尝试将 cacheExtent 添加到 ListView，但没有任何改变。扑医生：

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.9.1+hotfix.4, on Microsoft Windows [Versione 10.0.18362.356], locale it-IT)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.38.1)
[√] Connected device (1 available)

• No issues found!

@override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    super.build(context);
    return ListView(
      children: <Widget>[
        Image.network('https://wallpaperaccess.com/full/11740.jpg', width: width, height: width, fit: BoxFit.cover,),
        Image.network('https://wallpaperaccess.com/full/11740.jpg', width: width, height: width, fit: BoxFit.cover,),
        Image.network('https://wallpaperaccess.com/full/11740.jpg', width: width, height: width, fit: BoxFit.cover,),
...
      ],
    );
  }

Preview

【问题讨论】：

添加一些截图。代码工作正常。我什至加载了一个很长的图像。它按预期工作。
好的，我加了。

标签： flutter dart

【解决方案1】：

您可以： 1 > 将图像小部件包装在另一个小部件中（例如容器） 2 > 使用 ListView.builder 并将 listView 包装在容器或您喜欢的一些 Widget 中。

【讨论】：

所以尝试替换每个 ListTile 的 ListView，

【解决方案2】：

您可以使用BoxFit.fill，它将根据您的手机尺寸加载您的图像要么只给 double.infinity 宽度并将高度参数留空

【讨论】：

我需要图片是正方形的
你可以清空高度参数，然后应用 Box.fill 就可以了
并将您的 ListView 包装在容器中并提供静态高度和宽度

【解决方案3】：

return Scaffold(
      body: Container(
   width: MediaQuery.of(context).size.width,
   height: MediaQuery.of(context).size.height,
   child: ListView(
       children: Widget[
          Container(
            width: 300,
            height:300,
            child: Image(
               image: NetworkImage("your networkd image here"),
               fit: BoxFit.fitWidth
            )
         )
      ]
   )
)
    );

随心所欲:)

【讨论】：

Widget build(BuildContext context){ 在这里添加我的代码 }
我知道如何在 Flutter 中开发?

【解决方案4】：

我在 GitHub 上的颤振 repo 上提出了一个问题。该bug尚未修复，关注issuehere

【讨论】：

【解决方案5】：

在Listview、Gridview和CustomScrollView中使用cacheExtent值为9999

ListView.builder(
    cacheExtent: 9999,
}

【讨论】：