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)
相关推荐
冻咸鱼2 小时前
MySQL中表操作
android·sql·mysql·oracle
技术小黑屋_2 小时前
从零搭建 Android ADB MCP Server:让 AI 助手直接操控你的 Android 设备
android·adb
2501_915921432 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Jeled3 小时前
Android 集成指南:Google 登录、Facebook 登录 与 Firebase 深入接入(实战)
android·kotlin·android studio·memcached·facebook
SoaringHeart3 小时前
Flutter封装:原生路由管理极简封装 AppNavigator
前端·flutter
用户093 小时前
Android唤醒锁优化指南
android·面试·kotlin
aqi004 小时前
FFmpeg开发笔记(八十三)国产的视频裁剪框架AndroidVideoTrimmer
android·ffmpeg·音视频·流媒体
困到晕阙5 小时前
[Zer0pts2020]Can you guess it?
android
写点啥呢5 小时前
android取消每次u盘插入创建无用(媒体)文件夹
android·u盘·车机·aosp