第五章：小心翼翼，坑中有戏

 师傅领进门，修行在个人。希望大家能在学习的过程中触类旁通。在文章中我可能不会详细讲某个控件的使用，但会给大家讲讲在开发过程中某个控件给我带来的思考。继续跟我一起深挖坑中的知识吧。

管教有方的父亲——Container

相信大家现在都已经开始着手Flutter的程序了。我们在写第一个控件的时候发现没有，怎么Flutter的控件大多都没有width和height这两个属性呢？找了半天好像只有Container这个家伙有，难道别的控件都不需要设置宽和高吗？这个时候安卓开发的同学们就对Container这个控件有种莫名其妙的感情了，因为只有它能给我们一种安全感，其他不设置宽高的控件可能随时都能跑飞似的。有没有这种感觉？哈哈。我当时也是这种感觉，但是习惯后你再去看看之前安卓的代码，好多控件的宽高属性不是设置的wrap_content就是match_parent，（为了迎合屏幕尺寸繁杂的年代）所以说宽高属性对于大多数的控件都是多余的。谷歌的大佬们估计也发现了这一点，他们在Flutter中干脆给你把宽高大权交给了Container这个控件（个别控件还是有宽高属性的，例如：Image）。如果你想给某个控件加个宽高的限制，不好意思必须得给你来个“严父”：Container（谁让你要求多呢，哈哈）。除此之外Container还有几个别人没有的属性比如padding和margin等。

下面重点讲一下Container开发中我遇到的两个小坑。

第一个：开发过程中我在尝试给某个控件设置一个背景颜色或者背景样式的时候，发现怎么控件没有background这个属性呢？经过访问度娘发现：decoration这个属性。这个属性就有意思了，他不是每个控件都有的。恰巧Container有这个属性。我们来详细讲讲，decoration的英文意思是：装饰。通过Container的源码发现他还有个兄弟：foregroundDecoration（英文意思：前台装修）。

Container的绘制的过程如下：

• 首先会绘制transform效果；
• 接着绘制decoration；
• 然后绘制child；
• 最后绘制foregroundDecoration。

由此可见。作为一个父亲的伟大了，不光给child铺了个褥子，还给盖了个被子。这次我们明白了在decoration属性中可以添加我们的背景样式。

第二个：开发欢迎页过程中我在Container里设置了一个Image控件，想要达到效果：Container全屏，调整了大小的Image在Container中居中显示。如果不设置Container的alignment属性，Image会变得和Container一样大。如果设置alignment属性，就能达到我们需要的效果。这个套路还真是第一次见，涨姿势了。这种父控件可能影响子控件布局样式的行为Flutter叫他布局行为。这里就不详细介绍了，大家在开发中发现你的控件不被控制时，记得还有这个东西就行。具体介绍请参考Container详解这篇文章。

外交官——GestureDetector

当我们在页面上添加了几个Image或者Text控件后，想给某个控件添加点击事件，这时发现怎么控件没有像Android那样的onClick属性呢？面对这个简单的需求感觉束手无策了。原来谷歌把这最普通不过的权利也剥夺了，只给少数控件（如Button等）下放了点击的权利。谷歌把点击事件也做成了一个widget控件。如果你想让Image有点击事件，不好意思，你必须给Image找个爹，必须用GestureDetector将Image包起来（现实真残酷啊，哈哈）。所以GestureDetector承担起大多控件与用户交互的外交官。

页面跳转——Navigator

独木不成林，一个完整的App当然有很多页面组成啦。无论是安卓开发还是iOS开发，页面跳转都是由一个页面的栈来统一管理，通过push和pop来进行页面的跳转。Flutter中是怎么来进行的页面跳转呢？是的他也是这个套路，就是我们要提到的Navigator这个控件。对于Navigator这个控件的用法百度一下有很多详细的说明了，这里我也推荐一篇帖子：flutter页面间跳转和传参-Navigator的使用，为什么推荐他呢？这篇帖子最后有一个Navigator开发过程的坑，这个坑我也遇到了。我就不详细介绍了，希望大家能熟练掌握Navigator的用法，小心避坑。

本篇文章到此结束，敬请期待下篇吧^_^。

 

悄悄话：

安卓开发者的福利：小绿人  一个实用的安卓开发工具箱，搜集了数千个开源项目。拿走不谢^_^。