skew，水平或者垂直倾斜
class ContainerTransform extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
//容器
alignment: Alignment.center,
color: Colors.cyanAccent,
width: 150,
height: 150 * 0.618,
transform: Matrix4.skew(-pi/10,0),
child: Text(
"Container",
style: TextStyle(fontSize: 20),
),
);
}
}
alignment,
这里用了 Alignment.center，所以容器会围绕自己的中心做斜切，而不是默认的左上角。
了解skew的作用
如上图，蓝色方块，就将是应用skew之后的效果图
Matrix4.skew(skewX, skewY)
skewX：水平方向的倾斜角度（以弧度为单位），正值向右倾，负值向左倾。skewY：垂直方向的倾斜角度，正值向下倾，负值向上倾。
Skew along the X-axis with positive alpha，
transform: Matrix4.skewX(0.3)，正值，向右边倾斜。
Container( //grey-background container
margin: EdgeInsets.only(top: 60, left: 60),
color: Color(0xFFCCCCCC), //grey
width: double.infinity,
height: 240,
alignment: Alignment.topLeft, //align its child (blue-container)
child: Transform(
transform: Matrix4.skewX(0.3),
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(10.0),
),
width: 220,
height: 120,
),
),
)
Skew along the X-axis with negative alpha，倾斜负值
Matrix4.skewX(-0.3),负值向左倾
Container( //grey-background container
margin: EdgeInsets.only(top: 60, left: 60),
color: Color(0xFFCCCCCC), //grey
width: double.infinity,
height: 240,
alignment: Alignment.topLeft, //align its child (blue-container)
child: Transform(
transform: Matrix4.skewX(-0.3),
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(10.0),
),
width: 220,
height: 120,
),
),
);
Changing the origin of the skew，修改倾斜的变换中心
Container( //grey-background container
margin: EdgeInsets.only(top: 60, left: 60),
color: Color(0xFFCCCCCC),
width: double.infinity,
height: 240,
alignment: Alignment.topLeft, //align its child (blue-container)
child: Transform(
transform: Matrix4.skewX(-0.3),
alignment: Alignment.bottomLeft, //changing the origin
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(10.0),
),
width: 220,
height: 120,
),
),
);
