[英]Move, zoom and resize Positioned widget inside Stack widget in Flutter
我希望能够移动、旋转和缩放您在图像中看到的每个元素:例如 3 张图片和 1 个文本。 这些元素是 Stack 小部件内的定位小部件(红色框)。
我正在尝试使用包matrix_gesture_detector
( https://pub.dev/packages/matrix_gesture_detector ),但问题是我无法对 Positioned 执行给定的操作,也无法将其包装在任何其他小部件中(例如 MatrixGestureDetector)处理所有操作,因为“定位小部件必须直接放置在堆栈小部件内”。
如果我使用 MatrixGestureDetector 作为 Positioned 的子级,我可以执行所有操作,但只能在 Positioned 边界内
如何直接在定位上执行这些操作? 或者我可以使用其他小部件而不是 Stack/Positioned 吗?
对我来说它工作得很好..尝试这样的事情:
首先我做了一个小部件,这样每个小部件都可以有自己的变压器矩阵
class TransformerWidget extends StatefulWidget {
final Widget child;
TransformerWidget(this.child, {Key key}) : super(key: key);
@override
_TransformerWidgetState createState() => _TransformerWidgetState();
}
class _TransformerWidgetState extends State<TransformerWidget> {
final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());
@override
Widget build(BuildContext context) {
final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());
return MatrixGestureDetector(
onMatrixUpdate: (m, tm, sm, rm) {
notifier.value = m;
},
child: AnimatedBuilder(
animation: notifier,
builder: (ctx, child) {
return Transform(
transform: notifier.value,
child: widget.child,
);
},
),
);
}
}
其次,我将小部件包装在 Stack 上,如下所示:
Stack(
children: [
TransformerWidget(
Container(
color: Colors.white30,
),
),
Positioned.fill(
child: Container(
transform: notifier.value,
child: TransformerWidget(
FittedBox(
fit: BoxFit.contain,
child: Icon(
Icons.favorite,
color: Colors.deepPurple.withOpacity(0.5),
),
),
),
),
),
TransformerWidget(
Container(
decoration: FlutterLogoDecoration(),
alignment: Alignment(0, -0.5),
child: Text(
'use your two fingers to translate / rotate / scale ...',
style: Theme.of(context).textTheme.display2,
textAlign: TextAlign.center,
),
),
),
它工作得很好! 除了如果你捏或触摸两个小部件的东西,两者都会变形..仍然不知道如何解决这个问题,但它现在有效! :D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.