简介

flutter 中的 layout 有很多，基本上看 layout 的名字就知道这个 layout 到底是做什么用的。比如说这些 layout 中的 Box，从名字就知道这是一个 box 的布局，不过 flutter 中的 box 还有很多种，今天我们来介绍最常用的 LimitedBox,SizedBox 和 FittedBox。

LimitedBox

LimitedBox 是一种限制大小的 Box，先来看下 LimitedBox 的定义：

class LimitedBox extends SingleChildRenderObjectWidget 

可以看到 LimitedBox 继承自 SingleChildRenderObjectWidget，表示 LimitedBox 中可以有一个 single child。

那么 LimitedBox 一般用在什么地方呢？

考虑在一个可滚动列表的情况下，比如 ListView,因为他是 unbounded 的，如果 ListView 的子 widget 是 Container 的话，Container 会尽可能的小，这很明显不是我们所想要的，我们以下面的代码为例：

  Widget build(BuildContext context) {    return ListView(      children: [        for(var i=0; i < 10 ; i++)          Container(            color: list[i % 4],          )      ],    );  }

在 ListView 中，我们添加了一个 Container,这些 Container 中只设置了 color，并且并未设置任何大小，那么将会得到下面的界面：

可以看到现在看到的界面是空白的。

当然，你可以给 Container 设置 height 属性来达到对应的目的：

  Widget build(BuildContext context) {    return ListView(      children: [        for(var i=0; i < 10 ; i++)          Container(            height: 100,            color: list[i % 4],          )      ],    );  }

或者使用 LimitedBox 来达到同样的效果：

  Widget build(BuildContext context) {    return ListView(      children: [        for(var i=0; i < 10 ; i++)          LimitedBox(            maxHeight: 100,            child: Container(              // height: 100,              color: list[i % 4],            ),          )      ],    );  }

我们可以得到下面的界面：

SizedBox

SizedBox 从名字就知道是给 box 一个指定的 size。

先来看下 Sizedbox 的定义：

class SizedBox extends SingleChildRenderObjectWidget

可以看到 SizedBox 继承自 SingleChildRenderObjectWidget，表示它可以包含一个 child widget。

然后再来看下它的构造函数：

const SizedBox({ Key? key, this.width, this.height, Widget? child })

SizedBox 主要接受 width,height 和它的 child widget。SizedBox 主要用来强制它的 child widget 的 width 和 height 保持一致。

我们来看一个具体的例子:

  Widget build(BuildContext context) {    return SizedBox(      width: 200.0,      height: 200.0,      child: Container(        color: Colors.blue,      ),    );  }

上面的例子中我们指定了固定 SizedBox。最后得到的界面如下：

事实上 SizedBox 的 width 和 height 并不一定是固定的值，我们可以将他们设置为 double.infinity，表示 child widget 会尽可能的填充。

比如下面的例子:

  Widget build(BuildContext context) {    return SizedBox(      width: double.infinity,      height: double.infinity,      child: Container(        color: Colors.blue,      ),    );  }

展示的界面是这样的:

SizedBox 也提供了一个 expand 方法来提供类似的功能:

  Widget build(BuildContext context) {    return SizedBox.expand(      child: Container(        color: Colors.blue,      ),    );  }

上面的代码和使用 double.infinity 是等价的。

SizedBox 还可以不包含任何 child,在这种情况下，SizedBox 表示的就是一个空白 gap。

FittedBox

FittedBox 就是填充 box 的意思，可以按照指定的 fit 规则来填充它的 child。

先来看下 FittedBox 的定义：

class FittedBox extends SingleChildRenderObjectWidget {

FittedBox 继承自 SingleChildRenderObjectWidget，表示它也只包含一个 child。

再看下 FittedBox 的构造函数：

  const FittedBox({    Key? key,    this.fit = BoxFit.contain,    this.alignment = Alignment.center,    this.clipBehavior = Clip.none,    Widget? child,  })

FittedBox 有几个非常有意思的参数，首先是 fit，表示如何填充 Box,它是一个 BoxFit 对象，BoxFit 有几个值，用来描述 fix 的方式。

比如 fill 表示填充到 box 中，不管之前 child 的长宽比，而 contain 表示的是尽可能的包含 child。

alignment 是一个 AlignmentGeometry，表示的是 child 的排列方式。

clipBehavior 表示的是 Box 和 child 重叠的时候的剪切方式。

我们看一个具体的例子:

  Widget build(BuildContext context) {    return FittedBox(      fit: BoxFit.fill,      child: Image.asset('images/head.jpg'),    );  }

上面例子中，我们使用了 BoxFit.fill 来填充，我们看下具体的效果：

总结

这几个 box 是我们在日常的工作中经常会用到的 box。大家可以熟练掌握。

本文的例子：https://github.com/ddean2009/learn-flutter.git

更多内容请参考 www.flydean.com

最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！

欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！