朝圣言
扫描关注朝圣言

手机扫描二维码

flutter抉择和爬坑之底部选项卡

朝圣言2018-11-02前端仕锦 2368 0A+A-

最近研究多平台开发,其中不可避免的就是ios和安卓开发。换一句话,如果需要一个程序员的时候为什么还需要2个。

所以一个可以同时开发ios和安卓的平台是多么重要。

之前在这块方面我对mui有所浸淫,但是用webview构建和js桥的方法实现在多端开发在性能上仍然不能满足我对体验的要求。尤其使用webview需要兼顾使用者的手机版本。以至于很多语法是无法使用的~。

曾经尝试RN(react native),虽然也是基于js的开发模式,对前端的学习成本降低了不少(但是我就是理解不能)。当然它凉了。~

所以mui也是让我一直沿用至今并不出意外的会让我一直用下去。但是mui让我最头疼的一个是页面管理,也就是路由。

当然有些人可能会说使用history,但是我是用的是每个页面一个webview。

因此我继续一套可以管理页面的方案。

这里引申一个,typescript的白鹭引擎。对于每个页面就是一个组件(对象),通过入栈出栈的方式管理页面。这套方式是我所需要的~。

所以路由和性能是我从mui另寻其他框架的原因。不得不说已经依赖mui3年的前端开发,要另寻其他框架是一个很难的抉择,也决定了我对下个框架的选择必须远远高于mui的标准~

flutter抉择和爬坑之底部选项卡  前端 坑 flutter 第1张

就在前天,我在bejson的群里很我徒弟聊天,问了有木有比较流行的混开框架。于是flutter就油然而生。

在我看过文档后,决定对其进行深入的研究。


最大的坑是配置环境~我放弃java的原因就是因为我不喜欢也么耐心配置环境或者集成框架~。

中文文档还算健全,这一步除了墙内人下载依赖和对于路径理解错误意外没什么特别大的问题。

要注意的一点是,不要把项目建立在有空格的文件夹或者路径下。不然android studio 可能会无法编译



还有一个问题是,根据百度的底部选项卡的代码,可以完美添加3个底部现象卡,但是添加第四个就无法显示?。其实这里也是可以坑,对于底部选项卡4个或4个以上,需要添加样式。代码如下


 //....
 bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: 0, // this will be set when a new tab is tapped
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('首页'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.history),
            title: new Text('综合商城'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.map),
              title: new Text('我的订单')
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.map),
              title: new Text('个人中心')
          ),
        ],
      ),
  //...

必须添加

 type: BottomNavigationBarType.fixed,


关于对flutter的研究,我会在后续的文章继续阐述

文章关键词
前端
flutter
发表评论