问题描述
在使用Flutter的FlipCard组件后发现了一些问题，FlipCard组件会预留位置，预留的位置取决于正反翻面的最大一面。
如上图，我的两个单词卡片均使用的FlipCard组件，我的反面比正面长度要长，在两个组件均展示正面时，会默认为翻转后的反面保留一段距离，但我希望的效果是，两个组件的间距可以随着翻转自定义调整
解决方法
在查看了FlipCard的源码后，我自定义了FlipCard，重新定义的FilpCard代码如下：
java
import 'package:flutter/material.dart';
import 'dart:math';
class AdjustFlipCard extends StatefulWidget {
final Widget front;
final Widget back;
final int speed;
AdjustFlipCard({
Key? key,
required this.front,
required this.back,
this.speed = 500,
}) : super(key: key);
@override
_AdjustFlipCardState createState() => _AdjustFlipCardState();
}
class _AdjustFlipCardState extends State<AdjustFlipCard> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _rotation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: widget.speed),
vsync: this,
);
_rotation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _controller, curve: Curves.linear),
);
}
void _toggleCard() {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _toggleCard,
child: AnimatedBuilder(
animation: _rotation,
builder: (context, child) {
final isFront = _controller.value < 0.5;
final transform = Matrix4.identity()..setEntry(3, 2, 0.001);
transform.rotateY(_controller.value * pi);
return Transform(
transform: transform,
alignment: Alignment.center,
child: isFront ? widget.front : Transform(
transform: Matrix4.identity()..rotateY(pi),
alignment: Alignment.center,
child: widget.back,
),
);
},
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}在自定义的AdjustFlipCard中，仍然定义了正面front，反面back，保留了翻转的动画，调用该卡片，调用代码示例如下：
java
return AdjustFlipCard(
key: cardKey,
front: frontCard,
back: backCard,
);
Widget frontCard =Card(); //定义你的frontCard样式
Widget backCard =Card(); //定义你的backCard样式实现效果
