Flutter 写微信界面一:底部导航结构实现

失业了,找工作的时候看到许多jd要求有 跨端 经验,现学现卖吧~

工程链接:github.com/ccnio/flutt... ,欢迎一起学习、交流。特别期待能有大牛带带~

本次提交 id:github.com/ccnio/flutt...

功能上图

StatelessWidget、 StatefulWidget

StatelessWidget 是一个不可变的Widget,一旦StatelessWidget被创建,它的属性就不会改变。Icon、IconButton, 和Text都是无状态widget, 它们都是 StatelessWidget的子类。

StatefulWidget 包含一个State对象,该对象可以存储和管理Widget的状态。当状态改变时,Flutter框架会自动调用State对象的build方法来重新构建Widget。

widget 属性使用 final 修饰,所以每次渲染就会重新创建 widget 实例。有状态的 widget 只不过是使用了 State 保存了 ui 数据。

BottomNavigationBar 的使用

  1. 因为底部导航栏切换时伴随着界面的变化,所以这里是一个有状态的界面
  2. 使用 _currentIndex 记录当前的界面
  3. 当点击 item 后需要触发状态的更新,即调用 setState
less 复制代码
Scaffold(
    body: pages[_currentIndex], // pages 是4个对应的界面
    bottomNavigationBar: BottomNavigationBar(
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
      currentIndex: _currentIndex,
      fixedColor: Colors.green,
      type: BottomNavigationBarType.fixed,
      items: [
        buildBottomNavItem(
            "微信", "images/message_normal.png", "images/message_press.png"),
        buildBottomNavItem(
            "通讯录", "images/contacts_normal.png", "images/contacts_press.png"),
        buildBottomNavItem("发现", "images/discovery_normal.png",
            "images/discovery_press.png"),
        buildBottomNavItem(
            "我", "images/me_normal.png", "images/me_press.png"),
      ],
    ),
  );

本地图片的加载

  1. 需要在 pubspec.yaml 添加图片路径
makefile 复制代码
assets:
 - images/

这里注意不能有多余的空格。

  1. 代码中的加载
less 复制代码
Image(image: AssetImage("images/img.png"),
      width: 25,
      height: 25)
相关推荐
Digitally3 分钟前
如何将视频从安卓手机传输到电脑?
android·智能手机·电脑
CV资深专家6 分钟前
Android 相机框架的跨进程通信架构
android
前行的小黑炭28 分钟前
Android :如何提升代码的扩展性,方便复制到其他项目不会粘合太多逻辑,增强你的实战经验。
android·java·kotlin
2501_9159214329 分钟前
前端开发工具有哪些?常用前端开发工具、前端调试工具、前端构建工具与效率提升工具对比与最佳实践
android·前端·ios·小程序·uni-app·iphone·webview
花菜会噎住1 小时前
MySQL 高级特性与性能优化:深入理解函数、视图、存储过程、触发器
android·mysql·函数·索引·视图
娅娅梨7 小时前
Android- Surface, SurfaceView, TextureView, SurfaceTexture 原理图解
android·surface
2501_915918418 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
程序员码歌8 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
非门由也10 小时前
Android studio安装教程——超详细(含安装包安装教程)
android·ide·android studio
平淡风云10 小时前
Android应用添加日历提醒功能
android·日历