Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
HandwerSTD opened this issue Dec 6, 2023 · 3 comments

Comments

@HandwerSTD
Copy link

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
Copy link
Member

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

@qiaodongliang
Copy link

qiaodongliang commented Apr 18, 2024

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

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

@zmtzawqlp
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants