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自动回复以及显示头像的功能。你可以根据自己的需求和喜好进一步扩展这个应用，添加更多功能和样式。
