滚动时堆栈位置不准确

Question

这个问题和这个post有关。

为什么当我滚动到底部时，点位置显示错误，但是当我滚动到顶部时，它可以工作？

代码

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),
        )),
      ),
    );
  }
}

闪烁点

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();
  }
}

Answer 1

你用 ScrollView 包裹了视图，这意味着当你滚动视图时 dy 的值也会改变。

如何获得相对于滚动位置的确切位置？

只需将globalPosition 更改为localPosition 并从计算表达式中删除额外的填充值。

给你。

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