Flutter中多个FlipCard的动态排布问题

问题描述

在使用Flutter的FlipCard组件后发现了一些问题，FlipCard组件会预留位置，预留的位置取决于正反翻面的最大一面。

如上图，我的两个单词卡片均使用的FlipCard组件，我的反面比正面长度要长，在两个组件均展示正面时，会默认为翻转后的反面保留一段距离，但我希望的效果是，两个组件的间距可以随着翻转自定义调整

解决方法

在查看了FlipCard的源码后，我自定义了FlipCard，重新定义的FilpCard代码如下：

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，保留了翻转的动画，调用该卡片，调用代码示例如下：

return AdjustFlipCard(  
key: cardKey,  
front: frontCard,  
back: backCard,  
);
Widget frontCard =Card();  //定义你的frontCard样式
Widget backCard =Card(); //定义你的backCard样式

实现效果