我正在为图像创建一个可调整大小的视图。代码如下:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: ImageManager(),
),
),
);
}
}
final ballRadius = 7.5;
class ImageManager extends StatefulWidget {
@override
_ImageManagerState createState() => _ImageManagerState();
}
class _ImageManagerState extends State<ImageManager> {
double _x = 0;
double _y = 0;
double _height = 200;
double _width = 300;
double _aspectRatio = 200 / 300;
@override
Widget build(BuildContext context) {
return Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: _y,
left: _x,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
_x += details.delta.dx;
_y += details.delta.dy;
});
},
child: Image.network(
"https://via.placeholder.com/300x200",
width: _width,
),
),
),
// top left
Positioned(
top: _y - ballRadius,
left: _x - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {},
onDragEnd: () {},
),
),
// top middle
Positioned(
top: _y - ballRadius,
left: _x + _width / 2 - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {},
onDragEnd: () {},
),
),
// top right
Positioned(
top: _y - ballRadius,
left: _x + _width - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {},
onDragEnd: () {},
),
),
// middle left
Positioned(
top: _y + _height / 2 - ballRadius,
left: _x - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {},
onDragEnd: () {},
),
),
// middle right
Positioned(
top: _y + _height / 2 - ballRadius,
left: _x + _width - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {},
onDragEnd: () {},
),
),
// bottom left
Positioned(
top: _y + _height - ballRadius,
left: _x - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {},
onDragEnd: () {},
),
),
// bottom middle
Positioned(
top: _y + _height - ballRadius,
left: _x + _width / 2 - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {},
onDragEnd: () {},
),
),
// bottom right
Positioned(
top: _y + _height - ballRadius,
left: _x + _width - ballRadius,
child: Ball(
onDragStart: () {},
onDrag: (double dx, double dy) {
var mid = (dx + dy) / 2;
var newWidth = _width + 2 * mid;
var newHeight = newWidth * _aspectRatio;
setState(() {
_width = newWidth;
_height = newHeight;
_y = _y - dy;
_x = _x - 2 * dx;
});
},
onDragEnd: () {},
),
),
],
);
}
}
class Ball extends StatelessWidget {
final Function onDragStart;
final Function onDrag;
final Function onDragEnd;
const Ball({this.onDragStart, this.onDrag, this.onDragEnd});
void _onDragStart(DragStartDetails details) {
if (onDragStart != null) onDragStart();
}
void _onDragUpdate(DragUpdateDetails details) {
if (onDrag != null) onDrag(details.delta.dx, details.delta.dy);
}
void _onDragEnd(DragEndDetails details) {
if (onDragEnd != null) onDragEnd();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onPanStart: _onDragStart,
onPanUpdate: _onDragUpdate,
onPanEnd: _onDragEnd,
child: Container(
height: 2 * ballRadius,
width: 2 * ballRadius,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(ballRadius),
border: Border.all(
width: 3,
color: Colors.white,
),
),
),
);
}
}
我的目标是统一调整大小,如下所示:
然而,目前看来是这样的。
正如你所看到的,x 和 y 坐标被弄乱了。这里的目标是,如果您从右下角调整图像大小,则图像将保留在左上角。请帮忙解决这个问题。谢谢。