Flutter AI ChatGPT的聊天 UI（一）

在本文中，我们将使用Flutter构建一个简单的聊天应用，类似于ChatGPT，用户可以发送消息并收到自动回复。我们将包括一个输入框用于用户输入文本，一个显示聊天记录的区域，并添加了区分用户发送和AI自动回复的功能，同时还包括了显示头像的功能。

准备工作

确保你已经安装了Flutter并设置好了开发环境。如果还没有安装，你可以在Flutter官方网站上找到安装指南。

创建Flutter项目

首先，让我们创建一个新的Flutter项目。在命令行中运行以下命令：

flutter create chat_gpt_app

编写代码

实现用户界面

我们将创建一个ChatScreen StatefulWidget，其中包含了用户界面的主要部分。

我们创建了一个ChatScreen StatefulWidget，

它包含一个文本输入框和一个显示聊天记录的ListView。用户输入文本后，点击发送按钮，文本将被添加到消息列表中，并在ListView中显示出来。

为了实现区分用户发送和AI自动回复，并显示对应的头像，你可以对消息进行分类，并使用ListTile来呈现每条消息，在这个修改后的代码中，我们为消息创建了一个Message类，其中包含消息文本和一个布尔值来表示消息是否来自AI。然后，根据消息的类型，我们在_buildMessage函数中选择显示用户头像或AI头像。

要实现用户发送的消息右对齐，AI发送的消息左对齐，你可以在_buildMessage函数中使用Align小部件来调整消息的对齐方式。
我们使用Align小部件将消息文本框包裹起来，根据消息类型选择右对齐或左对齐。同时，我们还使用了ListView.builder的reverse属性，将新消息放在底部显示，以便用户看到最新的消息。

// 导入必要的包
import 'package:flutter/material.dart';

void main() {
  runApp(ChatApp());
}

class ChatApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ChatGPT Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _textController = TextEditingController();
  final List<Message> _messages = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChatGPT Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              reverse: true,
              itemCount: _messages.length,
              itemBuilder: (BuildContext context, int index) {
                return _buildMessage(_messages[index]);
              },
            ),
          ),
          Divider(height: 1.0),
          _buildTextComposer(),
        ],
      ),
    );
  }

  Widget _buildMessage(Message message) {
    final isUserMessage = !message.isBot;
    return Align(
      alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
        padding: EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          color: isUserMessage ? Colors.blue : Colors.grey[300],
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: ListTile(
          leading: CircleAvatar(
            child: isUserMessage ? Icon(Icons.person) : Icon(Icons.android),
          ),
          title: Text(message.text),
        ),
      ),
    );
  }

  Widget _buildTextComposer() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      child: Row(
        children: [
          Flexible(
            child: TextField(
              controller: _textController,
              onSubmitted: _handleSubmitted,
              decoration: InputDecoration.collapsed(
                hintText: 'Send a message',
              ),
            ),
          ),
          IconButton(
            icon: Icon(Icons.send),
            onPressed: () => _handleSubmitted(_textController.text),
          ),
        ],
      ),
    );
  }

  void _handleSubmitted(String text) {
    _textController.clear();
    setState(() {
      _messages.insert(0, Message(text, isBot: false));
      // 模拟AI自动回复
      _messages.insert(0, Message('AI Reply', isBot: true));
    });
  }
}

class Message {
  final String text;
  final bool isBot;

  Message(this.text, {this.isBot = false});
}

运行应用

现在你已经完成了代码的编写，让我们在模拟器或真机上运行应用程序，看看我们的聊天应用是如何工作的吧！

总结

通过本文，我们学习了如何使用Flutter构建一个简单的聊天应用，包括了用户输入文本、显示聊天记录、区分用户发送和AI自动回复以及显示头像的功能。你可以根据自己的需求和喜好进一步扩展这个应用，添加更多功能和样式。

Flutter实战：构建类似ChatGPT的聊天应用（一）