Jak mogę obrócić widget kontenera w 2D wokół określonego punktu kontrolnego?

Question

Chciałbym wykonać bardzo prostą rotację 2D widżetu kontenera (który zawiera garść innych widżetów). Widżet ten byłby obracany wokół jednego stałego punktu w środku, bez deformacji.

Próbowałem za pomocą właściwości transform z Matrix4.rotationZ, który działa nieco - ale punkt kontrolny znajduje się w lewego górnego rogu, nie w centrum. Czy istnieje łatwy sposób określenia tego punktu kontrolnego?

Co więcej, czy istnieje łatwiejszy sposób obrócenia tego widgetu w 2D, który nie wymaga 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

Nałożyć tłumaczenie (do i od punktu podparcia) przed i po rotacji.

Możesz stworzyć sobie mały widżet, który to robi, a tym samym rozwiązać swój drugi problem w tym samym czasie (ukrywając Matrix4).

Answer 2

Porady Per Iana, spróbowałem. Wygląda na to, że działa, przynajmniej w moich ograniczonych testach.

Należy zauważyć, że zakodowałem na sztywno szerokość/wysokość docelowego kontenera. Tak więc główne właściwości, na których należy się skoncentrować dla tego kontenera, to: szerokość, wysokość, i przekształcenie. (Mimo to, że wolę przejrzysty sposób, który wykorzystuje właściwości związane pojemnika szerokość/wysokość.)

Edycja: Pojemnik jest zagnieżdżony w Transform widget. Zastosowanie alignment umożliwia dostosowanie początku transformacji w wartościach względnych, tj. W środku, w lewym górnym rogu itd.

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, 
);