如何计算#flutter中的触摸坐标？

Question

我想在触摸坐标上显示一个弹出框。我使用堆栈和定位小部件来放置弹出窗口。

Answer 1

您可以添加一个GestureDetector作为堆栈的父级，并注册onTapDownDetails侦听器。这应该在每个减量事件中调用您的监听器，并在您的监听器的参数TapDownDetails中使用全局偏移量。

下面是演示相同的示例代码。

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Flutter Demo', 
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    MyHomePageState createState() => new MyHomePageState(); 
} 

class MyHomePageState extends State<MyHomePage> { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
      title: new Text('Popup Demo'), 
     ), 
     body: new MyWidget()); 
    } 
} 

class MyWidget extends StatefulWidget { 
    @override 
    State<StatefulWidget> createState() { 
    return new MyWidgetState(); 
    } 
} 

class MyWidgetState extends State<MyWidget> { 
    double posx = 100.0; 
    double posy = 100.0; 

    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 new GestureDetector(
     onTapDown: (TapDownDetails details) => onTapDown(context, details), 
     child: new Stack(fit: StackFit.expand, children: <Widget>[ 
     // Hack to expand stack to fill all the space. There must be a better 
     // way to do it. 
     new Container(color: Colors.white), 
     new Positioned(
      child: new Text('hello'), 
      left: posx, 
      top: posy, 
     ) 
     ]), 
    ); 
    } 
}