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)
相关推荐
奔跑中的蜗牛66613 分钟前
直播APP架构升级和性能优化:WebView 容器化
android
学习编程之路23 分钟前
仓颉多态性应用深度解析
android·多态·仓颉
俩个逗号。。38 分钟前
ViewPager+Fragment 切换主题崩溃
android·android studio·android jetpack
IT乐手40 分钟前
Okhttp 定制打印请求日志
android
来之梦1 小时前
Android红包雨动画效果实现 - 可自定义的扩散范围动画组件
android
杨筱毅1 小时前
【Android】【JNI多线程】JNI多线程安全、问题、性能常见卡点
android·jni
散人10241 小时前
Android Service 的一个细节
android·service
安卓蓝牙Vincent1 小时前
《Android BLE ScanSettings 完全解析:从参数到实战》
android
江上清风山间明月1 小时前
LOCAL_STATIC_ANDROID_LIBRARIES的作用
android·静态库·static_android
三少爷的鞋2 小时前
Android 中 `runBlocking` 其实只有一种使用场景
android