You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让可拖拽FAB在所有屏幕正常显示?Flutter响应式适配求助

水平拖拽Draggable FAB在不同屏幕适配失效,如何实现响应式设计?

我制作了一个仅支持水平拖拽的Draggable FAB,但它在不同屏幕(模拟器与真实设备)上无法正常工作,显示效果存在差异:

模拟器截图:

模拟器截图

真实设备截图:

真实设备截图

以下是相关代码:

Fab Controller类代码:

class FabController extends GetxController {
  double width = 0.0;
  double height = 0.0;
  var offset = FABButonDefaultKonum.obs;

  moveFab(Offset newOffset) {
    offset.value = newOffset;
    update();
  }

  @override
  void dispose() {
    super.dispose();
  }
}

常量类代码:

double newHeight = Get.size.height - padding.top - padding.bottom;
double newWidth = Get.size.width - padding.right - padding.left;
Offset FABButonDefaultKonum = Offset(newWidth * 0.8, newHeight * 0.85);

FAB按钮代码:

Obx(
  () {
    return Positioned(
      left: fabController.offset.value.dx,
      top: fabController.offset.value.dy ,
      child: Draggable(
        axis: Axis.horizontal,
        feedback: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25),
            color: Color(0xff3498DB),
          ),
          child: FloatingActionButton(
              key: fabKey,
              backgroundColor: Color(0xff3498DB),
              child: const Icon(Icons.shopping_cart),
              onPressed: () {
                print(fabController.offset);
              }),
        ),
        child: Obx(
          () {
            return Badge();
          },
        ),
        childWhenDragging: Container(),
        onDragEnd: (details) {
          Offset newOffset = details.offset;

          if (details.offset.dx <= newWidth / 2) {
            newOffset =
                Offset(newWidth * 0.05, newHeight * 0.90);
          } else {
            newOffset =
                Offset(newWidth * 0.8, newHeight * 0.90);
          }

          if (!_isLeave) fabController.moveFab(newOffset);

          print(fabController.offset.value.toString() +
              " ***");
        },
        onDragStarted: () {
          _isLeave = false;
        },
      ),
    );
  },
),

我曾尝试使用Get.height和Get.width,但没有效果,请问如何实现响应式设计来解决这个适配问题?


内容的提问来源于stack exchange,提问作者Doğukan Çiftçi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 12:50:51