在带有手势检测器的客户画家中移动圆圈不起作用



import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isDown = false;
var xPos = 5.0;
var yPos = 5.0;
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Builder(builder: (BuildContext context) {
return Scaffold(
body: Center(
child: Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
color: Colors.grey,
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.3,
),
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: LayoutBuilder(
builder: (_, constraints) => Container(
width: constraints.widthConstraints().maxWidth,
height: constraints.widthConstraints().maxHeight,
color: Colors.white,
child: Stack(children: [
// plotting X Y axis
SizedBox(
width: constraints.widthConstraints().maxWidth,
height:
constraints.widthConstraints().maxHeight,
child: CustomPaint(painter: PlotPainter())),
GestureDetector(
onPanUpdate: (details) {
final tapPos = details.localPosition;
if (tapPos.dx > 5 &&
tapPos.dx <
constraints
.widthConstraints()
.maxWidth) {
setState(() {
xPos = tapPos.dx - 5;
yPos = tapPos.dy - 5;
});
}
if (tapPos.dy > 5 &&
tapPos.dy <
constraints
.widthConstraints()
.maxHeight) {
setState(() {
yPos = tapPos.dy - 5;
});
}
},
child: SizedBox(
width:
constraints.widthConstraints().maxWidth,
height:
constraints.widthConstraints().maxHeight,
child: CustomPaint(
painter: PointsPainter(xPos, yPos))),
),
// plotting points
]),
)),
),
),
);
}));
}
}
class PointsPainter extends CustomPainter {
PointsPainter(this.xPos, this.yPos);
double xPos;
double yPos;
@override
void paint(Canvas canvas, Size size) {
// TODO: implement points
final midY = size.height / 2;
final midX = size.width / 2;
final Circlepaint = Paint()
..style = PaintingStyle.fill
..color = Colors.red;
canvas.drawCircle(Offset(xPos, yPos), 5, Circlepaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}
// drawing the x y axis
class PlotPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final midY = size.height / 2;
final midX = size.width / 2;
final paint = Paint()
..style = PaintingStyle.fill
..color = Colors.black
..strokeWidth = 1.0;
final textPainterx = TextPainter(
text: const TextSpan(
text: 'x',
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center);
final textPaintery = TextPainter(
text: const TextSpan(
text: 'y',
style: TextStyle(
color: Colors.black,
fontSize: 13,
),
),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center);
// X axis
canvas.drawLine(Offset(0, midY), Offset(size.width, midY), paint);
//y Axis
canvas.drawLine(Offset(midX, 0), Offset(midX, size.height), paint);
//arrow head of the X-Y Axis
canvas.drawLine(
Offset(size.width, midY), Offset(size.width - 5, midY - 3), paint);
canvas.drawLine(
Offset(size.width, midY), Offset(size.width - 5, midY + 3), paint);
canvas.drawLine(Offset(midX, 0), Offset(midX - 3, 5), paint);
canvas.drawLine(Offset(midX, 0), Offset(midX + 3, 5), paint);
textPainterx.layout();
textPaintery.layout();
// Draw the text  X at the X axis
textPainterx.paint(canvas, Offset(size.width - 7, midY + 1));
// Draw the text  y at the Y axis
textPaintery.paint(canvas, Offset(midX + 5, 0));
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}

问题是您没有将自定义画家包裹在手势检测器中，现在它工作正常现在您只需要添加一个条件，即它不会在给定高度上上下移动