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

在 CSS 中你可以通过 box-shadow 属性快速指定阴影偏移与模糊范围。比如如下两个盒阴影的属性设置：

• xOffset: 0px, yOffset: 2px, blur: 4px, color: black @80% alpha
• xOffset: 0px, yOffset: 06x, blur: 20px, color: black @50% alpha

在 Flutter 中，每个属性与其取值都是单独指定的。请使用 BoxDecoration 的 boxShadow 属性来生成一系列 BoxShadow widget。你可以定义一个或多个 BoxShadow widget，这些 widget 共同用于设置阴影深度、颜色等等。

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; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 
              0 6px 20px rgba(0, 0, 0, 0.5); 
} 

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
        boxShadow: <BoxShadow>[ 
          BoxShadow ( 
            color: const Color(0xcc000000), 
            offset: Offset(0.0, 2.0), 
            blurRadius: 4.0, 
          ), 
          BoxShadow ( 
            color: const Color(0x80000000), 
            offset: Offset(0.0, 6.0), 
            blurRadius: 20.0, 
          ), 
        ],  
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  decoration: BoxDecoration( 
    color: Colors.grey[300], 
  ), 
  margin: EdgeInsets.only(bottom: 16.0), 
); 

3.3 圆与椭圆

尽管 CSS 中有基础图形，CSS 中一个生成圆的变通方案是：将矩形的四边 border-radius 均设成50%。

虽然 BoxDecoration 的 borderRadius 属性支持这样设置，Flutter 为 BoxShape enum 提供一个 shape 属性也用于实现同样的目的。

（编辑：ASP站长网）