Flutter开发之——单组件布局容器-IntrinsicHeight和IntrinsicWidth

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • IntrinsicHeight组件会根据子组件自身的高度扩展高度
  • IntrinsicWidth组件会根据子组件自身的宽度扩展宽度

二 IntrinsicHeight

2.1 构造方法

1
const IntrinsicHeight({ Key? key, Widget? child }) : super(key: key, child: child);

2.3 示例

2.3.1 未使用IntrinsicHeight

代码

1
2
3
4
5
6
7
8
body:Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Container(color: Colors.blue, width: 100.0),
            new Container(color: Colors.red, width: 50.0,height: 50.0,),
            new Container(color: Colors.yellow, width: 150.0),
          ],
        ),

效果图

2.3.2 使用IntrinsicHeight

代码

1
2
3
4
5
6
7
8
9
10
body:IntrinsicHeight(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Container(color: Colors.blue, width: 100.0),
            new Container(color: Colors.red, width: 50.0,height: 50.0,),
            new Container(color: Colors.yellow, width: 150.0),
          ],
        ),
      )

效果图

三 IntrinsicWidth

3.1 构造方法

1
2
3
4
const IntrinsicWidth({ Key? key, this.stepWidth, this.stepHeight, Widget? child })
    : assert(stepWidth == null || stepWidth >= 0.0),
      assert(stepHeight == null || stepHeight >= 0.0),
      super(key: key, child: child);

3.2 属性说明

属性 说明 取值
stepWidth double
stepHeight double
  • 当stepWidth不是null的时候，child的宽度将会是stepWidth的倍数，当stepWidth值比child最小宽度小的时候，这个值不起作用
  • 当stepWidth为null的时候，child的宽度是child的最小宽度
  • 当stepHeight不为null的时候，效果跟stepWidth相同
  • 当stepHeight为null的时候，高度取最大高度

3.3 示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
IntrinsicWidth(
  stepHeight: 450.0,
  stepWidth: 300.0,
  child: Column(
    children: <Widget>[
      new Container(color: Colors.blue, height: 100.0),
      new Container(color: Colors.red, width: 150.0, height: 100.0),
      new Container(color: Colors.yellow,height: 150.0,),
    ],
  ),
)

效果图