所以我要在这里做的是单击一个按钮,这将增加多个小部件的大小。代码在下面,解释在下面:
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中创建的小部件的大小,我发现的第一个问题是比率更改的值并没有持续存在,即使单击+或-之后,比率也可用于创建新的小部件/双击可增加比率扩展。 第二个问题是增加多个对象的主要问题,但是即使单击+-也没有任何反应。请随时询问是否缺少任何信息!