Flutter（53）：Layout组件之IntrinsicWi

2020-10-16 本文已影响0人 starryxp

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,
            ),
          ),
        ),
      ),