flutter系列之:把box布局用出花来 _生活百科

简介
LimitedBox
SizedBox
FittedBox
总结

简介flutter中的layout有很多，基本上看layout的名字就知道这个layout到底是做什么用的。比如说这些layout中的Box，从名字就知道这是一个box的布局，不过flutter中的box还有很多种，今天我们来介绍最常用的LimitedBox,SizedBox和FittedBox 。
LimitedBoxLimitedBox是一种限制大小的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],),)],);}

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

文章插图
SizedBoxSizedBox从名字就知道是给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 。
FittedBoxFittedBox就是填充box的意思，可以按照指定的fit规则来填充它的child 。
先来看下FittedBox的定义：
class FittedBox extends SingleChildRenderObjectWidget {FittedBox继承自SingleChildRenderObjectWidget，表示它也只包含一个child 。