Flutter 自带的 Overlay 可以用来实现悬浮窗效果

在 Flutter 中实现一个可以在所有页面使用的悬浮窗，并且能够在显示时动态改变宽高，确实是一个常见的需求。你提到的 flutter_floaty 和 flutter_overlay_window 都有各自的局限性。以下是一些可能的解决方案和建议：

1. 使用 Overlay 实现悬浮窗

Flutter 自带的 Overlay 可以用来实现悬浮窗效果。你可以通过 OverlayEntry 来动态添加和移除悬浮窗，并且可以在显示时动态调整宽高。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Floating Window Example')),
        body: FloatingWindowExample(),
      ),
    );
  }
}

class FloatingWindowExample extends StatefulWidget {
  @override
  _FloatingWindowExampleState createState() => _FloatingWindowExampleState();
}

class _FloatingWindowExampleState extends State<FloatingWindowExample> {
  OverlayEntry? _overlayEntry;
  double _width = 100.0;
  double _height = 100.0;

  void _showFloatingWindow() {
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
            top: 100,
            left: 100,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  _width += details.delta.dx;
                  _height += details.delta.dy;
                });
                _overlayEntry?.markNeedsBuild();
              },
              child: Container(
                width: _width,
                height: _height,
                color: Colors.blue.withOpacity(0.5),
                child: Center(child: Text('Floating Window')),
              ),
            ),
          ));

    Overlay.of(context)?.insert(_overlayEntry!);
  }

  void _hideFloatingWindow() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _showFloatingWindow,
            child: Text('Show Floating Window'),
          ),
          ElevatedButton(
            onPressed: _hideFloatingWindow,
            child: Text('Hide Floating Window'),
          ),
        ],
      ),
    );
  }
}

2. 使用 flutter_portal 包

flutter_portal 是一个强大的库，可以帮助你更灵活地管理悬浮窗。它允许你在任何地方插入悬浮窗，并且可以动态调整其大小和位置。

dependencies:
  flutter_portal: ^0.4.0

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Floating Window Example')),
        body: FloatingWindowExample(),
      ),
    );
  }
}

class FloatingWindowExample extends StatefulWidget {
  @override
  _FloatingWindowExampleState createState() => _FloatingWindowExampleState();
}

class _FloatingWindowExampleState extends State<FloatingWindowExample> {
  bool _showFloatingWindow = false;
  double _width = 100.0;
  double _height = 100.0;

  @override
  Widget build(BuildContext context) {
    return Portal(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showFloatingWindow = !_showFloatingWindow;
                });
              },
              child: Text(_showFloatingWindow ? 'Hide Floating Window' : 'Show Floating Window'),
            ),
            if (_showFloatingWindow)
              Positioned(
                top: 100,
                left: 100,
                child: GestureDetector(
                  onPanUpdate: (details) {
                    setState(() {
                      _width += details.delta.dx;
                      _height += details.delta.dy;
                    });
                  },
                  child: Container(
                    width: _width,
                    height: _height,
                    color: Colors.blue.withOpacity(0.5),
                    child: Center(child: Text('Floating Window')),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

3. 使用 flutter_overlay_window 的优化

如果你仍然希望使用 flutter_overlay_window，可以尝试以下优化措施：

• 减少重绘：确保悬浮窗的内容不会频繁重绘，避免不必要的性能消耗。
• 使用轻量级组件：尽量使用轻量级的组件来构建悬浮窗内容。
• 限制悬浮窗的更新频率：例如，只有在用户交互时才更新悬浮窗的宽高，而不是每帧都更新。

4. 使用原生代码实现

如果上述方法仍然无法满足性能需求，可以考虑使用原生代码（Android/iOS）来实现悬浮窗，并通过 Flutter 插件与 Flutter 应用进行通信。这样可以更精细地控制悬浮窗的行为和性能。

总结

• Overlay 是一个简单且灵活的方式来实现悬浮窗，适合大多数场景。
• flutter_portal 提供了更强大的功能，适合需要更复杂交互的场景。
• 如果性能是关键问题，可以考虑优化现有方案或使用原生代码实现。

希望这些建议能帮助你实现所需的功能！