我正在尝试在 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"),
),
],
),
)
最佳答案
我玩了一下并得到了这个代码。我对图片进行了反向旋转并更改了缩进。
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 - 在 Flutter 中旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71354110/