为前端工程师准备的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;  
} 

（编辑：PHP编程网 - 金华站长网）

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