引言

消息模块是社交类应用的重要组成部分，用户通过消息功能与队友沟通、接收系统通知、处理组队邀请等。本篇文章将详细讲解如何实现消息列表页面，包括快捷入口区域和会话列表的展示。

消息页面采用顶部快捷入口加会话列表的布局方式，快捷入口提供系统通知、互动消息、组队邀请等功能的快速访问，会话列表展示用户参与的所有聊天。这种设计模式在微信、QQ等主流即时通讯应用中被广泛采用，用户已经非常熟悉。

功能需求分析

消息页面的核心功能

1. 快捷入口：提供系统通知、互动消息、组队邀请等快速访问
2. 会话列表：展示所有聊天会话
3. 未读提示：显示未读消息数量
4. 会话信息：显示最后一条消息、时间等
5. 快速导航：点击会话进入聊天页面

用户交互需求

• 用户可以快速访问常用功能
• 用户可以查看所有会话
• 用户可以看到未读消息提示
• 用户可以点击会话进入聊天

设计原则

消息页面的设计需要遵循以下原则：

• 信息密度适中：每个会话项显示足够的信息，但不会过于拥挤
• 视觉层次清晰：未读消息、时间、内容等信息有明确的视觉区分
• 操作便捷：用户可以快速找到并进入目标会话
• 状态明确：未读状态、在线状态等信息一目了然

核心代码实现

第一部分：导入依赖与类定义

首先导入必要的依赖包和页面文件。消息页面需要跳转到聊天页面、通知页面和系统消息页面，因此需要导入这些页面的定义。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'chat_page.dart';
import 'notification_page.dart';
import 'system_message_page.dart';

flutter/material.dart提供Material Design组件，get/get.dart提供路由导航功能。chat_page.dart是聊天页面，notification_page.dart是通知页面，system_message_page.dart是系统消息页面。

接下来定义MessagePage类。由于页面数据是静态的模拟数据，不需要管理状态变化，我们使用StatelessWidget。在实际项目中，如果需要实时更新消息列表，应该使用StatefulWidget或GetX的响应式状态管理。

class MessagePage extends StatelessWidget {
  MessagePage({super.key});

MessagePage使用StatelessWidget是因为当前使用的是模拟数据。在实际项目中，消息列表需要实时更新，应该使用状态管理方案来处理数据变化。

下面定义会话数据列表。每个会话包含id、名称、头像图标、最后一条消息、时间和未读数等信息。

  final List<Map<String, dynamic>> _chats = [
    {
      'id': '1',
      'name': '年轮车队',
      'avatar': Icons.groups,
      'lastMsg': '小明: 今晚7点准时开车',
      'time': '10:30',
      'unread': 3,
    },
    {
      'id': '2',
      'name': '古木吟组队',
      'avatar': Icons.groups,
      'lastMsg': '玩家A: 我可能会迟到5分钟',
      'time': '昨天',
      'unread': 0,
    },
    {
      'id': '3',
      'name': '迷雾剧本杀',
      'avatar': Icons.store,
      'lastMsg': '您预约的场次已确认',
      'time': '周一',
      'unread': 1,
    },
    {
      'id': '4',
      'name': '系统通知',
      'avatar': Icons.notifications,
      'lastMsg': '您的组队申请已通过',
      'time': '周日',
      'unread': 5,
    },
    {
      'id': '5',
      'name': '推理社',
      'avatar': Icons.store,
      'lastMsg': '新剧本已上线，欢迎体验',
      'time': '周六',
      'unread': 0,
    },
  ];

_chats列表存储会话数据，使用Map<String, dynamic>类型。每个会话的字段说明：

• id：会话的唯一标识，用于跳转和数据操作
• name：会话名称，显示在列表中
• avatar：头像图标，不同类型的会话使用不同图标
• lastMsg：最后一条消息的内容预览
• time：最后消息的时间，可以是具体时间或相对时间
• unread：未读消息数量，0表示没有未读

不同类型的会话使用不同的图标区分：组队群聊使用groups图标，店铺消息使用store图标，系统通知使用notifications图标。这种视觉区分帮助用户快速识别会话类型。

在实际项目中，应该定义一个Chat或Conversation模型类来替代Map，这样可以获得类型安全和更好的代码提示。例如：

class ChatModel {
  final String id;
  final String name;
  final IconData avatar;
  final String lastMsg;
  final String time;
  final int unread;
  
  ChatModel({
    required this.id,
    required this.name,
    required this.avatar,
    required this.lastMsg,
    required this.time,
    required this.unread,
  });
}

第二部分：页面主体结构

build方法返回页面的整体结构。页面使用Scaffold作为基础布局，包含AppBar和body两个主要区域。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('消息'),
        centerTitle: true,
        elevation: 0,
        backgroundColor: const Color(0xFF6B4EFF),
        foregroundColor: Colors.white,
        actions: [
          IconButton(
            icon: const Icon(Icons.notifications_none),
            onPressed: () => Get.to(() => NotificationPage()),
          ),
        ],
      ),
      backgroundColor: const Color(0xFFF5F5F5),

AppBar标题显示"消息"，centerTitle: true让标题居中。elevation设为0去除阴影，backgroundColor设为主题紫色，foregroundColor设为白色让标题和图标清晰可见。

actions数组放置AppBar右侧的操作按钮。这里添加了通知按钮，点击跳转到通知页面。这个按钮提供了另一个访问通知的入口，方便用户快速查看重要通知。

      body: Column(
        children: [
          _buildQuickEntry(),
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.all(8),
              itemCount: _chats.length,
              itemBuilder: (context, index) => _buildChatItem(_chats[index]),
            ),
          ),
        ],
      ),
    );
  }

页面主体使用Column垂直排列快捷入口和会话列表。_buildQuickEntry()构建快捷入口区域，占据固定高度。Expanded包裹ListView.builder，让会话列表占据剩余空间。

ListView.builder是构建长列表的推荐方式，它采用懒加载机制，只渲染可见区域的项目，大大提高了性能。padding设置8像素的内边距，itemCount指定列表项数量，itemBuilder为每个索引构建对应的会话项。

第三部分：快捷入口区域

快捷入口区域将常用功能提取出来，减少用户的操作步骤。系统通知、互动消息、组队邀请这三类消息是用户最关心的，放在显眼位置方便快速访问。

  Widget _buildQuickEntry() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
          ),
        ],
      ),

Container使用白色背景，boxShadow添加轻微阴影效果，让快捷入口区域与下方的会话列表形成视觉分隔。阴影使用5%透明度的黑色，blurRadius设为10让阴影更柔和。

      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _entryItem(
            Icons.notifications,
            '系统通知',
            () => Get.to(() => SystemMessagePage()),
          ),
          _entryItem(
            Icons.thumb_up,
            '互动消息',
            () => Get.to(() => NotificationPage()),
          ),
          _entryItem(
            Icons.group_add,
            '组队邀请',
            () => Get.snackbar('提示', '暂无邀请'),
          ),
        ],
      ),
    );
  }

Row横向排列三个入口项，mainAxisAlignment.spaceAround让它们均匀分布，两端和中间都有相等的间距。

三个入口分别是：

• 系统通知：点击跳转到系统消息页面，显示系统级别的通知
• 互动消息：点击跳转到通知页面，显示点赞、评论等互动消息
• 组队邀请：点击显示提示信息，在实际项目中应该跳转到邀请列表页面

下面是入口项组件的实现，这是一个可复用的组件，接收图标、标签和点击回调三个参数。

  Widget _entryItem(IconData icon, String label, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              color: const Color(0xFF6B4EFF).withOpacity(0.1),
              borderRadius: BorderRadius.circular(25),
            ),
            child: Icon(
              icon,
              color: const Color(0xFF6B4EFF),
              size: 24,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            label,
            style: const TextStyle(
              fontSize: 12,
              color: Colors.black87,
            ),
          ),
        ],
      ),
    );
  }

GestureDetector包裹整个组件，提供点击检测功能。Column垂直排列图标容器和文字标签，mainAxisSize.min让Column只占据必要的高度。

图标容器使用50x50像素的圆形（borderRadius设为25，即宽度的一半），浅紫色背景(10%透明度)配合紫色图标。这种设计让图标更加醒目，同时与应用的主题色保持一致。

文字标签使用12号字体，与图标保持8像素间距。黑色文字在白色背景上清晰可见。

第四部分：会话列表项

会话列表项是消息页面的核心组件，需要展示会话的关键信息，包括头像、名称、最后消息、时间和未读数。

  Widget _buildChatItem(Map<String, dynamic> chat) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
      ),

Container使用白色背景和8像素圆角，margin设置水平8像素、垂直4像素的外边距，让每个会话项之间有适当的间隔。

      child: ListTile(
        onTap: () => Get.to(
          () => ChatPage(
            chatId: chat['id'],
            chatName: chat['name'],
          ),
        ),
        leading: CircleAvatar(
          radius: 24,
          backgroundColor: const Color(0xFF6B4EFF).withOpacity(0.1),
          child: Icon(
            chat['avatar'],
            color: const Color(0xFF6B4EFF),
            size: 24,
          ),
        ),

ListTile是Flutter提供的标准列表项组件，它已经处理好了各种布局细节，使用起来非常方便。onTap回调在点击时跳转到聊天页面，传递会话id和名称作为参数。

leading放置头像，使用CircleAvatar创建圆形头像。radius设为24创建48像素直径的圆形，浅紫色背景配合紫色图标。在实际项目中，这里应该显示用户或群组的真实头像图片。

        title: Text(
          chat['name'],
          style: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 15,
          ),
        ),
        subtitle: Text(
          chat['lastMsg'],
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            color: Colors.grey[600],
            fontSize: 13,
          ),
        ),

title显示会话名称，使用中等粗细(w500)的15号字体。subtitle显示最后一条消息，maxLines设为1限制单行显示，overflow设为ellipsis在文字过长时显示省略号。灰色小字体表示这是次要信息。

trailing区域显示时间和未读数，这是会话项的重要信息，帮助用户判断消息的新旧和重要程度。

        trailing: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              chat['time'],
              style: TextStyle(
                color: Colors.grey[500],
                fontSize: 12,
              ),
            ),
            if (chat['unread'] > 0) ...[
              const SizedBox(height: 4),
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 6,
                  vertical: 2,
                ),
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text(
                  '${chat['unread']}',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }
}

trailing使用Column垂直排列时间和未读数。mainAxisAlignment.center让内容垂直居中，crossAxisAlignment.end让内容靠右对齐。

时间使用灰色小字体显示，可以是具体时间（如"10:30"）或相对时间（如"昨天"、“周一”）。在实际项目中，应该根据消息时间动态计算显示格式。

未读数只在大于0时显示，使用红色胶囊形状的标签。红色背景非常醒目，能够有效吸引用户注意。数字使用白色粗体，在红色背景上清晰可见。borderRadius设为10创建圆角胶囊形状。

这种设计让用户一眼就能看出哪些会话有新消息，帮助用户决定处理的优先级。

消息页面的设计要点

1. 快捷入口设计

将常用功能提取到顶部，减少用户的操作步骤。快捷入口应该包含用户最常使用的功能，如系统通知、互动消息等。入口数量不宜过多，3-4个为宜，太多会让用户难以选择。

快捷入口的图标应该具有明确的含义，让用户一眼就能理解功能。文字标签作为补充说明，帮助新用户理解。

2. 会话列表布局

使用标准的列表项布局，包含头像、名称、最后消息、时间和未读数。这种布局已经被用户广泛接受，易于理解和使用。

头像放在最左侧，是视觉的起点。名称和最后消息垂直排列，名称在上、消息在下，符合阅读习惯。时间和未读数放在最右侧，作为辅助信息。

3. 未读提示设计

使用醒目的红色标签显示未读消息数，帮助用户快速识别有新消息的会话。红色是警示色，能够有效吸引注意力。

未读数的位置应该固定，让用户形成视觉习惯。数字显示让用户知道具体有多少条未读消息，帮助用户决定处理的优先级。

4. 高效列表渲染

使用ListView.builder实现懒加载，只渲染可见区域的项目，提高性能。这对于消息列表特别重要，因为用户可能有大量的会话。

扩展功能建议

1. 搜索功能

添加搜索功能，用户可以快速查找特定的会话。搜索可以支持按会话名称、消息内容等多种方式。

TextField(
  decoration: InputDecoration(
    hintText: '搜索会话',
    prefixIcon: Icon(Icons.search),
  ),
  onChanged: (value) {
    // 过滤会话列表
  },
)

2. 会话管理

添加长按菜单，用户可以删除、置顶或静音会话。这些功能可以帮助用户更好地管理消息。

GestureDetector(
  onLongPress: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            leading: Icon(Icons.push_pin),
            title: Text('置顶'),
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.notifications_off),
            title: Text('静音'),
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.delete),
            title: Text('删除'),
            onTap: () {},
          ),
        ],
      ),
    );
  },
  child: _buildChatItem(chat),
)

3. 消息通知

集成推送通知，用户可以在后台接收新消息提醒。这需要使用Firebase Cloud Messaging或其他推送服务。

4. 消息同步

实现消息同步功能，确保多设备间的消息一致性。这需要服务端支持消息存储和同步协议。

5. 会话分组

将会话按类型分组，如组队群聊、店铺消息、系统通知等。用户可以快速找到特定类型的会话。

性能优化建议

1. 图片缓存

如果会话头像使用网络图片，应该使用缓存机制避免重复加载：

CachedNetworkImage(
  imageUrl: chat['avatarUrl'],
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.person),
)

2. 分页加载

如果会话数量很多，应该实现分页加载，避免一次性加载所有数据：

ListView.builder(
  itemCount: _chats.length + 1,
  itemBuilder: (context, index) {
    if (index == _chats.length) {
      return _buildLoadMoreButton();
    }
    return _buildChatItem(_chats[index]);
  },
)

3. 状态管理

使用GetX或Provider等状态管理方案，将数据获取和UI更新分离：

class MessageController extends GetxController {
  final chats = <ChatModel>[].obs;
  
  Future<void> loadChats() async {
    final data = await api.getChats();
    chats.value = data;
  }
}

总结

通过本篇文章的学习，我们完成了消息列表页面的实现。这个页面为用户提供了便捷的消息管理功能，是社交功能的重要组成部分。

消息页面的设计遵循了即时通讯应用的常见模式，使用快捷入口提供快速访问，使用标准列表项展示会话信息。这样的设计既美观又易于使用，用户可以快速上手。

页面的代码结构清晰，每个功能模块都封装为独立的方法，便于维护和扩展。在实际项目中，可以根据需求添加搜索、会话管理、消息通知等功能。

下一篇文章我们将实现聊天对话功能，敬请期待！

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net