在 Flutter 中实现一个可以在屏幕上拖动的窗口小部件(而不是拖放),你可以使用 GestureDetector
和 Transform
组件来实现。以下是一个完整的示例,展示如何实现这一功能。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Draggable Widget Example'),
),
body: DraggableWidget(),
),
);
}
}
class DraggableWidget extends StatefulWidget {
@override
_DraggableWidgetState createState() => _DraggableWidgetState();
}
class _DraggableWidgetState extends State<DraggableWidget> {
double xOffset = 0;
double yOffset = 0;
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
left: xOffset,
top: yOffset,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
xOffset += details.delta.dx;
yOffset += details.delta.dy;
});
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text(
'Drag me',
style: TextStyle(color: Colors.white),
),
),
),
),
),
],
);
}
}
MyApp
是主应用程序类,包含一个 MaterialApp
和一个 Scaffold
,其中包含一个 AppBar
和 DraggableWidget
。DraggableWidget
是一个 StatefulWidget
,因为我们需要在拖动时更新其状态。_DraggableWidgetState
是其状态类,包含两个变量 xOffset
和 yOffset
,用于存储小部件的当前位置。Stack
和 Positioned
:Stack
允许我们在屏幕上自由定位小部件。Positioned
小部件根据 xOffset
和 yOffset
来定位。GestureDetector
:GestureDetector
用于检测拖动手势。onPanUpdate
回调在拖动时触发,details.delta.dx
和 details.delta.dy
分别表示在 x 和 y 方向上的拖动距离。onPanUpdate
回调中,我们更新 xOffset
和 yOffset
,并调用 setState
以重新构建小部件,从而更新其位置。Container
是实际可拖动的小部件,设置了宽度、高度和背景颜色,并包含一个居中的文本。运行上述代码后,你将看到一个带有 "Drag me" 文本的蓝色方块。你可以按住并拖动这个方块,它会在屏幕上跟随你的手指移动。
领取专属 10元无门槛券
手把手带您无忧上云