Flutter:获取点击的位置(X 和 Y 坐标)

这篇简短而直接的文章向您展示了如何在 Flutter 中获取点击的位置(X 和 Y 坐标)。

您需要做的是将整个屏幕(或某个区域)包裹在GestureDetector小部件中并监听onTapDownonTapUp事件,如下所示:

GestureDetector(
      onTapDown: (details){
         final tapPosition = details.globalPosition;
         final x = tapPosition.dx;
         final y = tapPosition.dy;
         // do something with x & y
      },
      child: Scaffold(/* ...*/)
)

请注意,获取点击位置的操作不会阻止用户与其他小部件(如按钮、表单等)进行交互。为了更清楚,请参阅下面的完整示例。

这个例子

应用预览

此演示捕获点击位置(用户手指点击屏幕的位置),然后在屏幕上显示结果:

Flutter:获取点击的位置(X 和 Y 坐标)

代码

main.dart中的完整代码以及注释中的解释:

// kindacode.com
// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: const KindaCodeDemo(),
    );
  }
}

class KindaCodeDemo extends StatefulWidget {
  const KindaCodeDemo({Key? key}) : super(key: key);

  @override
  State<KindaCodeDemo> createState() => _KindaCodeDemoState();
}

class _KindaCodeDemoState extends State<KindaCodeDemo> {
  // the tap location
  Offset? _tapPosition;

  // this function is called when the user taps somewhere on the screen
  void _getTapPosition(TapDownDetails details) async {
    final tapPosition = details.globalPosition;
    setState(() {
      _tapPosition = tapPosition;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) => _getTapPosition(details),
      child: Scaffold(
        appBar: AppBar(title: const Text('KindaCode.com')),
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: double.infinity,
                height: 200,
                color: Colors.blue,
                padding: const EdgeInsets.all(20),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // Display X coordinate of tap
                    Text(
                      'X: ${_tapPosition?.dx.toStringAsFixed(2) ?? "Tap Somewhere"}',
                      style: const TextStyle(fontSize: 36, color: Colors.white),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    // Display Y coordinate of tap
                    Text(
                      'Y: ${_tapPosition?.dy.toStringAsFixed(2) ?? "Tap Somewhere"}',
                      style:
                          const TextStyle(fontSize: 36, color: Colors.yellow),
                    ),
                  ],
                ),
              ),

              // the action of getting tap location doesn't prevent user from interacting with other widgets like buttons, forms, etc.
              // the purpose of the button below is to demonstrate that
              const SizedBox(
                height: 30,
              ),
              ElevatedButton(
                  onPressed: () =>
                      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                        content: Text('Hi There'),
                      )),
                  child: const Text('A Useless Button')),
            ],
          ),
        ),
      ),
    );
  }
}

结论

您已经学习了如何确定敲击点的 X 和 Y 坐标。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » Flutter:获取点击的位置(X 和 Y 坐标)