如果您在使用AnimatedContainer时遇到不希望的旋转效果,您可以使用Transform组件来控制旋转的角度。以下是一个示例代码:
import 'package:flutter/material.dart';
class MyAnimatedContainer extends StatefulWidget {
@override
_MyAnimatedContainerState createState() => _MyAnimatedContainerState();
}
class _MyAnimatedContainerState extends State {
double _rotationAngle = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedContainer Rotation'),
),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_rotationAngle += 45; // 每次点击增加45度
});
},
child: AnimatedContainer(
duration: Duration(seconds: 1),
width: 200,
height: 200,
color: Colors.blue,
transform: Matrix4.rotationZ(_rotationAngle * 0.0174533), // 将角度转换为弧度
),
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyAnimatedContainer(),
));
}
在上面的示例中,我们使用了一个GestureDetector来检测点击事件,并通过setState来更新_rotationAngle的值。在AnimatedContainer中,我们将transform属性设置为Matrix4.rotationZ来控制旋转的角度,其中_rotationAngle被转换为弧度。每次点击都会增加45度的角度,产生旋转的效果。
请注意,Matrix4.rotationZ的参数需要弧度而不是度数,因此我们乘以0.0174533来将角度转换为弧度。