Flutter 在Flatter中创建可调整大小的视图

我正在为图像创建可调整大小的视图。代码如下：

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,
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
家：脚手架(
正文：安全区(
子项：ImageManager（），
),
),
);
}
}
最终球半径=7.5；
类ImageManager扩展StatefulWidget{
@凌驾
_ImageManagerState createState（）=>\u ImageManagerState（）；
}
类_ImageManagerState扩展状态{
double x=0；
双y=0；
双倍高度=200；
双倍宽度=300；
双纵横比=200/300；
@凌驾
小部件构建（构建上下文）{
返回堆栈(
溢出：溢出。可见，
儿童：[
定位(
顶部：_y，
左：x，
儿童：手势检测器(
onPanUpdate:（DragUpdate详细信息）{
设置状态（）{
_x+=details.delta.dx；
_y+=details.delta.dy；
});
},
孩子：Image.network(
"https://via.placeholder.com/300x200",
宽度：_宽度，
),
),
),
//左上角
定位(
顶部：_y-球半径，
左：_x-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{}，
onDragEnd:（）{}，
),
),
//中上部
定位(
顶部：_y-球半径，
左：_x+_宽度/2-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{}，
onDragEnd:（）{}，
),
),
//右上角
定位(
顶部：_y-球半径，
左：_x+_宽度-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{}，
onDragEnd:（）{}，
),
),
//中左派
定位(
顶部：_y+_高度/2-球半径，
左：_x-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{}，
onDragEnd:（）{}，
),
),
//中右翼
定位(
顶部：_y+_高度/2-球半径，
左：_x+_宽度-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{}，
onDragEnd:（）{}，
),
),
//左下角
定位(
顶部：_y+_高度-球半径，
左：_x-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{}，
onDragEnd:（）{}，
),
),
//中下部
定位(
顶部：_y+_高度-球半径，
左：_x+_宽度/2-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{}，
onDragEnd:（）{}，
),
),
//右下角
定位(
顶部：_y+_高度-球半径，
左：_x+_宽度-球半径，
孩子：球(
onDragStart:（）{}，
onDrag：（双dx，双dy）{
var-mid=（dx+dy）/2；
var newWidth=_width+2*mid；
var newHeight=newWidth*_aspectRatio；
设置状态（）{
_宽度=新宽度；
_高度=新高度；
_y=_y-dy；
_x=x-2*dx；
});
},
onDragEnd:（）{}，
),
),
],
);
}
}
类Ball扩展了无状态小部件{
最终功能启动；
最终函数onDrag；
最后一个功能是结束；
常量球（{this.onDragStart，this.onDrag，this.onDragEnd}）；
void_onDragStart（dragstart详细信息）{
如果（onDragStart！=null）onDragStart（）；
}
void\u onDragUpdate（DragUpdate详细信息）{
如果（onDrag！=null）onDrag（details.delta.dx，details.delta.dy）；
}
空白处（图纸详图）{
如果（onDragEnd！=null）onDragEnd（）；
}
@凌驾
小部件构建（构建上下文）{
返回手势检测器(
onPanStart:\u onDragStart，
onPanUpdate:\u onDragUpdate，
onPanEnd:_onDragEnd，
子：容器(
高度：2*球半径，
宽度：2*球半径，
装饰：盒子装饰(
颜色：颜色，蓝色，
边界半径：边界半径。圆形（球半径），
边界：边界(
宽度：3，
颜色：颜色，白色，
),
),
),
);
}
}

我的目标是统一调整大小，如下所示：

但是现在看来是这样

---

正如你所看到的，x和y坐标被弄乱了。这里的目标是，如果从右下角调整图像大小，则图像将保持在左上角。请帮忙。谢谢。

看看在颤振1.20，

interactiveeviewer

中实现的全新小部件。它允许您缩放和平移子对象

---

您还可以结合使用

GestureDetector

和

StatefulBuilder

在每次拖动手指时更新一个孩子

 // top left
    Positioned(
      top: _y - ballRadius,
      left: _x - ballRadius,
      child: Ball(
        onDragStart: () {},
        onDrag: (double dx, double dy) {
          var newWidth = _width - dx;
          var newHeight = newWidth * _aspectRatio;
          setState(() {
            _y = _y + (_height - newHeight);
            _x = _x + dx;
            _width = newWidth ;
            _height = newHeight;
          });
        },
        onDragEnd: () {},
      ),
    ),

右下角定位（仅用于填写答案）

并将此参数添加到image.network

fit: BoxFit.fill,

此处的完整代码：

---

您也想要拖动功能吗。。。或者你只需要调整大小功能？@mohandesR目前，我需要拖动和调整大小。请看这个。。。我试着做你想要的@莫汉德斯非常感谢你的代码。如果要求不太多，你能告诉我吗

fit: BoxFit.fill,