#flutter에서 터치 좌표를 계산하는 방법은 무엇입니까?

Question

터치 좌표에서 팝업을 표시하고 싶습니다. Stack 및 Positioned 위젯을 사용하여 팝업을 배치합니다.

Answer 1

스택의 부모로 GestureDetector을 추가하고 onTapDownDetails 수신기를 등록 할 수 있습니다. 이것은 청취자의 TapDownDetails에있는 탭의 전체 오프셋과 함께 모든 tapdown 이벤트에서 청취자에게 전화해야합니다.

다음은 같은 것을 보여주는 샘플 코드입니다.

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