Flutter - 布局原理与约束（constraints）

Flutter尺寸限制容器

原创

已于 2022-12-09 16:29:22 修改 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

于 2022-12-09 14:16:04 首次发布

尺寸限制类容器用于限制容器大小，Flutter中提供了多种这样的容器，如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio 等

1 ConstrainedBox
ConstrainedBox 用于对子组件添加额外的约束一般作为最外层的父布局

2 BoxConstraints
BoxConstraints 为ConstrainedBox提供基础的宽高限制

const BoxConstraints({
   
   
  this.minWidth = 0.0, //最小宽度
  this.maxWidth = double.infinity, //最大宽度
  this.minHeight = 0.0, //最小高度
  this.maxHeight = double.infinity //最大高度
})

示例 :
ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: double.infinity, //宽度尽可能大
    minHeight: 46.0 //最小高度为46像素
  ),
  child: Container(
    height: 5.0, // 不起作用 ,以父容器的约束为准
    child: DecoratedBox(
           decoration: BoxDecoration(color: Colors.blue),
    ) ,
  ),
)

在这里插入图片描述

同时 BoxConstraints 也定义有一些便捷的构造方法

1  BoxConstraints.tight(Size(100,100))  // 设置宽高为100 ,100 通过Size 设置

ConstrainedBox(
  constraints: BoxConstraints.tight(Size(60,80)),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.blue),
  ),
),

在这里插入图片描述

2 BoxConstraints.tightFor(width: 80,height: 80)  // 设置最大值 和 最小值 都为80 ,80 

相当于 

BoxConstraints(minHeight: 80.0,maxHeight: 80.0,minWidth: 80.0,maxWidth: 80.0)

//可以生成一个尽可能大的用以填充另一个容器的BoxConstraints
3 BoxConstraints.expand(width: 100.0,height: 100.0), 

示例 :
ConstrainedBox(
  constraints: BoxConstraints.tightFor(width: 50,height: 50),// 最外围的约束是 宽 50  高 50
  child: ConstrainedBox(
      constraints: const BoxConstraints.expand(), // 可以生成一个