flutter 仿微信群聊@好友页面功能代码

在 Flutter 中，模拟微信群聊 @ 好友的功能通常涉及以下几个步骤：

1. **创建用户列表**：首先，你需要存储用户的名称和头像数据，可以用 `List<Widget>` 或者 `List<UserModel>` 类型的数据结构来表示。

class UserModel {
  String name;
  String avatarUrl;

  UserModel({required this.name, required this.avatarUrl});
}

2. **构建好友列表**：使用 `ListView.builder` 和 `AvatarImage` 创建一个滚动的用户列表，当点击某个用户时触发 `onTap` 事件。

ListView.builder(
  itemCount: users.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        child: Image.network(users[index].avatarUrl),
      ),
      title: Text(users[index].name),
      onTap: () {
        // 当前选中的好友，这里只是一个示例，需要连接到具体的处理逻辑
        _selectedUser = users[index];
      },
    );
  },
);

3. **显示@消息**：当选择一个用户后，在聊天区域显示 "@[用户名]" 的提示，并且可能是高亮显示。

Text('@${_selectedUser.name} 发送的消息'),

4. **模拟发送消息**：你可以设置一个按钮或者文本框，当用户输入文字并点击发送时，将文字加上@的标识发送出去。

RaisedButton(
  onPressed: () {
    setState(() {
      sendMessage('@' + _selectedUser.name + ' 这是一条消息');
      _selectedUser = null; // 清空选择状态
    });
  },
)

这只是一个基本的框架，实际应用中可能还需要考虑更多的细节，例如网络请求、实时更新、长按复制等等。