玖叶教程网

前端编程开发入门

Flutter控件(一):Container容器控件

注意:为了阅读美观,文章前面的代码都是通过截图方式呈现。具体可复制代码在文章最下方。(转发分享赠送flutter视频教程)


最常用的默认布局。

最常用的默认布局,只能包含一个child。支持配置 padding、margin、color、width、height、decoration(一般配置边框和阴影)等配置,在 Flutter 中,不是所有的控件都有 width、height、padding、margin、color 等属性,所以才会有 Padding、Center 等 Widget 的存在。

官方注释说明:

注释翻译如下:

创建一个组合了【常用绘制、定位和大小调整】的小部件。宽高的值包括填充。参数“color”是“decoration:new boxdecoration(color:color)”的缩写,这意味着您不能同时提供两种颜色。如果要同时具有“color”和` decoration`属性,可以将颜色作为“color”参数传递给BoxDecoration。

要点概括如下:

1:Container控件的大小的大小可以通过width、height属性来指定,也可以通过constraints来指定,如果同时存在时,width、height优先。实际上Container内部会根据width、height来生成一个constraints。

2:属性color和decoration不能同时出现。color和decoration是互斥的,实际上,当指定color时,Container内会自动创建一个decoration。

下面是属性color和decoration同时出现报错的详细说明:

出现报错:color==null||decoration==null cannot provide both acolor and a decoration .The color argument is just a shorthand for "decoration:new BoxDecoration(color :color)"

其他属性:

 
 this.alignment, //对齐方式
 this.padding, //容器内补白,属于decoration的装饰范围 
 Color color, // 背景色 
 Decoration decoration, // 背景装饰 
 Decoration foregroundDecoration, //前景装饰 
 double width, //容器的宽度 
 double height, //容器的高度 
 BoxConstraints constraints, //容器大小的限制条件 
 this.margin, //容器外补白,不属于decoration的装饰范围 
 this.transform, //变换 
 this.child //子控件
 

示例:

调研

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言