如何限制Flutter中Draggable的Feedback仅在父组件范围内拖拽？

问题描述 #

拖拽过程中，Draggable的Feedback组件始终显示在所有组件之上，包括AppBar和BottomNavigationBar。

示例代码如下：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Stack(
            children: [
              const MyWidget(),
              Positioned(
                bottom: 0,
                child: Container(width:500, height: 200, color: Colors.red),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Draggable<int>(
      data: 0,
      feedback: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
      child: Container(color: Colors.green),
    );
  }
}

• 绿色容器是Draggable组件；
• 蓝色容器是拖拽绿色组件时显示的Feedback；
• 红色容器和绿色组件是Stack的子组件，且绿色组件位于红色容器下方；
• 黄色区域代表AppBar和BottomNavigationBar。

示例情况 #

• 预期结果：蓝色Feedback不会显示在红色容器和黄色区域之上；
• 实际结果：蓝色Feedback显示在红色容器和黄色区域之上。

解决方案 #

默认情况下，Flutter的Draggable组件的feedback是挂载到全局Overlay里的，这就是它能覆盖所有组件的原因。要把它约束在父组件范围内，得换个方式实现拖拽反馈：

方法一：用Stack+拖拽状态模拟Feedback #

这是最直接的方案，放弃原生Draggable的feedback，自己用Stack和手势监听来实现：

1. 维护拖拽状态（是否在拖拽、当前位置）；
2. 用Stack同时放置原组件和自定义的Feedback；
3. 通过手势回调更新Feedback位置，同时限制它的移动范围；
4. 用ClipRect确保Feedback不会超出父组件边界。

修改后的示例代码：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(24.0),
          child: ClipRect( // 强制约束子组件不超出当前区域
            child: Stack(
              children: [
                const CustomDraggableWidget(),
                Positioned(
                  bottom: 0,
                  child: Container(width: 500, height: 200, color: Colors.red),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class CustomDraggableWidget extends StatefulWidget {
  const CustomDraggableWidget({super.key});

  @override
  State<CustomDraggableWidget> createState() => _CustomDraggableWidgetState();
}

class _CustomDraggableWidgetState extends State<CustomDraggableWidget> {
  bool _isDragging = false;
  Offset _feedbackOffset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    final parentSize = MediaQuery.of(context).size;
    // 父组件可用高度：减去红色容器的高度和上下Padding
    final availableHeight = parentSize.height - 200 - 48;

    return Stack(
      children: [
        // 可拖拽的原组件
        GestureDetector(
          onPanStart: (details) {
            setState(() {
              _isDragging = true;
              // 记录触摸点相对于组件的偏移，让Feedback中心点对齐触摸点
              _feedbackOffset = details.localPosition - const Offset(50, 50);
            });
          },
          onPanUpdate: (details) {
            setState(() {
              final renderBox = context.findRenderObject() as RenderBox;
              // 转换为父组件内的局部坐标
              final localOffset = renderBox.globalToLocal(details.globalPosition);
              // 计算Feedback的位置，同时限制边界
              final newX = (localOffset.dx - 50).clamp(0.0, parentSize.width - 100);
              final newY = (localOffset.dy - 50).clamp(0.0, availableHeight - 100);
              _feedbackOffset = Offset(newX, newY);
            });
          },
          onPanEnd: (details) {
            setState(() {
              _isDragging = false;
            });
          },
          child: Container(color: Colors.green, width: 100, height: 100),
        ),
        // 自定义的Feedback，仅拖拽时显示
        if (_isDragging)
          Positioned(
            left: _feedbackOffset.dx,
            top: _feedbackOffset.dy,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue.withOpacity(0.8),
            ),
          ),
      ],
    );
  }
}

方法二：自定义局部Overlay挂载Feedback #

如果一定要用原生Draggable，可以手动把Feedback挂载到父组件内的局部Overlay，而不是全局Overlay。不过这个方案逻辑更复杂，需要手动管理OverlayEntry的创建、更新和销毁，一般不推荐，除非有特殊需求。

内容的提问来源于stack exchange，提问作者Winson