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

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        gradient: LinearGradient( 
          begin: const Alignment(0.0, -1.0), 
          end: const Alignment(0.0, 0.6), 
          colors: <Color>[ 
            const Color(0xffef5350), 
            const Color(0x00ef5350) 
          ], 
        ), 
      ),  
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

三、图形/形状

以下示例将展示如何新建和自定义图形。

3.1 圆角

在矩形上实现圆角，可以用 BoxDecoration 对象的 borderRadius 属性。新建一个 BorderRadius 对象来指定每个圆角的半径大小。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* gray 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; 
  border-radius: 8px;  
} 

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red circle 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
        borderRadius: BorderRadius.all( 
          const Radius.circular(8.0), 
        ),  
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

3.2 阴影

（编辑：ASP站长网）