为前端工程师筹备的Flutter入门指南

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;  
} 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!