如何让可拖拽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
相关产品推荐
相关产品推荐

