布局 Widget
排列其它widget的columns、rows、grids和其它的layouts。
根据不同的可以分为三类
拥有单个子元素的布局widget
1.Container
一个拥有绘制、定位、调整大小的 widget。
属性:
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
alignment 将容器中的子对齐。
这个方法适用于排列子布局在Container中的位置。(可以安排到外面去)
new Container(
color: Colors.blue,
alignment: new Alignment(0, 0),
child: new Image.network('http://pic14.nipic.com/20110605/1369025_165540642000_2.jpg',
fit:BoxFit.cover,
width: 150,
height: 150,
),
width:200,
height:200,)
当 设置为 new Alignment(0, 0) 时 image居中
image.png
当 设置为 new Alignment(1, 1) 时 image右下角
image.png
当 设置为 new Alignment(-1, -1) 时 image左上角
image.png
这样看来这个 1 指的就是宽高的一半了。相对于居中位置移动Alignment个Container的一半宽/高
当然也可以用Alignment得常量，Alignment.center等等
padding 控件内边距
使用 EdgeInsets 来设置 四个方向的数值
EdgeInsets:An immutable set of offsets in each of the four cardinal directions.(在四个基本方向中每一个方向的一组不可改变的偏移量)
new Container(
color: Colors.blue,
padding: const EdgeInsets.all(5),
child: new Image.network('http://pic14.nipic.com/20110605/1369025_165540642000_2.jpg',
fit:BoxFit.cover,
width: 100,
height: 100,
),
width:200,
height:200,)
image.png
你会发现子控件的height和width失效了
color 背景颜色
这个不解释了
decoration 盒子装饰的描述（应用于装饰的装饰）
可以用于描述布局容器的样式
可以用到的类包括下面几种:
BoxDecoration* FlutterLogoDecoration* ShapeDecoration* UnderlineTabIndicator
比如使用BoxDecoration 写一个圆角边框
new Container(
child: new Image.network('http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg',fit: BoxFit.cover,),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(new Radius.circular(10)),
border: Border.all(
color: Colors.red,
width: 8.0,
),
),
width: 200,
height: 200,
),
image.png
foregroundDecoration 前景装饰描述
和background相反，是作为child层之上的。
new Container(
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7ae85e47d1c451daf6f60bed8ec6355b/3b87e950352ac65c7105a06af7f2b21193138aa3.jpg'),
),
),
child: new Image.network(
'http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg',
fit: BoxFit.cover,
),
width: 200,
height: 200,
)
image.png
width, height 控件宽高
这个不解释 值得注意的是 这个属性容易失效 真的要设置控件大小可以使用 constraints 属性
constraints 一组抽象的布局约束。
new Container(
color: Colors.blue,
constraints: BoxConstraints.expand(
width: 100,
height: 100,
),
child: new Image.network(
'http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg',
fit: BoxFit.cover,
),
width: 200,
height: 200,
)
可以看到同时设置height /width 和 constraints 之后
明细 constraints 的优先级高一点
默认的:
constraints: BoxConstraints.expand()
是占满剩余空间的
margin 控件外边距 这个没什么解释的
new Container(
margin: const EdgeInsets.all(10),
constraints: BoxConstraints.expand(
),
child: new Image.network(
'http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg',
fit: BoxFit.cover,
),
width: 200,
height: 200,
)
image.png
transform 在绘制其子之前应用转换的控件。
围绕某个轴旋转 使用 Matrix4 类转换 可以做动画
new Container(
transform: Matrix4.rotationZ(0.1),
child: new Image.network(
'http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg',
fit: BoxFit.cover,
),
width: 200,
height: 200,
)
child 子widget，要包含的控件
2.Padding 控件
一个只有Padding属性的控件，可以为子布局添加内边距。用法如下
new Padding(
padding: EdgeInsets.all(8.0),
child: new Image.network(
'http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg',
fit: BoxFit.cover,
)
image.png
关于这个控件作用和 Container 的padding 有什么区别?
答案是没有区别。
There isn't really any difference between the two. If you supply a Container.padding argument, Containersimply builds a Padding widget for you.
Center 让唯一的子布局居中
首先Center 默认占满父布局 所以需要先嵌套一个容器更好点。
Align 一个只通过alignment 来设置子布局位置的控件
而所谓的Center控件 即为 alignment: Alignment(0, 0) 的特殊Align
而使用Align和使用Container的alignment属性同样是没有区别的。
FittedBox 根据自己的身体大小和位置来定位孩子。
首先FittedBox 的大小等于父布局。父布局的大小和子布局的大小如果有冲突。需要使用 FittedBox 的 fit 属性来解决。
加入child 比 parent 大 ，只能显示部分宽高，需要用 fit属性来决定如何显示。
例如:
new Container(
color: Colors.blue,
width: 100,
height: 200,
child: new FittedBox(
alignment: Alignment(0, 0),
fit: BoxFit.contain,
child: new Image.network(
'http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg',
fit: BoxFit.cover,
height: 200,
width: 200,
)))
image.png
值得注意的是,在编程时 只需要把鼠标放置在BoxFit上即可预览效果
image.png
网友评论