如何圍繞指定的錨點在 2D 中旋轉容器小部件？

Question

我想對 Container 小部件（包含一些其他小部件）執行非常簡單的 2D 旋轉。這個小部件將圍繞中心的單個固定點旋轉，沒有變形。

我嘗試使用transform財產Matrix4.rotationZ ，這在一定程度作品-但錨點是在左上角，而不是在中心。 有沒有一種簡單的方法來指定該錨點？

此外，是否有更簡單的方法來 2D 旋轉這個不需要 Matrix4 的小部件？

var container = new Container (
  child: new Stack (
    children: [
      new Image.asset ( // background photo
        "assets/texture.jpg",
        fit: ImageFit.cover,
      ),
      new Center (
        child: new Container (
          child: new Text (
            "Lorem ipsum",
            style: new TextStyle(
              color: Colors.white,
              fontSize: 42.0,
              fontWeight: FontWeight.w900
            )
          ),
          decoration: new BoxDecoration (
            backgroundColor: Colors.black,
          ),
          padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
          transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg
        ),
      ),
    ],
  ),
  width: 400.0,
  height: 200.0,
);

Answer 1

根據伊恩的建議，我嘗試了以下方法。 它似乎有效，至少在我有限的測試中。

容器嵌套在Transform 小部件中。 使用alignment允許以相對方式調整變換原點，即在中心、左上角等。

var container = new Container (
  child: new Stack (
    children: [
      new Image.asset ( // background photo
        "assets/texture.jpg",
        fit: ImageFit.cover,
      ),
      new Center (
        child: new Transform (
          child: new Container (
            child: new Text (
              "Lorem ipsum",
              style: new TextStyle(
                color: Colors.white,
                fontSize: 42.0,
                fontWeight: FontWeight.w900,
              )
            ),
            decoration: new BoxDecoration (
              backgroundColor: Colors.black,
            ),
            padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),              
          ),
          alignment: FractionalOffset.center, // set transform origin
          transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg
        ),
      ),
    ],
  ),
  width: 400.0,
  height: 200.0,
);

Answer 2

您可以使用 RotatedBox Widget 來旋轉任何小部件：

RotatedBox(
    quarterTurns: 3,
    child: Container(
        color:Colors.red
    ),
),

Answer 3

在旋轉之前和之后應用平移（往返於支點）。

您可以為自己創建一個小部件來執行此操作，從而同時解決您的其他問題（隱藏 Matrix4）。

Answer 4

在顫振 2.2 中

使用變換：

Transform(
    transform: Matrix4.rotationZ(...),
    alignment: FractionalOffset.center,
    child: Container(...)

或者在 Container 中設置transformAlignment值：

Container(
    ...
    transform: Matrix4.rotationZ(...),
    transformAlignment: Alignment.center,
)

Answer 5

對於像我這樣想制作應用程序的人，只需使用Transform和Gesturedetector 。 記住不要同時使用 Draggable 和 Gesturedetector，因為您只能拖放而不能縮放小部件:))。

參考： 深入了解 Flutter 中的轉換小部件

倒鈎

：

             Transform.rotate(
                  alignment: FractionalOffset.center,
                  angle: state.listStickerModel[index].angle,
                  child: Transform(
                    alignment: FractionalOffset.center,
                    transform: new Matrix4.diagonal3(vector.Vector3(
                        state.listStickerModel[index].zoom,
                        state.listStickerModel[index].zoom,
                        state.listStickerModel[index].zoom)),
                    child: GestureDetector(
                      onScaleStart: (detail) {
                        _editPhotoBloc.add(UpdateSticker(
                          index: index,
                          offset: detail.focalPoint,
                          previousZoom: state.listStickerModel[index].zoom,
                        ));
                      },
                      onScaleUpdate: (detail) {
                        _editPhotoBloc.add(UpdateSticker(
                            index: index,
                            offset: Offset(detail.localFocalPoint.dx,
                                detail.focalPoint.dy),
                            angle: detail.rotation,
                            zoom:
                                state.listStickerModel[index].previousZoom *
                                    detail.scale));
                      },
                      child: Container(
                        alignment: Alignment.center,
                        child: SvgPicture.asset(
                            state.listStickerModel[index].src),
                      ),
                    ),
                  ),
                ),