flutter - 在 flutter 中创建可调整大小的 View

Question

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

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 坐标被弄乱了。这里的目标是，如果您从右下角调整图像大小，则图像将保留在左上角。请帮忙解决这个问题。谢谢。

Answer 1

我像这样改变左上角的位置

 // 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: () {},
      ),
    ),

位于右下角(仅用于完成答案)

        Positioned(
      top: _y + _height - ballRadius,
      left: _x + _width - ballRadius,
      child: Ball(
        onDragStart: () {},
        onDrag: (double dx, double dy) {

          var newWidth = _width + dx;
          var newHeight = newWidth * _aspectRatio;

          setState(() {
            _width = newWidth ;
            _height = newHeight;
          });
        },
        onDragEnd: () {},
      ),
    ),

并将此参数添加到 image.network

fit: BoxFit.fill,

完整代码在这里: https://dartpad.dev/44adae92cecbd2dddc00f264293e5c3a