如何在Flutter中使用 rect_getter 包获取坐标小部件？

有时我们需要获取小部件的位置或在屏幕上的位置可能是动态的小部件上显示一些覆盖小部件或类似的东西。在本文中，我们将讨论使用 rect_getter 包获取小部件坐标的方法。请按照以下步骤操作：

1. 创建一个应用程序：

通过在终端上运行以下命令来创建一个新的flutter应用程序：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！

flutter create your_app_name

现在在任何 IDE（如 Android-Studio 或 VS-Code）中打开您的flutter项目。

2. 创建一个基本的 UI：

现在从lib/main 中删除所有样板代码。 dart并为您的 UI 添加代码。为了演示，我创建了一个包含Columns 、 Rows和Icons 的基本 UI。

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(home: MyApp()));
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black26,
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Center(
          child: Text(
            'GeeksForGeeks',
            style: TextStyle(color: Colors.white,
                   fontWeight: FontWeight.bold),
          ),
        ),
      ),
      // Some basic UI with five Icons displayed in Rows and Columns
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Flexible(
                      flex: 1,
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      )),
                  Flexible(
                      flex: 1,
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ))
                ],
              ),
              Flexible(
                  flex: 1,
                  child: Icon(
                    Icons.message_outlined,
                    color: Colors.white,
                    size: 120,
                  )),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Flexible(
                      flex: 1,
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      )),
                  Flexible(
                      flex: 1,
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ))
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

3. 现在添加 rect_getter 包：

要添加 rect_getter 包，请在终端中运行以下命令：

flutter pub add rect_getter

4. 导入 rect_getter：

要使用rect_getter ，请通过在lib/main.js 中添加以下行来导入它。dart：

Dart

import 'package:rect_getter/rect_getter.dart';

5. 使用 rect_getter 获取小部件的位置：

对于每个小部件的位置，我们想要使用 rect_getter，我们必须为每个小部件声明一个特定的全局键。因为在这个例子中我们试图获取五个小部件的位置，所以我们需要声明五个全局键。因此，在_MyAppState类的开头添加这些行（在这种情况下，您的可能会有所不同）：

Dart

// Defining global keys for all the widgets we
// want to get coordinates of
var globalKey1 = RectGetter.createGlobalKey(),
globalKey2 = RectGetter.createGlobalKey(),
globalKey3 = RectGetter.createGlobalKey(),
globalKey4 = RectGetter.createGlobalKey(),
globalKey5 = RectGetter.createGlobalKey();

现在用 GestureDetector 小部件包装所有五个图标（或您的情况下的目标小部件），现在还用RectGetter小部件包装这个GestureDetector小部件。在 RectGetter 小部件中添加一个key属性并传入一个全局 key 。

现在，您可以使用 GesturDetector 的onTap属性中的以下代码访问小部件的坐标，并在SnackBar上显示坐标：

Dart

// Add RectGetter as parent to the target widget
RectGetter(
  key: globalKey,
  child: GestureDetector(
          onTap: () {
                     // create a Rect instance
                     Rect rect = RectGetter.getRectFromKey(globalKey);
              
                     // Getting values of all four coordinate left, top, right and
                     // bottom using Rect instance 
                     var left = rect.left;
                     var top = rect.top;
                     var right = rect.right;
                     var bottom = rect.bottom;
                       
                     // Displaying the resultant coordinates in a SnackBar
                     ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                         content:
                           Text('LTRB :($left,$top,$right,$bottom)')));
                     },
                      child: YourWidget()
                    ),
                  )

将所有这些代码添加到我们的lib/main.js 之后。dart，我们的主力。dart看起来像这样：

Dart

import 'package:flutter/material.dart';
import 'package:rect_getter/rect_getter.dart';
  
void main() {
  runApp(MaterialApp(home: MyApp()));
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State {
    
  // Defining global keys for all the widgets we
  // want to get coordinates of
  var globalKey1 = RectGetter.createGlobalKey(),
      globalKey2 = RectGetter.createGlobalKey(),
      globalKey3 = RectGetter.createGlobalKey(),
      globalKey4 = RectGetter.createGlobalKey(),
      globalKey5 = RectGetter.createGlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black26,
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Center(
          child: Text(
            'GeeksForGeeks',
            style: TextStyle(color: Colors.white,
                             fontWeight: FontWeight.bold),
          ),
        ),
      ),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Flexible(
                      
                      // Add RectGetter as parent to the target widget
                      child: RectGetter(
                    key: globalKey1,
                    child: GestureDetector(
                      onTap: () {
                          
                        // create a Rect instance
                        Rect rect = RectGetter.getRectFromKey(globalKey1);
                          
                        // Getting values of all four coordinate left, top, right and
                        // bottom using Rect instance 
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
                          
                        // Displaying the resultant coordinates in a SnackBar
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  )),
                  Flexible(
                      
                      // Add RectGetter as parent to the target widget
                      child: RectGetter(
                    key: globalKey2,
                    child: GestureDetector(
                      onTap: () {
                          
                        // create a Rect instance
                        Rect rect = RectGetter.getRectFromKey(globalKey2);
                          
                        // Getting values of all four coordinate left, top, right and
                        // bottom using Rect instance 
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
                          
                        // Displaying the resultant coordinates in a SnackBar
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  ))
                ],
              ),
              Flexible(
                  
                  // Add RectGetter as parent to the target widget
                  child: RectGetter(
                key: globalKey3,
                child: GestureDetector(
                  onTap: () {
                    //create a Rect instance
                    Rect rect = RectGetter.getRectFromKey(globalKey3);
                      
                    // Getting values of all four coordinate left, top, right and
                    // bottom using Rect instance 
                    var left = rect.left;
                    var top = rect.top;
                    var right = rect.right;
                    var bottom = rect.bottom;
                      
                    // Displaying the resultant coordinates in a SnackBar
                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                        backgroundColor: Colors.green,
                        content: Text(
                          'LTRB :($left, $top, $right, $bottom)',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        )));
                  },
                  child: Icon(
                    Icons.message_outlined,
                    color: Colors.white,
                    size: 120,
                  ),
                ),
              )),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Flexible(
                      
                      // Add RectGetter as parent to the target widget
                      child: RectGetter(
                    key: globalKey4,
                    child: GestureDetector(
                      onTap: () {
                        //create a Rect instance
                        Rect rect = RectGetter.getRectFromKey(globalKey4);
                          
                        // Getting values of all four coordinate left, top, right and
                        // bottom using Rect instance 
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
  
                        // Displaying the resultant coordinates in a SnackBar
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  )),
                  Flexible(
                      
                      // Add RectGetter as parent to the target widget
                      child: RectGetter(
                    key: globalKey5,
                    child: GestureDetector(
                      onTap: () {
                          
                        // create a Rect instance
                        Rect rect = RectGetter.getRectFromKey(globalKey5);
                          
                        // Getting values of all four coordinate left, top, right and
                        // bottom using Rect instance 
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
                          
                        // Displaying the resultant coordinates in a SnackBar
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  ))
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

应用演示1

5.使用坐标显示小部件覆盖

我已经使用rect_getter中的坐标使用Overlay 在我们的小部件上显示一个通知点。检查下面的代码：

Dart

import 'package:flutter/material.dart';
import 'package:rect_getter/rect_getter.dart';
  
void main() {
  runApp(MaterialApp(home: MyApp()));
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State {
  var globalKey1 = RectGetter.createGlobalKey(),
      globalKey2 = RectGetter.createGlobalKey(),
      globalKey3 = RectGetter.createGlobalKey(),
      globalKey4 = RectGetter.createGlobalKey(),
      globalKey5 = RectGetter.createGlobalKey();
  
  showOverlayDot(BuildContext context,
                 double left, double top) async {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;
    overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
          left: left,
          top: top,
          child: Icon(
            Icons.circle,
            color: Colors.red,
          ));
    });
  
    overlayState.insert(overlayEntry);
    await Future.delayed(Duration(seconds: 2));
    overlayEntry.remove();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black26,
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Center(
          child: Text(
            'GeeksForGeeks',
            style: TextStyle(color: Colors.white,
                             fontWeight: FontWeight.bold),
          ),
        ),
      ),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Flexible(
                      child: RectGetter(
                    key: globalKey1,
                    child: GestureDetector(
                      onTap: () {
                        Rect rect = RectGetter.getRectFromKey(globalKey1);
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
  
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                        showOverlayDot(this.context, left, top);
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  )),
                  Flexible(
                      child: RectGetter(
                    key: globalKey2,
                    child: GestureDetector(
                      onTap: () {
                        Rect rect = RectGetter.getRectFromKey(globalKey2);
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
  
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                        showOverlayDot(this.context, left, top);
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  ))
                ],
              ),
              Flexible(
                  child: RectGetter(
                key: globalKey3,
                child: GestureDetector(
                  onTap: () {
                    Rect rect = RectGetter.getRectFromKey(globalKey3);
                    var left = rect.left;
                    var top = rect.top;
                    var right = rect.right;
                    var bottom = rect.bottom;
  
                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                        backgroundColor: Colors.green,
                        content: Text(
                          'LTRB :($left, $top, $right, $bottom)',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        )));
                    showOverlayDot(this.context, left, top);
                  },
                  child: Icon(
                    Icons.message_outlined,
                    color: Colors.white,
                    size: 120,
                  ),
                ),
              )),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Flexible(
                      child: RectGetter(
                    key: globalKey4,
                    child: GestureDetector(
                      onTap: () {
                        Rect rect = RectGetter.getRectFromKey(globalKey4);
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
  
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                        showOverlayDot(this.context, left, top);
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  )),
                  Flexible(
                      child: RectGetter(
                    key: globalKey5,
                    child: GestureDetector(
                      onTap: () {
                        Rect rect = RectGetter.getRectFromKey(globalKey5);
                        var left = rect.left;
                        var top = rect.top;
                        var right = rect.right;
                        var bottom = rect.bottom;
  
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            backgroundColor: Colors.green,
                            content: Text(
                              'LTRB :($left, $top, $right, $bottom)',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )));
                        showOverlayDot(this.context, left, top);
                      },
                      child: Icon(
                        Icons.message_outlined,
                        color: Colors.white,
                        size: 70,
                      ),
                    ),
                  ))
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

应用演示 2