flutter系列之:深入理解布局的基础constraints( 二 ) _生活百科

文章插图
除了Center之外，我们还可以使用Align，效果和Center是一致的：

Widget build(BuildContext context) {return Align(alignment: Alignment.bottomLeft,child: Container(width: 100, height: 100, color: blue),);}

文章插图
下面是一个使用Center的很有趣的例子：

Widget build(BuildContext context) {return Center(child: Container(color: blue,child: Container(color: green, width: 30, height: 30),),);}

这里Center中有一个Container，Container中有一个Container，但是这两个Container设置了不同的颜色。
因为外层的Container并没有设置大小，所以他的大小是由child Container来决定的，因为两个Container大小一样，所以外部的颜色会被内部的覆盖，我们可以得到下面的界面：

文章插图
如果我们给外层的添加一个padding如下：

Widget build(BuildContext context) {return Center(child: Container(padding: const EdgeInsets.all(20.0),color: blue,child: Container(color: green, width: 30, height: 30),),);}

那么外层现在就比内层的widget要大了，颜色也可以展示出来了：

文章插图
我们再来看下面的例子：

Widget build(BuildContext context) {return ConstrainedBox(constraints: const BoxConstraints(minWidth: 70,minHeight: 70,maxWidth: 150,maxHeight: 150,),child: Container(color: blue, width: 10, height: 10),);}

上面的例子在Container外面添加了一个ConstrainedBox，指定了四个constraints属性，但是这个ConstrainedBox并不会应用到child上，所以最终得到的界面还是全部的蓝色。
为什么呢？这是因为不同的widget对constraints有不同的定义，对于ConstrainedBox来说，他是一个对其子项施加额外约束的小部件。记住，这里是额外的约束。因为对于它的parent来说，约束已经制定好了，所以ConstrainedBox会被忽略。
我们再看下下面的代码：

Widget build(BuildContext context) {return Center(child: ConstrainedBox(constraints: const BoxConstraints(minWidth: 70,minHeight: 70,maxWidth: 150,maxHeight: 150,),child: Container(color: blue, width: 10, height: 10),),);}

这里因为使用了Center，Center会让child来自行决定他们的大小，所以这里的ConstrainedBox是生效的，如下：

文章插图
flutter中除了ConstrainedBox，还有一个UnconstrainedBox,它的作用和ConstrainedBox是相反的，大家可以自行尝试。
总结从上面的具体例子，我们可以看出，虽然我们有通用的Constraint规则，但是具体的表现还是要看不同的widget来定。
所以大家在使用widget的时候，一定要去读一下widget的代码，从而加深对widget的掌握。
本文的例子：https://github.com/ddean2009/learn-flutter.git