在 Flutter 中旋转图像

Question

我试图在 flutter 中旋转旋转框内的图像，我知道图像在框内，因此它也在旋转，但我想将它旋转回来“只有框内的图像，我想让盒子保持原样旋转”。

这是我当前的代码：

body: Center(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Transform(
                        alignment: Alignment.center,
                        transform: Matrix4.rotationZ(
                          3.1415926535897932 / 4,
                        ),
                        child: Container(
                          margin: const EdgeInsets.only(top: 20.0),
                          child: Padding(
                            padding: const EdgeInsets.all(2.0),
                            child: Container(
                              child: Image.asset("assets/images/man.png"),
                              decoration: kInnerDecoration,
                            ),
                          ),
                          height: 66.0,
                          decoration: kGradientBoxDecoration,
                        ),
                      ),
                    ),
                    Expanded(
                      child: Text("Name Row"),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Text("Bottom"),
              ),
            ],
          ),
        )

模拟器中的当前输出：

我想要的样子：

Answer 1

你可以使用相同的负值旋转回来 align 使用 transformAlignment: Alignment.center, 我正在使用 Container 的 transform，你也可以换行使用 Transform 小部件。

Transform(
  alignment: Alignment.center,
  transform: Matrix4.rotationZ(
    3.1415926535897932 / 4,
  ),
  child: Container(
    margin: const EdgeInsets.only(top: 20.0),
    child: Padding(
      padding: const EdgeInsets.all(2.0),
      child: Container(
        width: 200, // the size you prefer
        height: 200,
        transformAlignment: Alignment.center,
        transform: Matrix4.rotationZ(
          -3.1415926535897932 / 4, // here
        ),
        child: Image.asset(...)

Answer 2

我玩了一下，得到了这个代码。我把图片反旋转了，改了缩进。

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);

  final kInnerDecoration = BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.circular(32),
  );

  final kGradientBoxDecoration = BoxDecoration(
    gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]),
    borderRadius: BorderRadius.circular(32),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(padding: EdgeInsets.only(top: 50)),
                    Expanded(
                      child: Transform(
                        alignment: FractionalOffset.center,
                        transform: Matrix4.rotationZ(
                          3.1415926535897932 / 4,
                        ),
                        child: Container(
                          // margin: const EdgeInsets.only(top: 20.0),
                          child: Padding(
                            padding: const EdgeInsets.all(2.0),
                            child: Container(
                              child: Transform(
                                alignment: Alignment.center,
                                transform: Matrix4.rotationZ(
                                  -3.1415926535897932 / 4,
                                ),
                                child: Image.asset(
                                  "assets/image.png",
                                  height: 100,
                                  width: 100,
                                ),
                              ),
                              decoration: kInnerDecoration,
                            ),
                          ),
                          height: 100,
                          width: 150,
                          decoration: kGradientBoxDecoration,
                        ),
                      ),
                    ),
                    Padding(padding: EdgeInsets.only(top: 50)),
                    Expanded(
                      child: Text("Name Row"),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Text("Bottom"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在 Flutter 中旋转图像

Rotate Image in Flutter

dart

flutter

flutter-layout