【pub地址 】 【github地址】
dependencies:
toggle_rotate: $lastVersion
一、描述
目标: 让一个组件点击时执行旋转,再点击旋转回去。
1.所有属性:
名称 |
类型 |
功能 |
备注 |
默认 |
beginAngle |
double |
起始角度 |
角度制 |
0 |
endAngle |
double |
终止角度 |
角度制 |
0 |
durationMs |
int |
动画时长 |
毫秒 |
200 |
curve |
Curve |
动画曲线 |
- |
Curves.fastOutSlowIn |
clockwise |
bool |
是否顺时针旋转 |
- |
true |
onTap |
void Function |
点击事件 |
- |
null |
onEnd |
void Function(bool) |
动画结束回调 |
- |
null |
child |
Widget |
子组件 |
@required |
null |
2.最简使用:
ToggleRotate(
child: Icon(Icons.arrow_upward,size: 60,color: Colors.orangeAccent),
onEnd: (bool isExpanded) { // 动画结束时间
print("---expanded---:$isExpanded-------");
},
onTap: () {}, //点击事件
),
3.指定时长和曲线和方向
ToggleRotate(
curve: Curves.decelerate,
durationMs: 400,//动画时长
clockwise: false, //是否是顺时针
child: Icon(Icons.arrow_upward,size: 60,color: Colors.orangeAccent),
onTap: () {},
),
4.可使一切组件进行旋转切换
ToggleRotate(
curve: Curves.decelerate,
durationMs: 400,
child: Image(width:60,height: 60,image: AssetImage("assets/images/icon_28.jpg")),
onTap: () {},
)
5.可使旋转的角度
ToggleRotate(
beginAngle: 0, // 起始角度
endAngle: 45, // 终止角度
curve: Curves.linear,
child: Image(width:60,height: 60,image: AssetImage("assets/images/icon_28.jpg")),
onTap: () {},
)