Flutter中如何在SingleChildScrollView内动态定位组件并实现位移动画

你的核心问题是混淆了屏幕全局坐标与Stack内部相对坐标的定位逻辑：

• localToGlobal获取的是组件在屏幕上的绝对位置，但AnimatedPositioned的top属性是相对于Stack自身顶部的相对位置，而非屏幕。当SingleChildScrollView滚动时，屏幕坐标会随滚动偏移变化，但Stack内部组件的相对位置是固定的，导致绿色容器定位偏差。
• 用GlobalKey动态获取位置属于冗余操作，你的红/蓝容器在Stack内的相对位置是固定的，可直接计算得出。

根据布局场景分为两种实现方式：

场景1：静态固定布局（高度已知） #

直接使用红/蓝容器在Stack内的固定相对位置，无需动态获取坐标，代码更简洁高效：

import 'package:flutter/material.dart';

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool move = false;
  double? _topPosition;

  // 红/蓝容器在Stack内的固定相对位置
  final double redContainerTop = 0;
  final double blueContainerTop = 50 + 700; // 红容器高度 + 中间占位容器高度

  final _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _topPosition = redContainerTop; // 初始定位到红容器
  }

  // 滚动到目标容器位置
  void _scrollToTarget() {
    final targetPosition = move ? redContainerTop : blueContainerTop;
    _scrollController.animateTo(
      targetPosition,
      duration: const Duration(milliseconds: 500),
      curve: Curves.linear,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Stack(
          children: [
            Column(
              children: [
                Container(
                  color: Colors.red,
                  height: 50,
                  width: MediaQuery.of(context).size.width,
                ),
                Container(height: 700),
                Container(
                  color: Colors.blue,
                  height: 50,
                  width: MediaQuery.of(context).size.width,
                ),
              ],
            ),
            if (_topPosition != null)
              AnimatedPositioned(
                top: _topPosition,
                duration: const Duration(seconds: 1),
                child: Container(
                  color: Colors.green,
                  height: 50,
                  width: MediaQuery.of(context).size.width,
                ),
              ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            move = !move;
            _topPosition = move ? redContainerTop : blueContainerTop;
          });
          _scrollToTarget();
        },
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

场景2：动态布局（高度未知） #

如果红/蓝容器高度不固定，无法提前计算相对位置，可通过GlobalKey计算目标容器相对于Stack的相对坐标，而非屏幕全局坐标：

import 'package:flutter/material.dart';

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool move = false;
  double? _topPosition;

  final GlobalKey redContainerKey = GlobalKey();
  final GlobalKey blueContainerKey = GlobalKey();
  final GlobalKey stackKey = GlobalKey(); // Stack的全局Key
  final _scrollController = ScrollController();

  // 计算目标容器相对于Stack的相对位置
  Offset _getRelativePosition(GlobalKey targetKey) {
    final targetRenderBox = targetKey.currentContext!.findRenderObject() as RenderBox;
    final stackRenderBox = stackKey.currentContext!.findRenderObject() as RenderBox;
    return targetRenderBox.localToGlobal(Offset.zero, ancestor: stackRenderBox);
  }

  void _updateGreenPosition() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final targetKey = move ? redContainerKey : blueContainerKey;
      final relativePos = _getRelativePosition(targetKey);
      setState(() {
        _topPosition = relativePos.dy;
      });
    });
  }

  void _scrollToTarget() {
    final targetKey = move ? redContainerKey : blueContainerKey;
    final targetRenderBox = targetKey.currentContext!.findRenderObject() as RenderBox;
    final targetOffset = targetRenderBox.localToGlobal(Offset.zero).dy - MediaQuery.of(context).padding.top - kToolbarHeight;
    
    _scrollController.animateTo(
      _scrollController.offset + targetOffset,
      duration: const Duration(milliseconds: 500),
      curve: Curves.linear,
    );
  }

  @override
  void initState() {
    super.initState();
    _updateGreenPosition();
    // 监听滚动，手动滚动时同步更新绿色容器位置
    _scrollController.addListener(_updateGreenPosition);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Stack(
          key: stackKey,
          children: [
            Column(
              children: [
                Container(
                  key: redContainerKey,
                  color: Colors.red,
                  height: 50,
                  width: MediaQuery.of(context).size.width,
                ),
                Container(height: 700),
                Container(
                  key: blueContainerKey,
                  color: Colors.blue,
                  height: 50,
                  width: MediaQuery.of(context).size.width,
                ),
              ],
            ),
            if (_topPosition != null)
              AnimatedPositioned(
                top: _topPosition,
                duration: const Duration(seconds: 1),
                child: Container(
                  color: Colors.green,
                  height: 50,
                  width: MediaQuery.of(context).size.width,
                ),
              ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            move = !move;
          });
          _updateGreenPosition();
          _scrollToTarget();
        },
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

1. 坐标体系对齐：确保AnimatedPositioned的top值使用Stack内部相对坐标，而非屏幕全局坐标。
2. 冗余代码移除：静态布局下直接使用固定位置，避免不必要的GlobalKey和异步回调。
3. 滚动同步处理：动态布局下监听滚动事件，实时更新绿色容器的相对位置，保证滚动时始终覆盖目标容器。

内容的提问来源于stack exchange，提问作者deandrehaijiel