为前端工程师准备的Flutter入门指南(3)

Dart

var container = Container( // grey box 
  child: Stack( 
    children: [ 
      Positioned( // red box 
        child:  Container( 
          child: Text( 
            "Lorem ipsum", 
            style: bold24Roboto, 
          ), 
          decoration: BoxDecoration( 
            color: Colors.red[400], 
          ), 
          padding: EdgeInsets.all(16.0), 
        ), 
        left: 24.0, 
        top: 24.0, 
      ), 
    ], 
  ),  
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

2.2 旋转

要旋转一个 widget，请将它嵌套在 Transform widget 中。其中，使用 Transform widget 的 alignment 和 origin 属性分别来指定转换原点的具体位置信息。

对于简单的 2D 旋转，widget 是依据弧度在 Z 轴上旋转的。(角度 × π / 180)

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  transform: rotate(15deg);  
} 

Dart

var container = Container( // gray box 
  child: Center( 
    child:  Transform( 
      child:  Container( // red box 
        child: Text( 
          "Lorem ipsum", 
          style: bold24Roboto, 
          textAlign: TextAlign.center, 
        ), 
        decoration: BoxDecoration( 
          color: Colors.red[400], 
        ), 
        padding: EdgeInsets.all(16.0), 
      ), 
      alignment: Alignment.center, 
      transform: Matrix4.identity() 
        ..rotateZ(15 * 3.1415927 / 180), 
    ),  
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

2.3 缩放元素

将元素嵌套在一个 Transform widget 中，可以实现缩放。使用 Transform widget 的 alignment 和 origin 属性分别来指定缩放原点的具体位置信息。

对于沿 x 轴的简单缩放操作，新建一个 Matrix4 标识对象并用它的 scale() 方法来指定缩放因系数。

当你缩放一个父 widget 时，它的子 widget 也会相应被缩放。

（编辑：ASP站长网）