堆栈位置不准确 [英] Stack position not accurate

问题描述

我想在点击容器时在容器上添加红色的闪烁点，但是点位置不正确.如何解决?

I want to add red blinking dot on the container when it is tapped, but the dot position is not accurate. How to fix?

MyApp

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) {
    print('${details.globalPosition}');
    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(details.globalPosition);
    setState(() {
      posx = localOffset.dx;
      posy = localOffset.dy;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: GestureDetector(
            onTapDown: (TapDownDetails details) => onTapDown(context, details),
            child: Stack(
              children: <Widget>[
                Container(
                  height: double.infinity,width: double.infinity,
                    padding: EdgeInsets.all(10),
                    child: Image.asset("assets/img.jpg")),
                Positioned(
                  child: BlinkingDot(),
                  left: posx,
                  top: posy,
                )
              ],
            )));
  }
}

blinking_dot.dart

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

输出

推荐答案

posy = localOffset.dy- MediaQuery.of(context).padding.top - kToolbarHeight;

还需要将偏移量减少红点大小的一半在您的情况下，是否会像这样

also you need to decrease offset by half of the red dot size in your case if will something like this

  posx = localOffset.dx - 7.5;
  posy = localOffset.dy- MediaQuery.of(context).padding.top - kToolbarHeight - 7.5;

这篇关于堆栈位置不准确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！