Flutter - 使用 Transform.rotate 旋转容器后，它的子手势检测器 ontap 方法不起作用 [英] Flutter - after rotate container with Transform.rotate, it's child gesturedetector ontap method not working
本文介绍了Flutter - 使用 Transform.rotate 旋转容器后，它的子手势检测器 ontap 方法不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我以 45 角或其他弧度旋转容器时，删除按钮、展开按钮没有执行onTap"、onPanUpdate"手势.我发现用 'RotatedBox' 旋转容器很好，但它的参数 'quarterTurns' 只支持 int 类型值.我知道Transform.rotate"和RotatedBox"之间的区别.'Transform.rotate' 只刷新 UI，而 'Rotatedbox' 影响其子布局.我不知道该怎么办.
When I rotate the container with angle 45 or other radians, the delete button、expand button not performed the 'onTap', 'onPanUpdate' gesture. I found rotate the container with 'RotatedBox' is good, but its param 'quarterTurns' only supports int type value. I know the differences between 'Transform.rotate' and 'RotatedBox'. 'Transform.rotate' only refreshes UI, and 'Rotatedbox' affects its children layout. I don't know how to do in my case.
请帮帮我，谢谢.
这是我的示例代码:
@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,
),
),
),
),
),
),
],
),
),
)));
},
),
);
}
推荐答案
这里是一个演示:希望你能理解.在顶级小部件上移动按钮.并旋转整个容器，包括按钮.也为此目的使用多堆栈.
here is an demo: hope you will get the idea. move buttons on top level widget. and rotate the full container including buttons. also use multi-stack for this purpose.
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,
),
),
),
],
),
),
),
)
],
),
),
],
),
),
);
}
}
```
这篇关于Flutter - 使用 Transform.rotate 旋转容器后，它的子手势检测器 ontap 方法不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
