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

edreamoon2024-03-13 10:14

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

工程链接：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 的使用

因为底部导航栏切换时伴随着界面的变化，所以这里是一个有状态的界面
使用 _currentIndex 记录当前的界面
当点击 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"),
      ],
    ),
  );

本地图片的加载

需要在 pubspec.yaml 添加图片路径

makefile 复制代码

assets:
 - images/

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

代码中的加载

less 复制代码

Image(image: AssetImage("images/img.png"),
      width: 25,
      height: 25)