颤动如何防止孩子与父母一起轮换？

Question

如何防止子文本与父项一起旋转？

这是我所拥有的示例代码。我不希望Text小部件与父Container一起旋转。这样做有效吗？否则我可能必须将子Text包装在另一个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,
          ),
        ),
      ),
    );
  }
}