Flutter -在使用Transform.rotate旋转容器后，其子手势检测器ontap方法不起作用
Flutter -在使用Transform.rotate旋转容器后，其子手势检测器ontap方法不起作用
提问于 2021-07-27 18:21:39
当我以45度或其他弧度旋转容器时，delete按钮、expand按钮没有执行'onTap'，'onPanUpdate‘手势。我发现使用'RotatedBox‘来旋转容器是很好的，但是它的参数'quarterTurns’只支持整型值。我知道'Transform.rotate‘和'RotatedBox’之间的区别。'Transform.rotate‘只刷新UI，而'Rotatedbox’会影响其子布局。我不知道我的情况该怎么做。
请帮帮我，谢谢。
下面是我的示例代码：
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider.value(
value: stickersViewNotifier,
child: Consumer<KSStickersViewNotifier>(
builder: (context, notifier, child) {
return Positioned(
left: stickersViewNotifier._left,
top: stickersViewNotifier._top,
child: GestureDetector(
onTap: () {
stickersViewNotifier.updateShouldShowControl(!stickersViewNotifier.shouldShowControl);
},
onPanDown: (DragDownDetails e) {
print("${e.globalPosition}");
},
onPanUpdate: (DragUpdateDetails e) {
stickersViewNotifier.panContainer(e.delta.dx, e.delta.dy);
},
onPanEnd: (DragEndDetails e) {
//打印滑动结束时在x、y轴上的速度
print(e.velocity);
},
child: Transform.rotate(
angle: 45 / 180 * math.pi,
child: Container(
width: stickersViewNotifier._width,
height: stickersViewNotifier._height,
child: Stack(
children: [
Padding(
padding: EdgeInsets.all(controlButtonWidth * 0.33),
child: DottedBorder(
color: stickersViewNotifier.shouldShowControl ? Colors.black : Colors.transparent,
strokeWidth: 1,
dashPattern: [5, 5, 5, 5],
child: Container(
width: double.infinity,
height: double.infinity,
child: Padding(
padding: EdgeInsets.all(controlButtonWidth * 0.67),
child: Center(
child: containerWidget,
),
),
),
),
),
Offstage(
offstage: !stickersViewNotifier.shouldShowControl,
child: GestureDetector(
onTap: () {
onDelete(notifier.tag);
},
child: Container(
width: controlButtonWidth,
height: controlButtonWidth,
decoration: BoxDecoration(color: Colors.redAccent, borderRadius: BorderRadius.circular(controlButtonWidth / 2)),
child: Center(
child: Icon(
Icons.close_rounded,
color: Colors.white,
size: controlButtonWidth - 5,
),
),
),
),
),
Positioned(
right: 0,
child: Offstage(
offstage: !stickersViewNotifier.shouldShowControl,
child: GestureDetector(
child: Container(
width: controlButtonWidth,
height: controlButtonWidth,
decoration: BoxDecoration(color: Colors.redAccent, borderRadius: BorderRadius.circular(controlButtonWidth / 2)),
child: Center(
child: Icon(
Icons.refresh_rounded,
color: Colors.white,
size: controlButtonWidth - 5,
),
),
),
),
),
),
Positioned(
right: 0,
bottom: 0,
child: Offstage(
offstage: !stickersViewNotifier.shouldShowControl,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
double dx = details.delta.dx;
double dy = details.delta.dy;
stickersViewNotifier.zoom(dx, dy);
},
child: Container(
width: controlButtonWidth,
height: controlButtonWidth,
decoration: BoxDecoration(color: Colors.redAccent, borderRadius: BorderRadius.circular(controlButtonWidth / 2)),
child: Center(
child: Icon(
Icons.zoom_out_map_rounded,
color: Colors.white,
size: controlButtonWidth - 8,
),
),
),
),
),
),
],
),
),
)));
},
),
);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-28 12:05:01
这里有一个演示:希望你能理解。在顶层小工具上移动按钮。并旋转包括按钮的整个容器。也可以使用多堆栈来实现此目的。
import 'dart:math';
import 'package:flutter/material.dart';
class DeleteOnRotate extends StatefulWidget {
DeleteOnRotate({Key? key}) : super(key: key);
@override
_DeleteOnRotateState createState() => _DeleteOnRotateState();
}
class _DeleteOnRotateState extends State<DeleteOnRotate> {
double _angle = 0;
bool _visible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: TextButton(
child: Text("ChangeVisibility"),
onPressed: () {
setState(() {
_visible = !_visible;
});
},
),
),
///stickerBox
if (_visible)
Container(
height: constraints.maxHeight * .6,
width: constraints.maxWidth,
color: Colors.cyanAccent.withOpacity(.2),
child: Stack(
children: [
Align(
alignment: Alignment(0, 0),
child: Transform.rotate(
angle: _angle / 180 * pi,
child: Container(
height: constraints.maxHeight * .35,
width: constraints.maxWidth * .6,
decoration: BoxDecoration(
border: Border.all(
style: BorderStyle.solid,
),
),
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
child: IconButton(
onPressed: () {
setState(() {
_visible = !_visible;
});
},
icon: Icon(
Icons.delete,
),
),
),
Positioned(
top: 0,
right: 0,
child: IconButton(
onPressed: () {
setState(() {
_angle += 45;
});
},
icon: Icon(
Icons.rotate_right,
),
),
),
],
),
),
),
)
],
),
),
],
),
),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68543155
复制相关文章
相似问题
腾讯云开发者
