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

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: scale(1.5);  
} 

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() 
        ..scale(1.5), 
     ),  
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

2.4 线性变换

将元素嵌套在一个 Container widget 中，可以将线性变换应用在 widget 的背景上。之后，再用 Container widget 的 decoration 属性生成一个 BoxDecoration 对象，然后使用 BoxDecoration 的 gradient 属性来变换背景填充内容。

变换“角度”基于 Alignment (x, y) 取值来定：

• 如果开始和结束的 x 值相同，变换将是垂直的(0°180°)。
• 如果开始和结束的 y 值相同，变换将是水平的(90°270°)。

这里，只展示垂直变换的代码差异：

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 { 
  padding: 16px; 
  color: #ffffff; 
  background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);  
} 

（编辑：ASP站长网）