[Bug report] AnchorList 有时候锚点对不准，有时候准

[8baba]

Version

1.25.1

Platforms

iOS

Device Model

15 promax

flutter info

[✓] Flutter (Channel stable, 3.29.0, on macOS 15.1.1 24B91 darwin-arm64, locale zh-Hans-CN) [532ms]
    • Flutter version 3.29.0 on channel stable at /Users/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35c388afb5 (3 weeks ago), 2025-02-10 12:48:41 -0800
    • Engine revision f73bfc4522
    • Dart version 3.7.0
    • DevTools version 2.42.2

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [533ms]
    • Android SDK at /Users/leo/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[!] Xcode - develop for iOS and macOS (Xcode 16.2) [1,485ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    ! CocoaPods 1.16.0 out of date (1.16.2 is recommended).
        CocoaPods is a package manager for iOS or macOS platform code.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/to/platform-plugins
      To update CocoaPods, see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods

[✓] Chrome - develop for the web [129ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed) [129ms]
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1.5) [129ms]
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 83.0.2
    • Dart plugin version 241.18968.26

[✓] Connected device (4 available) [5.9s]
    • 刘刚的iPhone (mobile)              • 00008130-001E48923CD8001C • ios            • iOS 18.3.1 22D72
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 15.1.1 24B91 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 15.1.1 24B91 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 133.0.6943.142

[✓] Network resources [4.0s]
    • All expected network resources are available.

! Doctor found issues in 3 categories.

How to reproduce?

问题：AnchorList 有时候锚点对不准，有时候准，请看视频, 请尽快修复这个问题
https://github.com/user-attachments/assets/bc2defa7-e2f0-44b4-ab56-c1ba2965e5c4

Logs

Example code (optional)

/*
 * @Author: LinXunFeng [email protected]
 * @Repo: https://github.com/LinXunFeng/flutter_scrollview_observer
 * @Date: 2022-08-08 00:20:03
 */
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

class AnchorListPage extends StatefulWidget {
  const AnchorListPage({Key? key}) : super(key: key);

  @override
  State<AnchorListPage> createState() => _AnchorListPageState();
}

class _AnchorListPageState extends State<AnchorListPage>
    with SingleTickerProviderStateMixin {
  ScrollController scrollController = ScrollController();

  late ListObserverController observerController;
  late TabController _tabController;
  List<String> tabs = List.generate(100, (index) => index.toString());

  List<int> tabIndexs = List.generate(100, (index) => index);

  @override
  void initState() {
    super.initState();
    observerController = ListObserverController(controller: scrollController);
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  void dispose() {
    observerController.controller?.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Anchor ListView"),
        bottom: PreferredSize(
          preferredSize: const Size(double.infinity, 44),
          child: TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: tabs.map((e) => Tab(text: e)).toList(),
            onTap: (index) {
              print(index);
              print(tabIndexs[index]);
              observerController.animateTo(
                index: tabIndexs[index],
                duration: const Duration(milliseconds: 500),
                curve: Curves.ease,
              );
            },
          ),
        ),
      ),
      body: ListViewObserver(
        controller: observerController,
        child: _buildListView(),
        onObserve: (resultModel) {
          _tabController.index = ObserverUtils.calcAnchorTabIndex(
            observeModel: resultModel,
            tabIndexs: tabIndexs,
            currentTabIndex: _tabController.index,
          );
          print( _tabController.index);
        },
      ),
    );
  }

  ListView _buildListView() {
    return ListView.separated(
      controller: scrollController,
      itemBuilder: (ctx, index) {
        return _buildListItemView(index);
      },
      separatorBuilder: (ctx, index) {
        return _buildSeparatorView();
      },
      itemCount: 100,
    );
  }

  Widget _buildListItemView(int index) {
    return Container(
      height: 50.0 + Random().nextInt(50),
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(
        child: Text(
          "index -- $index",
          style: const TextStyle(
            color: Colors.black,
          ),
        ),
      ),
    );
  }

  Container _buildSeparatorView() {
    return Container(
      color: Colors.white,
      height: 0,
    );
  }
}

Contact

No response

[LinXunFeng]

你的 item 的高度是一直在变化的

  Widget _buildListItemView(int index) {
    final height = 50.0 + Random().nextInt(50);
    print('height -- $height - $index');
    return Container(
      height: height,
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(
        child: Text(
          "index -- $index",
          style: const TextStyle(
            color: Colors.black,
          ),
        ),
      ),
    );
  }

这种情况下缓存不适用，需要关闭

observerController = ListObserverController(controller: scrollController)
      ..cacheJumpIndexOffset = false;

[8baba]

试了一下，可以了，感谢🙏

[8baba]

再次请教一个问题， 为什么每次滑动一个区域会触发两次 onObserve？ 是这种机制吗？

[LinXunFeng]

正常，具体触发时机看文档：triggerOnObserveType 参数