Flutter子组件相对定位插件g2x_positioned_relative_to_child的使用

g2x_positioned_relative_to_child 是一个用于在 Flutter 中实现子组件相对定位的插件。它允许你在父组件的上下文中动态地将子组件定位到特定位置，并支持多种配置选项。

Getting Started（开始使用）

首先，确保你已经将插件添加到项目的 pubspec.yaml 文件中：

dependencies:
  g2x_positioned_relative_to_child: ^版本号

然后运行以下命令以安装依赖项：

flutter pub get

接下来，导入插件并使用它来创建一个相对定位的子组件。

示例代码

以下是完整的示例代码，展示了如何使用 g2x_positioned_relative_to_child 插件来实现子组件的相对定位。

import 'package:flutter/material.dart';
import 'package:g2x_positioned_relative_to_child/g2x_positioned_relative_to_child.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  late G2xPositionedRelativeToChild g2xPositionedRelativeWithBackdrop;
  var g2xPositionedRelativeWithoutBackdrop = G2xPositionedRelativeToChild();

  var globalKeyWithBackdrop = GlobalKey();
  var globalKeyWithoutBackdrop = GlobalKey();

  var opened = false;

  _fechar() {
    opened = !opened;
    setState(() {});
  }

  @override
  void initState() {
    g2xPositionedRelativeWithBackdrop = G2xPositionedRelativeToChild(
      callbackOnHide: _fechar, // 回调函数，在关闭时执行
      closeOnTapOutside: true, // 点击外部区域时自动关闭
      backdropColor: Colors.black12, // 背景颜色
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: [
              Text("$opened"), // 显示当前状态

              // 按钮1：带背景的相对定位
              ElevatedButton(
                key: globalKeyWithBackdrop,
                child: const Text("With Backdrop"),
                onPressed: () {
                  g2xPositionedRelativeWithBackdrop.show(
                    horizontalAxis: G2xHorizontalPositionAxis.center, // 水平轴对齐方式
                    context: context, 
                    parentKey: globalKeyWithBackdrop,
                    offSet: const Offset(-100, 0), // 偏移量
                    child: Container(
                      height: 50,
                      width: 200,
                      color: Colors.red,
                      child: 
                        const 
                          Center(
                            child: 
                              Text(
                                "Child"
                              )
                          ),
                    )
                  );

                  opened = true;

                  setState(() { });
                },
              ),

              // 按钮2：不带背景的相对定位
              ElevatedButton(
                key: globalKeyWithoutBackdrop,
                child: const Text("Without Backdrop"),
                onPressed: () {
                  if (opened) {
                    g2xPositionedRelativeWithoutBackdrop.hide(); // 隐藏子组件
                    opened = false;
                    setState(() { });
                  } else {
                    g2xPositionedRelativeWithoutBackdrop.show(
                      horizontalAxis: G2xHorizontalPositionAxis.center, // 水平轴对齐方式
                      context: context, 
                      parentKey: globalKeyWithoutBackdrop,
                      offSet: const Offset(-100, 0), // 偏移量
                      child: Container(
                        height: 50,
                        width: 200,
                        color: Colors.red,
                        child: 
                          const 
                            Center(
                              child: 
                                Text(
                                  "Child"
                                )
                            ),
                      )
                    );

                    opened = true;

                    setState(() { });
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解析

1. 导入插件

   import 'package:g2x_positioned_relative_to_child/g2x_positioned_relative_to_child.dart';
   

2. 初始化插件实例
   使用 G2xPositionedRelativeToChild 创建一个实例，并设置回调函数、背景颜色等属性：

   late G2xPositionedRelativeToChild g2xPositionedRelativeWithBackdrop;
   g2xPositionedRelativeWithBackdrop = G2xPositionedRelativeToChild(
     callbackOnHide: _fechar, // 关闭时触发的回调
     closeOnTapOutside: true, // 点击外部区域时自动关闭
     backdropColor: Colors.black12, // 背景颜色
   );
   

3. 创建按钮并绑定 Key
   使用 GlobalKey 来标记父组件：

   var globalKeyWithBackdrop = GlobalKey();
   var globalKeyWithoutBackdrop = GlobalKey();
   

4. 实现子组件的显示与隐藏
   使用 show() 方法显示子组件，并使用 hide() 方法隐藏它：

   g2xPositionedRelativeWithBackdrop.show(
     horizontalAxis: G2xHorizontalPositionAxis.center,
     context: context, 
     parentKey: globalKeyWithBackdrop,
     offSet: const Offset(-100, 0),
     child: Container(
       height: 50,
       width: 200,
       color: Colors.red,
       child: const Center(child: Text("Child")),
     )
   );
   

5. 状态管理
   使用 setState() 更新界面状态：

   opened = true;
   setState(() { });