Flutter技术咨询：如何创建背景可交互的自定义弹窗及可调整大小组件

完全可以实现你要的功能，核心是放弃Flutter原生的模态弹窗（比如showDialog），改用自定义叠加组件结合手势监听来实现非模态交互和缩放能力。

实现方案 #

1. 核心布局逻辑 #

用Stack将后台页面内容与弹窗组件叠加，这样弹窗不会阻塞后台页面的事件响应。通过Positioned组件控制弹窗的初始位置，后续可通过手势拖拽调整。

2. 非模态交互实现 #

不需要添加模态屏障（默认showDialog会添加全屏透明屏障拦截后台事件），直接把弹窗作为Stack的子组件，后台页面的按钮、输入框等组件就能正常接收交互。

3. 缩放功能实现 #

在弹窗右下角添加一个拖拽手柄，通过GestureDetector监听拖拽手势，动态修改弹窗的宽高，同时设置尺寸范围避免弹窗过小或超出屏幕边界。

完整示例代码 #

import 'package:flutter/material.dart';

class ResizableNonModalPopup extends StatefulWidget {
  final Widget child;
  const ResizableNonModalPopup({super.key, required this.child});

  @override
  State<ResizableNonModalPopup> createState() => _ResizableNonModalPopupState();
}

class _ResizableNonModalPopupState extends State<ResizableNonModalPopup> {
  bool _popupVisible = false;
  double _popupWidth = 300;
  double _popupHeight = 200;
  Offset _popupPos = const Offset(100, 100);

  Offset? _dragPos;
  Offset? _resizePos;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("可缩放非模态弹窗")),
      body: Stack(
        children: [
          // 后台页面内容，可正常交互
          widget.child,
          // 弹窗触发按钮
          Positioned(
            top: 20,
            right: 20,
            child: ElevatedButton(
              onPressed: () => setState(() => _popupVisible = !_popupVisible),
              child: const Text("显示/隐藏弹窗"),
            ),
          ),
          // 非模态可缩放弹窗
          if (_popupVisible)
            Positioned(
              left: _popupPos.dx,
              top: _popupPos.dy,
              child: GestureDetector(
                // 拖拽移动弹窗
                onPanStart: (details) => _dragPos = details.localPosition,
                onPanUpdate: (details) {
                  if (_dragPos != null) {
                    setState(() => _popupPos += details.delta);
                  }
                },
                onPanEnd: (_) => _dragPos = null,
                child: Container(
                  width: _popupWidth,
                  height: _popupHeight,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: const [BoxShadow(color: Colors.black26, blurRadius: 8)],
                  ),
                  child: Stack(
                    children: [
                      // 弹窗内容区域
                      const Padding(
                        padding: EdgeInsets.all(16),
                        child: Text("弹窗支持拖拽移动、右下角手柄缩放，后台页面可正常操作"),
                      ),
                      // 缩放手柄
                      Positioned(
                        bottom: 0,
                        right: 0,
                        child: GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onPanStart: (details) => _resizePos = details.localPosition,
                          onPanUpdate: (details) {
                            if (_resizePos != null) {
                              setState(() {
                                _popupWidth += details.delta.dx;
                                _popupHeight += details.delta.dy;
                                // 限制最小/最大尺寸
                                _popupWidth = _popupWidth.clamp(200, MediaQuery.of(context).size.width - _popupPos.dx - 20);
                                _popupHeight = _popupHeight.clamp(150, MediaQuery.of(context).size.height - _popupPos.dy - 20);
                              });
                            }
                          },
                          onPanEnd: (_) => _resizePos = null,
                          child: Container(
                            width: 30,
                            height: 30,
                            decoration: const BoxDecoration(
                              color: Colors.blue,
                              borderRadius: BorderRadius.only(bottomRight: Radius.circular(8)),
                            ),
                            child: const Icon(Icons.drag_handle, color: Colors.white),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

// 使用示例
void main() => runApp(const MaterialApp(
      home: ResizableNonModalPopup(
        child: Center(
          child: Text("后台页面内容，弹窗显示后可点击此处测试交互"),
        ),
      ),
    ));

关键说明 #

• 弹窗与后台页面共享同一个Stack上下文，没有模态屏障拦截事件，所以后台组件可以正常响应点击、输入等操作。
• 通过GestureDetector分别实现弹窗的移动和缩放逻辑，拖拽手柄的HitTestBehavior.opaque确保手势只作用于手柄区域，不影响弹窗其他内容的交互。
• 代码中添加了尺寸限制，避免弹窗被缩放到过小，或者拖拽后超出屏幕范围导致内容不可见。

内容的提问来源于stack exchange，提问作者Moïse Rajesearison