[Bug report] 下滑一段距离后再上滑，页面发生重新布局导致组件乱跳

[HandwerSTD]

Version

3.0.3

Platforms

Android

Device Model

Pixel 3a API 34

flutter info

[√] Flutter (Channel stable, 3.16.2, on Microsoft Windows [版本 10.0.22621.2715], locale zh-CN)
    • Flutter version 3.16.2 on channel stable at D:\AndroidDev\FlutterSDK\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9e1c857886 (6 days ago), 2023-11-30 11:51:18 -0600
    • Engine revision cf7a9d0800
    • Dart version 3.2.2
    • DevTools version 2.28.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at D:\AndroidDev\SDK
    • Platform android-34, build-tools 34.0.0
    • Java binary at: D:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
    • All Android licenses accepted.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2022.3)
    • Android Studio at D:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)

[√] VS Code (version 1.84.2)
    • VS Code at C:\Users\handw\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 14 (API 34) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [版本 10.0.22621.2715]
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 119.0.2151.93

[!] Network resources                   
    X A cryptographic error occurred while checking "https://pub.dev/": Connection terminated during handshake
      You may be experiencing a man-in-the-middle attack, your network may be compromised, or you may have malware installed on your computer.
    X A network error occurred while checking "https://maven.google.com/": 信号灯超时时间已到


! Doctor found issues in 3 categories.

How to reproduce?

单个组件是一个套了好几层的 CachedNetworkImage，用一个 List.generate 生成 Waterflow 的 children 数组，下滑一段距离让上面的组件回收掉，然后再上滑让上面的组件重新加载，会出现重新布局、组件乱跳的情况

Logs

No response

Example code (optional)

class _ShortVideoWaterfallPageState extends State<ShortVideoWaterfallPage> {
  List<VideoDataModel> sttVideoList = [];
  ScrollController wfController = ScrollController();

  @override
  void initState() {
    super.initState();
    sttVideoList = widget.videoList;

    wfController.addListener(() {
      if (wfController.position.pixels ==
          wfController.position.maxScrollExtent) {
        widget.loadMoreContent(); // 到底部加载新内容
      }
    });
  }

  @override
  Widget build(BuildContext context) { // 构建 Widget
    return Padding(
      padding: const EdgeInsets.only(left: 5, right: 5),
      child: WaterfallFlow.count( // 瀑布流
        crossAxisCount: 2,
        controller: wfController,
        children: List.generate(sttVideoList.length,
            (index) => gridVideoBlock(sttVideoList[index])), // 用 List.generate 生成 children[]，每个组件是 gridVideoBlock
      ),
    );
  }

  Widget gridVideoBlock(VideoDataModel video) { // 单个组件
    return Column(
      children: [
        GestureDetector(
          // ...
          child: Column(
            children: [
              Padding(
                // ...
                child: CachedNetworkImage( 
                  imageUrl: video.videoImageLink,
                  placeholder: (context, url) => const Center(
                    child: CircularProgressIndicator(),
                  ),
                  errorWidget: (context, url, error) => const Icon(Icons.error),
                ),
              ),
              // ...
            ],
          ),
        )
      ],
    );
  }
}

Contact

No response

[zmtzawqlp]

自己保持下 加载之后图片的宽高比，下次直接设置。你不设置。就是根据图片加载之后的宽高比来的

[qiaodongliang]

自己保持下 加载之后图片的宽高比，下次直接设置。你不设置。就是根据图片加载之后的宽高比来的

@zmtzawqlp 即使没有图片，只Container，通过AspectRatio控制宽高比，依旧会出现组件乱跳的情况。尤其是在左右两侧高度接近或者几乎相同的情况下。

[zmtzawqlp]

请提供一个可以重现的最小例子