dart - flutter 如何防止 child 与 parent 一起旋转？

Question

如何防止子文本随父文本旋转？

这是我所拥有的示例代码。我不希望文本小部件与父容器一起旋转。有没有有效的方法？否则我可能必须将子文本包装在另一个 Transform.rotate 中并将其旋转回来。

class MyRotateContainer extends StatefulWidget {
@override
  _MyRotateContainerState createState() => new _MyRotateContainerState();
}

class _MyRotateContainerState extends State<MyRotateContainer> {
@override
Widget build(BuildContext context) {
  return new Transform.rotate(
    angle: (30.0 * PI / 180.0),
    child: new Container(
      child: new Text(
        'SOME TEXT',
        textScaleFactor: 2.0,
      ),
    ));
 }
}

Answer 1

旋转问题的解决方案非常简单。您可以添加第二个 Transform.rotate ，包装您的 Text 小部件，如下面的代码所示。我向 Container 添加了红色以显示旋转的 Container。

在添加第二次旋转之前:

添加第二次旋转后:

class MyRotateContainer extends StatefulWidget {
  @override
  _MyRotateContainerState createState() => new _MyRotateContainerState();
}

class _MyRotateContainerState extends State<MyRotateContainer> {
  @override
  Widget build(BuildContext context) {
    double angle = 30.0 * pi / 180.0;

    return Transform.rotate(
      angle: angle,
      child: Container(
        color: Colors.red,
        child: Transform.rotate(
          angle: -angle,
          child: Text(
            'SOME TEXT',
            textScaleFactor: 2.0,
          ),
        ),
      ),
    );
  }
}