目录
- 简介
- Tight和loose constraints
- 理解constraints的原则
- 总结
掌握了constraints才算对layout有了真正的了解,但是flutter中的constraints和我们熟悉的HTML中的constraints区别比较大,所以我们还是需要深入了解flutter中contraints的特性 。
Tight和loose constraints对于constraints来说,只有四个属性,分别是最小width , 最大width,最小height和最大height 。这四个属性所能限制的就是宽度和高度的范围 。
根据这两个属性的范围不同,constraints可以分为tight constraints和loose constraints 。
那么tight和loose有什么区别呢?
对于tight来说,它的 maximum width = minimum width, 并且maximum height = minimum height, 也就是说为width和height提供了一个特定的值 。
具体而言,可以看下BoxConstraints的tight实现:
BoxConstraints.tight(Size size): minWidth = size.width,maxWidth = size.width,minHeight = size.height,maxHeight = size.height;
和tight相对应的就是loose,在loose中我们设置了最大的width和height,但是希望widget越小越好,这样对应width和height的最小值为0,同样以BoxConstraints为例看下它的定义:BoxConstraints.loose(Size size): minWidth = 0.0,maxWidth = size.width,minHeight = 0.0,maxHeight = size.height;
理解constraints的原则前面我们讲到了constraints的分类,这里我们会讲一下constraints的基本原则 。通常来说,在flutter中 , 一个widget的constraints是从它的parent继承而来的 。然后这个widget会将constraints告诉他的子widget.
子widget会有自己定义的大?。敲醋觲idget会根据自己定义的大小来设置自己的大小,并将结果反馈跟父widget,父widget会最终根据所有子widget的大小来设置自己的大小 。
所以总结而言就是,constraints是向下传递的,而size是向上传递的 。
可能大家还不太明白是什么意思,没关系 , 接下来我们用具体的例子来说明 。
首先,我们使用BoxConstraints.tightFor来创建一个尽可能大的width和height的Constraints,然后在这个constraint内部新建widget来观察他们的表现 。
ConstrainedBox(constraints: const BoxConstraints.tightFor(width: double.infinity, height: double.infinity),child: exampleWidget)
通过替换上面的exampleWidget,我们来观察不同的表现形式 。首先是最基础的Container , 对于Container本身来说,他可以设置width和height,但是这两个属性并不是constraint,所以还得从parent widget中继承 。
那么对于下面的一个widget来说:
Widget build(BuildContext context) {return Container(color: blue);}
它会使用从parent继承的constraints,也就是说尽可能的大,所以会展示下面的界面:文章插图
填满所有的区域 。
如果给Container指定了width和hight,同样的,Container需要从parent继承constraints,所以仍然是填满整个区域:
Widget build(BuildContext context) {return Container(width: 100, height: 100, color: blue);}
但是 , 如果我们在Container的外面再加上一个constraints,比如Center:Widget build(BuildContext context) {return Center(child: Container(width: 100, height: 100, color: blue),);}
那么虽然Center会从parent继承constraints,去填满整个区域,但是Center本身的constraints是告诉子widget可以按照他自己的意愿来调整大小,所以这个时候最终Container的大小就是100x100:文章插图
除了Center之外,我们还可以使用Align , 效果和Center是一致的:
Widget build(BuildContext context) {return Align(alignment: Alignment.bottomLeft,child: Container(width: 100, height: 100, color: blue),);}
文章插图
下面是一个使用Center的很有趣的例子:
Widget build(BuildContext context) {return Center(child: Container(color: blue,child: Container(color: green, width: 30, height: 30),),);}
这里Center中有一个Container , Container中有一个Container , 但是这两个Container设置了不同的颜色 。因为外层的Container并没有设置大小,所以他的大小是由child Container来决定的,因为两个Container大小一样 , 所以外部的颜色会被内部的覆盖,我们可以得到下面的界面:
推荐阅读
- NIKKE胜利女神无限之塔怎么玩
- 洛克王国梦之必争之地活动是什么
- 26 《吐血整理》高级系列教程-吃透Fiddler抓包教程-Fiddler如何抓取Android7.0以上的Https包-上篇
- 咸鱼之王最新招募令活动怎么玩
- 永恒岛之彩虹世界为什么换了高级装备反而掉
- oppo手机怎样截屏(oppo哪个系列最好用)
- 25 《吐血整理》高级系列教程-吃透Fiddler抓包教程-Fiddler如何优雅地在正式和测试环境之间来回切换-下篇
- Opengl ES之FBO
- 咸鱼之王嘉年华活动怎么玩
- 华为nova9系列支持5g吗_华为nova9系列支不支持5g