导航
导航
文章目录
  1. BoxConstraint分类
  2. Tightly Constraints（严格约束）
  3. Loose Constraints（松散约束）
    1. 最大值是是 Infinite(无限值)
  4. Bounded Constraints（有界约束）
    1. Unbounded Constraints（无界约束）
  5. Infinite Constraints（无限约束）

flutter盒模型

2019.10.23 zhou shaw flutter  热度 ℃   字数统计 475字   阅读时长 2分

BoxConstraint分类

  • Tightly Constraints（严格约束）
  • Loose Constraints（松散约束）
  • Bounded Constraints（有界约束）
  • Unbounded Constraints（无界约束）
  • Infinite Constraints（无限约束）

Tightly Constraints（严格约束）

特点：

  • 盒模型的宽高最大值最小值相等
  • 有无子节点，盒模型宽高不受影响

使用方式：

1
BoxConstraints.tight(Size(100, 100))
1
2
3
4
5
6
7
body: Container(
    constraints: BoxConstraints.tight(Size(100, 100)), //添加 Tightly Constraints
    color: Colors.red,
    child: Text(
      "HelloWorld",
      style: TextStyle(background: paint),
    ))));

Loose Constraints（松散约束）

特点：

  • 盒模型的宽或高其中某一最小值为0
  • 子节点不超过盒模型的宽高时，盒模型的大小与子节点相等
  • 没有子节点时，盒模型的宽高为最大值

使用方式：

1
BoxConstraints.loose(Size(width, height))
1
2
3
4
5
6
7
body: Container(
        constraints: BoxConstraints.loose(Size(100, 100)), //添加 Loose Constraints
        color: Colors.red,
        child: Text(
          "HelloWorld",
          style: TextStyle(background: paint),
        ))));

最大值是是 Infinite(无限值)

特点：

  • 继承了松散约束，且没有子节点时，盒子的宽高为屏幕宽高

无限值的松散约束：

1
BoxConstraints.tightFor()

代码使用

1
2
3
4
5
6
7
body: Container(
    constraints: BoxConstraints.tightFor(), //添加 Loose Constraints
    color: Colors.red,
    child: Text(
      "HelloWorld",
      style: TextStyle(background: paint),
    ))));

Bounded Constraints（有界约束）

特点：

  • 盒模型的宽或高其中一值未固定值时
  • 有无子节点，盒模型宽高为最大值

使用方式：

1
BoxConstraints(minWidth,maxWidth,minHeight,maxHeight)
1
2
3
4
5
6
7
body: Container(
    constraints: BoxConstraints(minWidth: 100,maxWidth: 300,minHeight: 0,maxHeight: 300), //添加 Bounded Constraints
    color: Colors.red,
    child: Text(
      "HelloWorld",
      style: TextStyle(background: paint),
    ))));

Unbounded Constraints（无界约束）

特点：

  • 当盒模型的宽或高一值为Infinite(无限值) 时
  • 子元素小于盒模型时，按最小宽高展示
  • 没有子元素，宽高为屏幕宽高

使用：

1
BoxConstraints(minWidth: 10,maxWidth: double.infinity,minHeight: 100,maxHeight: double.infinity)

Infinite Constraints（无限约束）

特点：

  • 宽高最小值和最大值都是 Infinite(无限值)
  • 不受子元素影响宽高
  • 展示宽高屏幕宽高

使用：

1
BoxConstraints.expand()
1
2
3
4
5
6
7
body: Container(
    constraints: BoxConstraints.expand(), //添加 Infinite Constraints
    color: Colors.red,
    child: Text(
      "HelloWorld",
      style: TextStyle(background: paint),
    ))));