Flutter第十课:Flutter组件之Container

Flutter第十课:Flutter组件之Container

一:Container组件
1.可以设置宽高:flutter中大部分组件不能设置宽高,需要依赖容器
2.添加背景颜色
3.添加背景图像
4.添加边框
5.添加内外边框margin和padding

//构造方法
 Container({
 Key? key,
 this.alignment,//控制child的对其方式
 this.padding,//设置内边距
 this.color,//设置背景色
 this.decoration,//绘制在child下层的装饰,不能与color同时使用
 this.foregroundDecoration,//绘制在child上层的装饰
 double? width,//宽
 double? height,//高
 BoxConstraints? constraints,//添加到child上额外的约束条件大小,范围约束,constraints有四个属性:minWidth、minHeight、maxWidth、maxHeight。
 this.margin,//外边距
 this.transform,////设置container的变换矩阵,类型为Matrix4
 this.transformAlignment,
 this.child,//子组件
 this.clipBehavior = Clip.none,
 }) : assert(margin == null || margin.isNonNegative),
 assert(padding == null || padding.isNonNegative),
 assert(decoration == null || decoration.debugAssertIsValid()),
 assert(constraints == null || constraints.debugAssertIsValid()),
 assert(clipBehavior != null),
 assert(decoration != null || clipBehavior == Clip.none),
 assert(color == null || decoration == null,
 'Cannot provide both a color and a decoration\n'
 'To provide both, use "decoration: BoxDecoration(color: color)".',
 ),
 constraints =
 (width != null || height != null)
 ? constraints?.tighten(width: width, height: height)
 ?? BoxConstraints.tightFor(width: width, height: height)
 : constraints,
 super(key: key);
属性名功能值所属类型
alignmenttopCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 centerRight:垂直居中水平居右对齐 bottomCenter 底部居中对齐bottomLeft:底部居左对齐 bottomRight:底部居右对齐Alignment
decoration容器的修饰器,用于背景或者borderBoxDecoration
marginContainer与外部其他组件的距离值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 方法统一设置左上右下四条边的边距,也可以调用 EdgeInsets.fromLTRB() 分别设置左上右下四条边的边距
paddingContainer边缘与Child之间的距离值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 方法统一设置左上右下四条边的边距,也可以调用 EdgeInsets.fromLTRB() 分别设置左上右下四条边的边距
transform调整旋转的角度Matrix4
height容器高度double
width容器宽度double
child容器子元素Widght

color:Color背景色,不能与 decoration 属性同时设置
decoration:Decoration装饰,也就是设置背景色、边框、圆角等,不能和color同时使用,Decoration是抽象类,一般使用BoxDecoration的实现类(FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator也是Decoration的实现类)

const BoxDecoration({
 this.color,//背景填充颜色
 this.image,//使用图片作为装饰
 this.border,//可以设置边框颜色、边框宽度、边框样式
 this.borderRadius,//边框圆角
 this.boxShadow,//阴影效果
 this.gradient,//设置成渐变效果的背景,会覆盖 color
 this.backgroundBlendMode,//混合模式(暂不了解)
 this.shape = BoxShape.rectangle,
 }) : assert(shape != null),
 assert(
 backgroundBlendMode == null || color != null || gradient != null,
 "backgroundBlendMode applies to BoxDecoration's background color or "
 'gradient, but no color or gradient was provided.'
 );

栗子:

 return Scaffold(
 body: Center(
 child: Container(
 //对齐方式
 alignment: Alignment.center,
 //内边距
 padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
 //背景色
// color: Colors.yellow,
 //装饰
 decoration: BoxDecoration(
 //背景色
 color: Colors.red,
 //图片地址
// image: DecorationImage(image: NetworkImage("url")),
 //边框
 border: Border.all(color: Color(0xff000000), width: 5.0),
 //圆角
 borderRadius: BorderRadius.only(
 topLeft: Radius.circular(10.0),
 topRight: Radius.circular(20.0),
 bottomLeft: Radius.circular(30.0),
 bottomRight: Radius.circular(40.0)),
 //阴影
 boxShadow: [BoxShadow(color: Color(0xff000000), blurRadius: 5.0)],
 //渐变色
 gradient: LinearGradient(
 colors: [Colors.amberAccent, Colors.blue, Colors.deepPurple]),
// backgroundBlendMode: BlendMode.color //混合模式
 ),
 //装饰,child之上
// foregroundDecoration: BoxDecoration(),
 child: Text(
 "我是一个文本",
 style: TextStyle(color: Colors.red),
 ),
 //宽
 width: 300.0,
 //高
 height: 300.0,
 //外边距
 margin: EdgeInsets.all(10.0),
 //根据x,y,z的值进行平移
// transform:Matrix4.translationValues(20.0, 20.0, 20.0),
 //根据x,y,z的值进行缩放,正值放大,负值缩小
// transform: Matrix4.diagonal3Values(-2, -2, 1),
 //根据z轴进行旋转
// transform: Matrix4.rotationZ(1.3),
 //根据y轴进行旋转
// transform: Matrix4.rotationY(1.3),
 //根据x轴进行旋转
// transform: Matrix4.rotationX(1.5),
 //扭曲,根据x,y轴的值进行扭曲
// transform: Matrix4.skew(1.5, 0.0),
 //扭曲,根据x轴的值进行扭曲
// transform: Matrix4.skewX(1.3),
 //扭曲,根据y轴的值进行扭曲
 transform: Matrix4.skewY(-0.5),
 ),
 ));

小知识点Tips:
*dart 1.x的时候,new是不能省略的。
dart 2.x的时候,new是可选关键词,可以省略*

作者:Rocky_ruan原文地址:https://segmentfault.com/a/1190000042535491

%s 个评论

要回复文章请先登录注册