Container
Container 顾名思义是容器,一个拥有绘制、定位、调整大小的 widget,Container也是进行Flutter开发最常用的组件之一。
Container常用的属性有哪些?
child
: Text(),//容器子元素
alignment
: Alignment.topCenter,//对齐方式
height
: 200.0,//容器高度
width
: 300.0,//容器宽度
decoration
: BoxDecoration(),//装饰
padding
:EdgeInsets.fromLTRB(10, 30, 5, 0),//内边距
margin
: EdgeInsets.fromLTRB(10, 30, 5, 0),//外边距
transform
:Matrix4.skewY(0.5),//旋转效果,绕Y轴倾斜
其中, decoration
,以BoxDecoration()为例:
decoration: BoxDecoration(//装饰
color
: Colors.yellow,//颜色
border
: Border.all(//边框
color
: Colors.deepOrange,//边框颜色
width
: 2.0,//边框宽度
),
borderRadius
: BorderRadius.all(//边框半径
Radius.circular(10),
)
),
demo
测试效果:
测试代码:
return Center(
child: Container(
child: Text(//容器子元素
'Flutter开发之Container组件',
textAlign:TextAlign.left,
overflow:TextOverflow.ellipsis ,
maxLines: 2,
textScaleFactor: 1.8,
style:TextStyle(
fontSize: 16.0,
color:Colors.red,
)
),
alignment: Alignment.topCenter,//对齐方式
height: 300.0,//容器高度
width: 300.0,//容器宽度
decoration: BoxDecoration(//装饰线
color: Colors.yellow,//颜色
border: Border.all(//边框
color: Colors.deepOrange,
width: 2.0
),
borderRadius: BorderRadius.all(//边框半径
// Radius.circular(150), //圆形
Radius.circular(10),
)
),
padding:EdgeInsets.fromLTRB(10, 30, 5, 0),//内边距
margin: EdgeInsets.fromLTRB(10, 30, 5, 0),//外边距
// transform:Matrix4.translationValues(100,0,0),//平移,x, y, z
transform:Matrix4.skewY(0.5),//绕Y轴倾斜
// transform:Matrix4.rotationZ(0.5),//z轴旋转
// transform:Matrix4.diagonal3Values(1, 0.5, 1),//缩放,x, y, z
),
);
参考:
https://api.flutter.dev/flutter/widgets/Container-class.html