flutter之Container

Container类似于iOS中的UIView,具有绘制、定位、调整大小功能。通常用来装载其它子控件,假如Container没有子控件,它将自动填充整个屏幕;反之,会根据子控件大小,调整自身大小,从而达到自适应效果。

注意:使用Container时,通常要有一个父控件,一般情况下不单独使用Container。常用的父控件有Center widget、Padding Widget、Column Widget、Row Widget、Scaffold Widget。  

构造函数

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

1.alignment设置子widget的在container中的对齐方式,其对齐方式有:

1.居中下对齐

alignment:Alignment.bottomCenter;

2.左下角对齐

alignment:Alignment.bottomLeft;

3.右下角对齐

alignment:Alignment.bottomRight;

4.居中对齐

alignment:Alignment.center;

5.居中左对齐

alignment:Alignment.centerLeft;

6.居中有对齐

alignment:Alignment.centerRight;

7.居中上对齐

alignment:Alignment.topCenter;

8.右上角对齐

alignment:Alignment.topRight;

9.左上角对齐

alignment:Alignment.topLeft;

2.padding:设置container的内边距

1.根据需求设置

padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)

这里的top,bottom,left,right可以根据自己需求设置,不一定每个都要设置,不设置的就是0.0。

2.转圈设置

padding:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)

LTRB分别代表left,top,right,bottom。

3.水平垂直方向设置

padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)

vertical代表垂直方向,horizontal代表水平方向.

3.margin:设置container的外边距,其值的设置方式和padding一样

1.根据需求设置

margin: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)

这里的top,bottom,left,right可以根据自己需求设置,不一定每个都要设置,不设置的就是0.0。

2.转圈设置

margin:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)

LTRB分别代表left,top,right,bottom。

3.水平垂直方向设置

margin: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)

vertical代表垂直方向,horizontal代表水平方向.

4.color:设置container的背景颜色

1.十六进制表示方法

color: Color(0xffFFFFFF)

这里的0x是固定的,ff代表颜色的透明度,后面的六位代表颜色的值

2.ARGB表示方法

color: Color.fromARGB(2, 29, 30, 10)

A透明度,取值范围是0~255;

R红色,取值范围是0~255;

G绿色,取值范围是0~255;

B蓝色,取值范围是0~255。

3.RGBO表示方法

color: Color.fromRGBO(20, 30, 100, .9)

R红色,取值范围是0~255;

G绿色,取值范围是0~255;

B蓝色,取值范围是0~255;

O透明度,取值范围是0~1;

5.width:container的宽,用double类型的数字表示

width: 250,

6.height:container的高,用double类型的数字表示

height: 250,

7.child:container的子widget

child: Text("内容"),
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值