Flutter自定义弹出窗口插件custom_popup的使用

当然，下面是一个关于如何在Flutter中使用custom_popup插件来实现自定义弹出窗口的示例代码。首先，你需要确保在你的pubspec.yaml文件中添加了custom_popup依赖项：

dependencies:
  flutter:
    sdk: flutter
  custom_popup: ^x.y.z  # 请替换为实际的版本号

然后运行flutter pub get来安装依赖。

以下是一个完整的示例代码，展示了如何使用custom_popup插件来创建一个简单的自定义弹出窗口：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 控制弹出窗口的显示
  bool isPopupVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Popup Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Press the button to show the custom popup.',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isPopupVisible = true;
                });

                // 显示弹出窗口
                showCustomPopup(
                  context: context,
                  builder: (context) {
                    return CustomPopup(
                      // 配置弹出窗口
                      backgroundColor: Colors.white,
                      elevation: 10,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(16.0),
                            child: Text('This is a custom popup window!'),
                          ),
                          Divider(),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: ElevatedButton(
                              onPressed: () {
                                // 关闭弹出窗口
                                Navigator.of(context).pop();
                                setState(() {
                                  isPopupVisible = false;
                                });
                              },
                              child: Text('Close'),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                  isVisible: isPopupVisible,
                  onDismiss: () {
                    setState(() {
                      isPopupVisible = false;
                    });
                  },
                );
              },
              child: Text('Show Popup'),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义弹出窗口显示函数
void showCustomPopup<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  required bool isVisible,
  VoidCallback? onDismiss,
}) {
  if (isVisible) {
    // 使用Overlay来显示弹出窗口
    final overlay = Overlay.of(context)!;
    final overlayEntry = OverlayEntry(
      builder: builder,
    );
    overlay.insert(overlayEntry);

    // 监听弹出窗口的关闭事件
    overlayEntry.addListener(() {
      if (!overlayEntry.isMounted) {
        overlay.remove(overlayEntry);
        onDismiss?.call();
      }
    });
  }
}

请注意，showCustomPopup函数在这里是一个自定义函数，用于演示如何使用Overlay来显示弹出窗口。然而，custom_popup插件可能提供了更简洁的API来实现相同的功能，因此在实际项目中，请参考custom_popup的官方文档来找到最佳实践。

此外，上述代码中的CustomPopup并不是custom_popup插件中的实际组件，而是一个用于演示目的的自定义组件。custom_popup插件可能提供了自己的组件或方法来创建弹出窗口，因此请根据插件的API文档进行调整。

如果你使用的是custom_popup插件的特定版本，并且它提供了自己的组件或方法来显示弹出窗口，请参考该版本的文档来替换上述代码中的自定义部分。