描述我正在创建算盘在Flutter。珠子(绿色圆圈),是由自定义画家对象。
问题当我拖动珠子或只是拖动其他对象时,珠子也被拖动。如何限制珠子的移动,使珠子仅在我按下并拖动时移动?
我将画布指针对象 Package 在GestureDetector中,以便仅在存在onVerticalDragUpdate时进行检测
import 'package:abacus_game/functions.dart';
import 'package:abacus_game/widget/bar.dart';
import 'package:abacus_game/widget/frame.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
]).then((value) => runApp(MyApp()));
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyPainter(),
);
}
}
class MyPainter extends StatefulWidget {
@override
State<MyPainter> createState() => _MyPainterState();
}
class _MyPainterState extends State<MyPainter> {
Offset _offset = new Offset(0, 0);
bool isFirst = true;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
if (isFirst) {
_offset =
new Offset(getScreenWidth(context) / 2, getScreenHeight(context) / 2);
}
return Scaffold(
appBar: AppBar(
title: Text('Abacus'),
),
body: Center(
child: Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.blueAccent)),
child: Stack(
alignment: Alignment.center,
children: [
Container(
width: 10,
height: 400,
color: Colors.brown,
),
GestureDetector(
onVerticalDragUpdate: (details) {
// print(details.localPosition);
setState(() {
isFirst = false;
_offset = details.localPosition;
});
},
child: CustomPaint(
painter: BeadPainter(_offset, getScreenWidth(context)),
child: GestureDetector(
child: Container(),
),
),
),
],
),
),
),
);
}
}
class BeadPainter extends CustomPainter {
final Offset offset;
final double screenWidth;
BeadPainter(this.offset, this.screenWidth) : super();
@override
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = Colors.teal
..strokeWidth = 5
..strokeCap = StrokeCap.round;
Offset newOffset = new Offset(screenWidth / 2, offset.dy);
canvas.drawCircle(newOffset, 20, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
1条答案
按热度按时间tcbh2hod1#
要使画布画家对象仅在单击时可拖动,可以使用Flutter中的GestureDetector小部件。GestureDetector小部件提供了一种检测不同类型手势的方法,包括点击和拖动。
下面是一个如何在Flutter中实现此功能的示例:
1.首先,创建一个StatefulWidget来保存画布绘制器对象的状态:
1.在本例中,MyPainter类用于在画布上绘制画家对象。画家对象的位置存储在_position变量中,当用户使用_updatePosition()函数拖动对象时,该变量会更新。
1.最后,使用CustomPaint小部件在画布上绘制painter对象,painter对象使用MyPainter类创建,并将_position变量传递给构造函数以设置其初始位置。