flutter 搜索框_运用Flutter开发一款伪知乎App会很复杂么？

Flutter相关视频教程已经开始陆续上线啦~可能是你看过的最良心的教程哦！

无聊的编码--Flutter教程​www.bilibili.com Flutter绘制Tabbar​www.bilibili.com Flutter绘制知乎界面​www.bilibili.com

Flutter自出生的那一天，就成了世界的焦点，不管是他那个名声显赫的爹还是隔壁扶不上墙的狗剩子，都注定了Flutter将会改写历史，极大程度的占据App研发市场。

FLutter于2018年2月发布Beta版本，由于其完全开源与免费，现在已经获得了非常可观的用户群体。相比于RN，FLutter可以达到更为优质的页面效果。

所以你以为，这会是一篇彻头彻尾的广告贴么？不不不，今天我们将用Flutter来克隆一份知乎App，已经兴奋的搓手手了，为了证明我没有装B，我决定把裤子脱给你看！不对！我决定细细的和大家分享Flutter以及Dart语言的技巧。

---

||Flutter和Dart||

FLutter是一款移动UI框架，一套代码就可以完美运行在IOS和Android，但是需要运用Dart语言进行开发。单从这一点上来说，会让很多前端开发人员头疼。Dart是啥？我知道Dust，我拆弹贼6。

大多前端开发者，目光更多的放在了JS上，每天忙于用JS拯救世界，不亦乐乎。如果平白学习一门新技术，自然有点不大情愿。隔壁的RN用JS就能开发，我何必费劲巴力的学一门Dart呢？

首先不必把Dart想的过分复杂，一定程度而言，这就是一门简单的面向对象编程语言。所出现过的内容在其他语言中几乎都是常客。比如其中的一些关键词，var const final => switch case if else等等，如果曾经学过某种面向对象编程语言，这几乎可以说是零成本学习。

对于Flutter而言，最重要也是最核心的内容就是Widget（组件）。每个组件都是一个类（class），在类中存在各种属性，去设置UI布局，设置父子层级，设置动画等等。

如果你曾经做过一些MVVM相关的技术，一定可以理解什么叫做状态（state），自Angular问世起算，新兴技术无不使用这种数据驱动页面的做法。Vue，React，小程序等等均采用此模式。我不太想再去回忆如果用jQuery去改变页面布局有多麻烦，毕竟这已经是老黄历了（其实还不到10年，只是技术更迭太快了）。

||开始上手||

对，我和一些技术博主的区别在于，我不太喜欢空讲大道理，毕竟这些内容脱离了实际并没有太多的意义。我更推荐的做法是，在实践中踩坑，然后再去学习，这样的效率会更高一些。

先来看看效果，由于没做太多的页面优化，只能保证大概看起来像吧。（手动捂脸）

简单来说，我们可以把这个界面进行拆分

• 最上方的搜索框，以及旁边的签到图标（原版的没找到，随便放一个对勾吧）
• 下方的3个导航栏（关注，推荐，热榜）
• 下方3个具体界面，这里只做了推荐的界面，至于为什么要黑黄晓明，因为我爱林大厨啊！

由于Flutter的页面渲染可以达到120帧，但是我生成的Gif只有20帧，所以效果并不真实，想看原版可以等着我把App做出来（捂脸）。

暴躁老哥在线撸码，咱们一起来看看Flutter到底难不难。

||入口||

和很多其他语言一样，Flutter也有着他的main函数，代表着整个App的入口，还记得我上面提到的么，Flutter中的每个组件都是一个类，所以在这里，我们也会在main函数中，去实例化一个组件，通过最顶级的祖宗组件，一步步的渲染之后的子孙组件。

如果我们用一种更为直接的方式将上方的“伪知乎”画一张图，大概是下面这样的。