拖动至屏幕底部时Floating Action Button消失问题求助

拖动FAB到屏幕底部消失，是因为Positioned的top值未做范围限制，当拖动位置超出屏幕可视区域时，FAB会被Stack裁剪。另外未考虑FAB自身尺寸和margin，导致即使top值接近屏幕底部，FAB下半部分也会超出屏幕范围。

1. 获取屏幕尺寸，用来限定拖动的边界范围
2. 修正拖动结束后的位置，确保FAB始终处于屏幕可视区域内
3. 提取重复代码，优化FAB的构建逻辑

修改后的完整代码 #

late Size screenSize;

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  screenSize = MediaQuery.of(context).size;
}

Widget getInitialWidget() {
  return Scaffold(
    key: _scaffoldKey,
    body: Stack(
      children: [
        Column(
          children: <Widget>[
            _buildSearchBox(),
            fleetManagerListView(mResponse)
          ],
        ),
        Positioned(
          left: position.dx,
          top: position.dy,
          child: Draggable(
            onDragEnd: (details) {
              setState(() {
                // 计算FAB实际占用的宽高（包含margin）
                final fabTotalWidth = 56 + 10;
                final fabTotalHeight = 56 + 10;

                // 限制横向位置，不超出屏幕左右边界
                final clampedDx = details.offset.dx.clamp(
                  0.0,
                  screenSize.width - fabTotalWidth,
                );
                // 限制纵向位置，不超出屏幕上下边界
                final clampedDy = details.offset.dy.clamp(
                  0.0,
                  screenSize.height - fabTotalHeight,
                );

                position = Offset(clampedDx, clampedDy);
              });
            },
            childWhenDragging: const SizedBox.shrink(),
            feedback: _buildFab(),
            child: _buildFab(),
          ),
        ),
      ],
    ),
  );
}

// 提取FAB构建逻辑，减少代码冗余
Widget _buildFab() {
  return Visibility(
    visible: userRoleId != 8,
    child: Container(
      margin: const EdgeInsets.only(bottom: 10, right: 10),
      child: FloatingActionButton(
        onPressed: _onFloatingActionButton,
        child: const Icon(Icons.add, color: Colors.black),
        backgroundColor: const Color(0xFFf9b937),
      ),
    ),
  );
}

关键说明 #

• 用MediaQuery获取屏幕尺寸，确保拖动范围始终在屏幕内
• 通过clamp方法限制offset的取值，避免FAB超出屏幕可视区域
• 提取_buildFab方法复用代码，简化结构
• 将childWhenDragging改为SizedBox.shrink()，比空Container更语义化

内容的提问来源于stack exchange，提问作者Nandyala Raja Pragnesh Reddy