正文

Flutter Sizedbox 是一個 布局組件，用來給 child 添加 tight 約束的，也可以用來添加空白。

width，height是 Sizedbox 的參數(shù)

 BoxConstraints get _additionalConstraints {
    return BoxConstraints.tightFor(width: width, height: height);
 }

final BoxConstraints constraints = this.constraints;
if (child != null) {
  child!.layout(_additionalConstraints.enforce(constraints),
      parentUsesSize: true);
  size = child!.size;
} else {
  size = _additionalConstraints.enforce(constraints).constrain(Size.zero);
}

enforce 方法根據(jù) _additionalConstraints 返回一個新約束，新約束保證在參數(shù) constraints 的范圍之內(nèi)。

以上就是 SizedBox 的布局邏輯，通過代碼我們分析一下 child constrains， SizedBox size。

child 的 constrains

constrains 是 tight ，SizedBox 透傳 constrains 給 child。

constrains 是 loose，width 為空，SizedBox 透傳 minWidth，maxWith 給 child；height為空，SizedBox 透傳 minHeight，maxHeight 給 child。

constrains 是 loose，width 不為空， 在 constrains 范圍內(nèi) 給 child 的 width tight 約束；height 不為空 在 constrains 范圍內(nèi) 給 child 的 height tight 約束。

確定自己的大小

如果有 child ，和 child 一樣大。

沒有child ，constrains 是 tight ，大小為約束最小值。

沒有child ，constrains 是 loose，在約束范圍內(nèi)由 width，height 參數(shù)指定。

SizedBox 的命名構(gòu)造函數(shù)們

SizedBox 雖然本身很簡單，但它命名構(gòu)造函數(shù)確實不少。我們平時用的時候大多忽略了這些命名構(gòu)造函數(shù)，所以應(yīng)該先混個臉熟，用這些命名構(gòu)造函數(shù)還是有好處的，可以增加代碼的可讀性。

SizedBox.expand

使 SizedBox 獲得最大 Size，也就是和父 widget 一樣大。

const SizedBox.expand({ super.key, super.child })
    : width = double.infinity,
      height = double.infinity;

SizedBox.shrink

讓 SizedBox 盡量小。

const SizedBox.shrink({ super.key, super.child })
    : width = 0.0,
      height = 0.0;

SizedBox.fromSize

通過 size 來構(gòu)造 SizedBox。

SizedBox.fromSize({ super.key, super.child, Size? size })
    : width = size?.width,
      height = size?.height;

SizedBox.square

保證 SizedBox 是一個正方形。

  const SizedBox.square({super.key, super.child, double? dimension})
    : width = dimension,
      height = dimension;

應(yīng)用場景

為 child 提供 tight 約束。

當指定了 width，height 參數(shù)后，child 就獲得了寬高的 tight 約束。保證 child 有固定大小。這對于固定布局非常有用。

為 children 之間提供空白。

可以用 padding 添加空白，但那樣會增加一層嵌套，用 SizedBox 充當空白看起來更好一些。

占位

只是用來占位，比如 Spacer 中的 child 用的就是 SizedBox.shrink。

class Spacer extends StatelessWidget {
  const Spacer({super.key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0);
  final int flex;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

以上就是Flutter SizedBox布局組件Widget使用示例詳解的詳細內(nèi)容，更多關(guān)于Flutter SizedBox布局組件Widget的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論