1

我正在尝试构建一个购物应用程序，我想在网格视图中显示产品列表。我使用的代码 -

Expanded(
    child: GridView.builder(
      cacheExtent: 999999,
      itemCount: itemData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: 1 / 1.5,
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.white,
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ItemView(itemData, index)),
              );
            },
            child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                Expanded(
                    child: CachedNetworkImage(
                  imageUrl: itemData[index][5],
                  placeholder: (context, url) => Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Image.asset("assets/images/background.png"),
                  ),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                )),
                SizedBox(
                  height: 7,
                ),
                Text(itemData[index][0],
                    style:
                        TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
                SizedBox(height: 3),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [Text("Wgt  :  "), Text("Crt    :  ")]),
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(itemData[index][2] + "g"),
                          Text(itemData[index][1]),
                        ])
                  ],
                ),
                SizedBox(
                  height: 5,
                ),
                itemData[index][3] == "0"
                    ? Text(
                        "Out of Stock",
                        style: TextStyle(color: Colors.red),
                      )
                    : Container(),
                SizedBox(
                  height: 5,
                ),
              ],
            ),
          ),
        );
      },
    ),
  )

每个图像大小范围为 200-300kb，itemData 长度可以从 50-100 项不等。

当我首先尝试滚动时，它会滞后，然后应用程序会自动关闭。

调试细节——

[        ] Reloaded 1 of 1140 libraries in 2,425ms.
[+29946 ms] W/InputEventReceiver(22092): Slow Input: took 293ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=471, seq=1167481,
action=ACTION_DOWN)
[+5360 ms] W/InputEventReceiver(22092): Slow Input: took 826ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=589, seq=1167805,
action=ACTION_DOWN)
[        ] W/InputEventReceiver(22092): Slow Input: 927ms so far, now at dispatchInputEvent (MotionEvent: event_seq=590, seq=1167827, action=ACTION_MOVE)
[        ] W/InputEventReceiver(22092): Slow Input: 918ms so far, now at dispatchInputEvent (MotionEvent: event_seq=591, seq=1167829, action=ACTION_UP)
[  +49 ms] W/InputEventReceiver(22092): Slow Input: 553ms so far, now at dispatchInputEvent (MotionEvent: event_seq=592, seq=1167832, action=ACTION_DOWN)
[        ] W/InputEventReceiver(22092): Slow Input: 462ms so far, now at dispatchInputEvent (MotionEvent: event_seq=593, seq=1167850, action=ACTION_MOVE)
[        ] W/InputEventReceiver(22092): Slow Input: 453ms so far, now at dispatchInputEvent (MotionEvent: event_seq=594, seq=1167852, action=ACTION_UP)
[+6824 ms] W/InputEventReceiver(22092): Slow Input: took 194ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=659, seq=1168024,
action=ACTION_DOWN)
[+2668 ms] W/InputEventReceiver(22092): Slow Input: took 322ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=662, seq=1168057,
action=ACTION_DOWN)
[ +973 ms] W/InputEventReceiver(22092): Slow Input: took 191ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=677, seq=1168143,
action=ACTION_DOWN)
[ +334 ms] W/InputEventReceiver(22092): Slow Input: took 104ms in dispatching, now at finishInputEvent (MotionEvent: event_seq=680, seq=1168180,
action=ACTION_DOWN)
[+2081 ms] Service protocol connection closed.
[        ] Lost connection to device.
[   +1 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[   +4 ms] Exit code 0 from: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[        ] 4b7746b70305 tcp:39351 tcp:45893
           4b7746b70305 tcp:37419 tcp:38492
           4b7746b70305 tcp:33427 tcp:42728
[   +1 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --remove tcp:39351
[   +6 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --remove tcp:37419
[   +5 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --remove tcp:33427
[   +7 ms] DevFS: Deleting filesystem on the device (file:///data/user/0/com.vriksh.ganpatijewellers/code_cache/ganpatijewellersGZZHJA/ganpatijewellers/)
[ +252 ms] Ignored error while cleaning up DevFS: TimeoutException after 0:00:00.250000: Future not completed
[  +10 ms] executing: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[   +8 ms] Exit code 0 from: /home/malay/Android/Sdk/platform-tools/adb -s 4b7746b70305 forward --list
[   +2 ms] "flutter run" took 227,027ms.
[ +256 ms] ensureAnalyticsSent: 252ms
[   +2 ms] Running shutdown hooks
[        ] Shutdown hooks complete
[        ] exiting with code 0

注意 - 对于调试，我使用物理设备 Redmi 6pro。我也在发布模式下对其进行了测试，我也面临同样的问题。

4

1 回答 1

0

在多次点击并尝试添加memCacheHeight: 400到 CachedNetworkImage 解决了这个问题后，我阅读了它并得出结论，这将调整内存中的图像大小以具有一定的高度，这减少了应用程序完成的大量工作并使其平滑而不会崩溃。

完整代码-

Expanded(
    child: GridView.builder(
      cacheExtent: 999999,
      itemCount: itemData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: 1 / 1.5,
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.white,
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ItemView(itemData, index)),
              );
            },
            child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                Expanded(
                    child: CachedNetworkImage(
                  imageUrl: itemData[index][5],
                  memCacheHeight: 400,     //this line
                  placeholder: (context, url) => Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Image.asset("assets/images/background.png"),
                  ),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                )),
                SizedBox(
                  height: 7,
                ),
                Text(itemData[index][0],
                    style:
                        TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
                SizedBox(height: 3),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [Text("Wgt  :  "), Text("Crt    :  ")]),
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(itemData[index][2] + "g"),
                          Text(itemData[index][1]),
                        ])
                  ],
                ),
                SizedBox(
                  height: 5,
                ),
                itemData[index][3] == "0"
                    ? Text(
                        "Out of Stock",
                        style: TextStyle(color: Colors.red),
                      )
                    : Container(),
                SizedBox(
                  height: 5,
                ),
              ],
            ),
          ),
        );
      },
    ),
  )
于 2021-08-07T07:59:59.437 回答