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

Dart

var container = Container( // grey box 
  child:  Center( 
    child:  Text( 
      "Lorem ipsum", 
      style: bold24Roboto, 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

1.4 设置容器宽度

Container widget 的宽度可以用它的 width 属性指定，但需要注意的是，和 CSS 中的 max-width 属性用于指定容器可调整的最大宽度值不同的是，这里指定的是一个固定宽度。要在 Flutter 中模拟 max-width 的效果，可以使用 Container 的 constraints 属性。新建一个带有 minWidth 和 maxWidth 属性的 BoxConstraints widget。 而对嵌套的 Container 来说，如果其父元素宽度小于子元素宽度，则子元素实际尺寸以父元素大小为准。

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; 
  width: 100%; 
  max-width: 240px;  
} 

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
      ), 
      padding: EdgeInsets.all(16.0), 
      width: 240.0, //max-width is 240.0 
    ), 
  ), 
  width: 320.0,  
  height: 240.0, 
  color: Colors.grey[300], 
); 

二、位置与大小

以下示例将展示如何对 widget 的位置、大小以及背景进行更复杂的操作。

2.1 绝对定位

默认情况下， widget 是相对于其父元素定位的。要通过 x-y 坐标指定一个 widget 的绝对位置，请把它嵌套在一个 Positioned widget 中，而该 widget 则需被嵌套在一个 Stack 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; 
  position: relative;  
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  position: absolute; 
  top: 24px; 
  left: 24px;  
} 

（编辑：ASP站长网）