英文:
How can I display text on the back of my card in the correct writing direction?
问题
我有一个Flutter容器，用GestureDetector切换其前后两面。该容器通过Transform方法进行动画处理，围绕Y轴旋转以切换前后两面。
我的问题是容器背面的文本未正确对齐。文本显示为镜像。我尝试更改Text小部件的textDirection属性以使文本从右到左或从左到右对齐，但未成功。
旋转后，有没有另一种方法正确对齐容器背面的文本？
这是我的当前代码：
import 'dart:math';
import 'package:flutter/material.dart';
class FlipCard extends StatefulWidget {
const FlipCard({Key? key}) : super(key: key);
@override
State<FlipCard> createState() => _FlipCardState();
}
class _FlipCardState extends State<FlipCard>
with SingleTickerProviderStateMixin {
bool _isFrontVisible = true;
late AnimationController _flipAnimationController;
late Animation<double> _flipAnimation;
@override
void initState() {
super.initState();
_flipAnimationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_flipAnimation =
Tween<double>(begin: 0.0, end: 1.0).animate(_flipAnimationController);
}
@override
void dispose() {
_flipAnimationController.dispose();
super.dispose();
}
void _toggleCard() {
if (_isFrontVisible) {
_flipAnimationController.forward();
} else {
_flipAnimationController.reverse();
}
_isFrontVisible = !_isFrontVisible;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: () => _toggleCard(),
child: AnimatedBuilder(
animation: _flipAnimation,
builder: (context, child) {
final value = _flipAnimation.value;
final perspective = 0.002;
final angle = value * pi;
final isFrontFacing = angle <= pi / 2;
return Transform(
transform: Matrix4.identity()
..setEntry(3, 2, perspective)
..rotateY(angle),
alignment: Alignment.center,
child: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: isFrontFacing ? Colors.white : Colors.blueGrey,
),
child: Center(
child: Text(
isFrontFacing ? "Vorderseite" : "Rückseite",
style: TextStyle(
fontSize: 20,
color: isFrontFacing ? Colors.black : Colors.white,
),
textDirection:
isFrontFacing ? TextDirection.rtl : TextDirection.ltr,
),
),
),
);
},
),
),
),
);
}
}
英文:
I have a Flutter container that is toggled with a GestureDetector to switch between its front and back sides. The container is animated with the Transform method, rotating around the Y-axis to switch between the front and back sides.
The problem I have is that the text on the back side of the container is not properly aligned. The text appears mirrored. I have tried changing the textDirection property of the Text widget to align the text from right to left or left to right, but it didn't work.
Is there another way to properly align the text on the back of the container after it has been rotated?
Here is my current code:
import 'dart:math';
import 'package:flutter/material.dart';
class FlipCard extends StatefulWidget {
const FlipCard({Key? key}) : super(key: key);
@override
State<FlipCard> createState() => _FlipCardState();
}
class _FlipCardState extends State<FlipCard>
with SingleTickerProviderStateMixin {
bool _isFrontVisible = true;
late AnimationController _flipAnimationController;
late Animation<double> _flipAnimation;
@override
void initState() {
super.initState();
_flipAnimationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_flipAnimation =
Tween<double>(begin: 0.0, end: 1.0).animate(_flipAnimationController);
}
@override
void dispose() {
_flipAnimationController.dispose();
super.dispose();
}
void _toggleCard() {
if (_isFrontVisible) {
_flipAnimationController.forward();
} else {
_flipAnimationController.reverse();
}
_isFrontVisible = !_isFrontVisible;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onTap: () => _toggleCard(),
child: AnimatedBuilder(
animation: _flipAnimation,
builder: (context, child) {
final value = _flipAnimation.value;
final perspective = 0.002;
final angle = value * pi;
final isFrontFacing = angle <= pi / 2;
return Transform(
transform: Matrix4.identity()
..setEntry(3, 2, perspective)
..rotateY(angle),
alignment: Alignment.center,
child: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: isFrontFacing ? Colors.white : Colors.blueGrey,
),
child: Center(
child: Text(
isFrontFacing ? "Vorderseite" : "Rückseite",
style: TextStyle(
fontSize: 20,
color: isFrontFacing ? Colors.black : Colors.white,
),
textDirection:
isFrontFacing ? TextDirection.rtl : TextDirection.ltr,
),
),
),
);
},
),
),
),
);
}
}
Thank you in advance for your help!
答案1
得分: 1
将卡片内部的文本小部件进行转换（用于“背面”）是一种可能性。
下面我们将正面和背面的卡片拆分为各自的小部件，然后根据 isFrontFacing 调用相应的小部件。
class CardTextBack extends StatelessWidget {
const CardTextBack();
@override
Widget build(BuildContext context) {
return Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(pi),
child: const Text("Rückseite",
style: TextStyle(
fontSize: 20,
color: Colors.white,
)));
}
}
class CardTextFront extends StatelessWidget {
const CardTextFront();
@override
Widget build(BuildContext context) {
return const Text("Vorderseite",
style: TextStyle(
fontSize: 20,
color: Colors.black,
));
}
}
class CardText extends StatelessWidget {
const CardText(this.isFrontFacing);
final bool isFrontFacing;
@override
Widget build(BuildContext context) {
if (isFrontFacing) {
return const CardTextFront();
}
return const CardTextBack();
}
}
在你的 _FlipCardState 中，将最终的 child: 替换为：
child: Center(child: CardText(isFrontFacing)),
英文:
Transforming the Text widget inside the card (for the "backside") is one possibility.
Below we've split the front & back cards into their own Widgets, then call either Widget depending on isFrontFacing.
class CardTextBack extends StatelessWidget {
const CardTextBack();
@override
Widget build(BuildContext context) {
return Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(pi),
child: const Text("Rückseite",
style: TextStyle(
fontSize: 20,
color: Colors.white,
)));
}
}
class CardTextFront extends StatelessWidget {
const CardTextFront();
@override
Widget build(BuildContext context) {
return const Text("Vorderseite",
style: TextStyle(
fontSize: 20,
color: Colors.black,
));
}
}
class CardText extends StatelessWidget {
const CardText(this.isFrontFacing);
final bool isFrontFacing;
@override
Widget build(BuildContext context) {
if (isFrontFacing) {
return const CardTextFront();
}
return const CardTextBack();
}
}
In your _FlipCardState we replace your final child: with:
child: Center(child: CardText(isFrontFacing)),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论