Flutter 构建一个常用的页面框架
最终实现的结果如上图所示,顶部共用一个导航栏,底部有四个图标导航,点击对应的图标跳转到对应的页面。
图标准备
本次例程需要4个图标,2种颜色,可以从 iconfont 中找到自己需要的图标下载不同的颜色使用。然后在 pubspec.yaml 中的 assets 指定素材所在目录。需要注意的是如果是 png 文件直接指定整个目录即可,但如果是 jpg 格式,则需要同时指定文件名及后缀。
bottomnavigationbar 简介
bottomnavigationbar的构造函数如下:
其中常用的属性为:
- items:及对应的页面组件数组
- currentindex:默认显示第几个页面
- type:组件类型,使用bottomnavigationbartype枚举,有 fixed 和 shifting 两种。fixed 是图标固定位置,而 shifting 的图标点击后会有一个漂移效果,可以实际试一下,一般用fixed 比较多。
- ontap:点击后的事件,一般用这个更新状态数据,以便更新页面。
其他属性用于控制样式的,可以根据实际需要设置图标大小,主题色,字体等参数。
构建项目页面结构
首先,新建四个业务页面,分别是 dynamic.dart,message.dart,category.dart 和 mine.dart,分别对应动态、消息、分类浏览和个人中心四个页面。目前这四个页面很简单,只是在页面中间依次显示“岛上码农”四个字。代码都是类似的,以 dynamic 为例:
注意的是这里的 scaffold 没有 appbar 了,这是因为在首页已经有了,如果再有 appbar 就会出现两个。
其次,新建首页,用于管理四个业务页面,命名为 app.dart。app.dart 使用了 bottomnavigationbar 管理四个业务页面的切换。
这里关键的地方有两个,一是使用的 indexedstack,这是一个管理页面显示层级的容器。使用 index 属性确定当前容器里那个页面在最顶上,容器里的页面通过 children 属性设置,要求是一个 widget 数组。因此,逻辑就是当 bottomnavigationbar 中的图标被点击后,对应点击事件会回调 ontap属性指定的方法,将当前的点击索引值传递回调函数,因此可以利用这个方式控制 indexedstack 的页面层级切换。
最后,使用了状态变量_index 存储indexedstatck当前显示页面的索引值,然后当 bottomnavigationbar的图标点击事件发生后,在回调函数中使用 setstate 更新状态变量_index 来刷新当前界面。
简化入口
main.dart 是入口文件,应当做最基础的配置和全局初始化配置,而不应该有业务代码,因此可以简化为从main 方法加载首页即可。通过这种方式可以让 main.dart 文件即为简洁。这也是在开发的时候需要注意的地方,将不相关的代码剥离,相关的代码聚合,即所谓的“高内聚,低耦合”原则。
代码复用
写代码的时候要注意复用,在这里将构建 bottomnavigationbar 元素抽离出了一个构建方法_getbottomnavitem,从而提高代码的复用性和维护性,也可以避免 flutter 的组件构建的 build 方法中出现过多的元素和嵌套,影响代码的可读性。
以上就是flutter 构建一个常用的页面框架的详细内容,更多关于flutter 构建页面框架的资料请关注其它相关文章!
推荐阅读
-
不要框架,纯PHP,能实现这样的功能吗?有很多页面,有插入删除修改功能,只写一种增删改方法,其他页面也能共用这一个方法
-
使用Python的Tornado框架实现一个Web端图书展示页面
-
ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享
-
使用Python的Tornado框架实现一个Web端图书展示页面
-
ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享
-
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
-
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
-
荐 每天学习一个Android中的常用框架——11.Fresco
-
一个用XML构建Swing视图的框架
-
利用Python的Flask框架来构建一个简单的数字商品支付解决方案