如何在单击一个按钮时增加多个小部件的大小

时间:2020-08-05 12:08:40

标签: flutter flutter-widget

所以我要在这里做的是单击一个按钮,这将增加多个小部件的大小。代码在下面,解释在下面:

class MoveableStackItem extends StatefulWidget {
  final int _page;
  final double width1;
  final double height1;

  const MoveableStackItem(
      {Key key,
      @required int page,
      @required double width,
      @required double height})
      : _page = page,
        width1 = width,
        height1 = height,
        super(key: key);
  @override
  _MoveableStackItemState createState() =>
      _MoveableStackItemState(page: _page, height: height1, width: width1);
}

class _MoveableStackItemState extends State<MoveableStackItem> {
  int _page;
  double xPosition = 0;
  double yPosition = 0;
  String picDir;
  bool picState = false;

  double width1;
  double height1;
  double ratio = 2;
  Color _borderColor = Colors.black;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(0);
  bool tapState = false;

  @override
  _MoveableStackItemState(
      {@required int page, @required double width, @required double height})
      : _page = page,
        width1 = width,
        height1 = height;

  @override
  Widget build(BuildContext context) {
    switch (_page) {
      case 3:
      return Positioned(
          top: yPosition,
          left: xPosition,
          child: GestureDetector(
            onPanUpdate: (tapInfo) {
              setState(() {
                xPosition += tapInfo.delta.dx;
                yPosition += tapInfo.delta.dy;
              });
            },
            onTap: () {
              if (!tapState) {
                setState(() {
                  _borderRadius = BorderRadius.circular(10);
                  _borderColor = Colors.red;
                  tapState = !tapState;
                });
              } else {
                setState(() {
                  _borderRadius = BorderRadius.circular(0);
                  _borderColor = Colors.black;
                  tapState = !tapState;
                });
              }
            },
            onDoubleTap: () {
              setState(() {
                width1 *= ratio;
                height1 *= ratio;
              });
            },
            onLongPress: () {
              setState(() {
                width1 = 150;
                height1 = 200;
              });
            },
            child: DragTarget(
              builder: (context, candidateData, rejectedData) {
                if (picState) {
                  return AnimatedContainer(
                    width: width1 * ratio,
                    height: height1 *ratio ,
                    duration: Duration(seconds: 0),
                    curve: Curves.fastOutSlowIn,
                    decoration: BoxDecoration(
                      border: Border.all(width: 3, color: _borderColor),
                      color: Colors.white,
                      borderRadius: _borderRadius,
                    ),
                    child: Image(
                      image: AssetImage(picDir),
                    ),
                  );
                } else {
                  return AnimatedContainer(
                    width: width1 * ratio,
                    height: height1 * ratio,
                    duration: Duration(seconds: 0),
                    curve: Curves.fastOutSlowIn,
                    decoration: BoxDecoration(
                      border: Border.all(width: 3, color: _borderColor),
                      color: Colors.white,
                      borderRadius: _borderRadius,
                    ),
                    child: Placeholder(),
                  );
                }
              },

因此,在不同情况下(仅显示情况3),屏幕上将出现不同的小部件,在情况4中,我所拥有的是带有图标“ +”和“-”的小部件,其中将更改比率值,代码如下:

 case 4:
        return Positioned(
          right:0,
          top: 0,
          child: Row(
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.add),
                        onPressed: _handleZoomIn,
                      ),
                      IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: _handleZoomOut,
                      ),
                    ],
                  )
        );
        break;
        
    }
  }
  void _handleZoomIn() {
    setState(() {
      ratio *= 1.5;
      print(ratio);
    });
  }

  void _handleZoomOut() {
    setState(() {
      ratio /= 1.5;
      print(ratio);
    });
  }

但是似乎无论我更改比率的值,它都不会影响在情况3中创建的小部件的大小,我发现的第一个问题是比率更改的值并没有持续存在,即使单击+或-之后,比率也可用于创建新的小部件/双击可增加比率扩展。 第二个问题是增加多个对象的主要问题,但是即使单击+-也没有任何反应。请随时询问是否缺少任何信息!

0 个答案:

没有答案