Stack position inaccurate when scroll

问题

This question is related to this post.

Why when I scroll to bottom, the dot position displayed wrongly, but when I scroll until top, it works?

Code

import 'package:flutter/material.dart';

import 'blinking_dot.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  double posx;
  double posy;

  void onTapDown(BuildContext context, TapDownDetails details) {
    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(details.globalPosition);
    setState(() {
      posx = localOffset.dx - 7.5;
      posy = localOffset.dy -
          MediaQuery.of(context).padding.top -
          kToolbarHeight -
          7.5;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SingleChildScrollView(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
              Stack(
                children: <Widget>[
                  GestureDetector(
                      onTapDown: (TapDownDetails details) =>
                          onTapDown(context, details),
                      child: Container(
                          height: 300,
                          width: 400,
                          child: Image.asset("assets/no_image.png"))),
                  Positioned(
                    child: BlinkingDot(),
                    left: posx,
                    top: posy,
                  )
                ],
              ),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
            ])));
  }

  Widget _showTitle() {
    return TextField(
      style: TextStyle(fontSize: 12.0),
      decoration: InputDecoration(
        border: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
          const Radius.circular(5.0),
        )),
      ),
    );
  }
}

BlinkingDot

import 'package:flutter/material.dart';

class BlinkingDot extends StatefulWidget {
  @override
  _BlinkingDotState createState() => _BlinkingDotState();
}

class _BlinkingDotState extends State<BlinkingDot>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 1));
    _animationController.repeat();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
        opacity: _animationController,
        child: Container(
            height: 15,
            width: 15,
            child: FloatingActionButton(
              backgroundColor: Colors.redAccent,
            )));
  }

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

回答1:

You wrapped the view with a ScrollView, that means the dy value will also change when you scroll the view.

How to get the exact position with respect to the scrolled position?

Simply change globalPosition to localPosition and remove extra padding values from the calculation expression.

Here you go.

    box.globalToLocal(details.localPosition);
    setState(() {
      posx = localOffset.dx - 7.5;
      posy = localOffset.dy - 7.5;
    });
  }

来源：https://stackoverflow.com/questions/60568203/stack-position-inaccurate-when-scroll