Flutter 实战：构建一个微信小程序（六）

IOS

2023-12-17 18:34:35

Flutter 实战系列的第六篇文章，我们继续探索 Flutter 的魅力，并着手构建一个功能齐全的微信小程序。

聊天页面的设计

聊天页面是微信小程序的核心功能之一，负责处理与联系人之间的消息收发。为了构建一个用户友好的聊天页面，我们遵循以下设计原则：

简洁明了： 聊天界面应简洁明了，重点突出消息内容。
易于操作： 用户应能轻松地发送、接收和回复消息。
个性化： 聊天页面应提供个性化选项，允许用户自定义聊天背景和主题。

添加 PopupMenuButton

PopupMenuButton 是 Flutter 中一种常见的组件，用于在控件上显示一个弹出式菜单。在聊天页面，我们将使用 PopupMenuButton 来提供更多选项，例如删除消息、转发消息或举报用户。

添加 PopupMenuButton 的代码如下：

PopupMenuButton<String>(
  onSelected: (String value) {
    // 处理点击事件
  },
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem<String>(
        value: 'delete',
        child: Text('删除'),
      ),
      PopupMenuItem<String>(
        value: 'forward',
        child: Text('转发'),
      ),
      PopupMenuItem<String>(
        value: 'report',
        child: Text('举报'),
      ),
    ];
  },
)

处理点击事件

当用户点击 PopupMenuButton 中的选项时，onSelected 回调函数会被触发。我们可以使用该函数来处理点击事件，执行相应的操作。

onSelected: (String value) {
  switch (value) {
    case 'delete':
      // 删除消息的逻辑
      break;
    case 'forward':
      // 转发消息的逻辑
      break;
    case 'report':
      // 举报用户的逻辑
      break;
  }
}

代码示例

以下是完整的聊天页面代码示例：

import 'package:flutter/material.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  List<Message> messages = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天'),
        actions: [
          PopupMenuButton<String>(
            onSelected: (String value) {
              switch (value) {
                case 'delete':
                  // 删除消息的逻辑
                  break;
                case 'forward':
                  // 转发消息的逻辑
                  break;
                case 'report':
                  // 举报用户的逻辑
                  break;
              }
            },
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem<String>(
                  value: 'delete',
                  child: Text('删除'),
                ),
                PopupMenuItem<String>(
                  value: 'forward',
                  child: Text('转发'),
                ),
                PopupMenuItem<String>(
                  value: 'report',
                  child: Text('举报'),
                ),
              ];
            },
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (BuildContext context, int index) {
          return MessageWidget(messages[index]);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 发送消息的逻辑
        },
        child: Icon(Icons.send),
      ),
    );
  }
}