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)
相关推荐
xiaoyan201510 分钟前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
小袁拒绝摆烂1 小时前
SQL开窗函数
android·sql·性能优化
apihz2 小时前
VM虚拟机全版本网盘+免费本地网络穿透端口映射实时同步动态家庭IP教程
android·服务器·开发语言·网络·数据库·网络协议·tcp/ip
baidu_247438612 小时前
Android MPAndroidChart使用
android
天平3 小时前
react native现代化组件库的推荐 【持续更新...】
android·前端·react native
apihz4 小时前
通用图片搜索-搜狗源免费API接口使用指南
android·java·python·php·音视频
你过来啊你4 小时前
Android开发中ARouter使用和原理详解
android
apihz6 小时前
腾讯云轻量服务器创建快照免费API接口教程
android·服务器·数据库·python·网络协议·tcp/ip·腾讯云
Kiri霧6 小时前
Noting
android·开发语言·kotlin
0wioiw07 小时前
Flutter基础(前端教程⑧-数据模型)
前端·flutter·状态模式