Flutter教学目录持续更新中
Github源代码持续更新中
1.IntrinsicWidth/IntrinsicHeight
一个widget，它将它的子widget的宽度/高度调整其本身实际的宽度/高度，但是非常消耗性能。
2.IntrinsicHeight属性
- child：
3. IntrinsicHeight
可以讲子控件的高度调整至实际高度。下面这个例子如果不使用IntrinsicHeight的情况下，第一个Container将会撑满整个body的高度，但使用了IntrinsicHeight高度会约束在50。这里Row的高度时需要有子内容的最大高度来决定的，但是第一个Container本身没有高度，有没有子控件，那么他就会去撑满父控件，然后发现父控件Row也是不具有自己的高度的，就撑满了body的高度。IntrinsicHeight就起到了约束Row实际高度的作用。
1602826739040.jpg
body: IntrinsicHeight(
child: Row(
children: [
Container(
width: 50,
color: Colors.red,
),
Container(
margin: EdgeInsets.only(left: 10),
width: 28,
height: 50,
color: Colors.red,
),
Container(
margin: EdgeInsets.only(left: 10),
width: 50,
height: 50,
color: Colors.red,
),
],
),
),
4.IntrinsicWidth属性
- stepWidth：宽度步长
- stepHeight： 高度步长
- child
这个相较于IntrinsicHeight多了步长的设置。
5. IntrinsicWidth
这里设置步长会影响到子控件最后大小
- 如果步长大于了子控件实际宽/高，那么子控件的宽/高 = 步长
- 如果小于那么子控件的宽/高会为步长的倍数且刚好大于或者等于子控件实际宽/高（如果子控件实际宽/高也是步长倍数就是等于）。这个一定要注意了，不是其他博客所说的小于子控件实际宽/高就不起作用，这里是宽/高步长?。?！
- 如果为null或者0那么宽度就是子控件实际宽，高度是控制不了的，需要设置1
举个栗子：
body: Container(
color: Colors.blue,
child: Center(
child: Container(
color: Colors.red,
width: 50,
height: 50,
),
),
),
1602828461831.jpg
这种情况下Container的宽高铺满，我们给他套上IntrinsicWidth，不设置宽/高步长
body: IntrinsicWidth(
child: Container(
color: Colors.blue,
child: Center(
child: Container(
color: Colors.red,
width: 50,
height: 50,
),
),
),
),
1602828559318.jpg
可以发现Container宽度被压缩到50，但是高度没有变化。我们再设置宽度步长为11
body: IntrinsicWidth(
stepWidth: 11,
child: Container(
color: Colors.blue,
child: Center(
child: Container(
color: Colors.red,
width: 50,
height: 50,
),
),
),
),
image.png
注意了，这个时候Container宽度是55了?。?！再来，我们设置宽度步长100
image.png
这个时候Container宽度是100了，然后我们再来设置高度步长100
image.png
这个时候Container就是100*100了，那么问题来了，想要Container高度就是他自身应该有的实际高度怎么办，步长设置1就可以了
image.png
IntrinsicWidth就是功能更强大的IntrinsicHeight，只是IntrinsicHeight只能控制高度，但是IntrinsicWidth是既可以控制宽度，也可以控制高度
下一节：Layout组件之LimitedBox
