flutter_weixin聊天界面实现
1、自定义聊天文本框
2、输入的数据用list储存
List<String> _messages = [];
3、加载遍历数据
ListView.builder(
itemCount: _messages.length,
itemBuilder: (BuildContext context, int index) {
// return ListTile(
// title: Text(_messages[index]),
// );
return MessageCard( messageText: _messages[index], sentTime: getCurrentTime());
},
),
效果展示：
完整代码：
//message_card.dart
import 'package:flutter/material.dart';
import 'chat_user_card.dart';
class MessageCard extends StatelessWidget {
final String messageText;
final String sentTime;
const MessageCard(
{super.key, required this.messageText, required this.sentTime});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(sentTime,
style: const TextStyle(fontSize: 13, color: Colors.black54)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Container(
// width: 100.0,
// ),
Flexible(
child: Container(
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: const BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
bottomRight: Radius.circular(30),
),
),
constraints: BoxConstraints(maxWidth: 300),
child: Text(
messageText,
style: const TextStyle(fontSize: 15, color: Colors.black87),
),
),
),
const Column(
children: [
SizedBox(
width: 50,
height: 50,
child: Image(
image: AssetImage("images/xiaoheizi.jpg"),
fit: BoxFit.cover, // 设置图片填充方式
),
)
],
),
],
),
],
);
}
}
//chat_screen.dart
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:weixin/widget/message_card.dart';
import 'other/line.dart';
class ChatScreen extends StatefulWidget {
const ChatScreen({Key? key}) : super(key: key);
@override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final TextEditingController _messageController = TextEditingController();
List<String> _messages = [];
void _sendMessage(String message) {
setState(() {
_messages.add(message);
});
_messageController.clear();
}
double screenWith(BuildContext context) {
return MediaQuery.of(context).size.width;
}
String getCurrentTime() {
DateTime now = DateTime.now();
DateFormat formatter = DateFormat('yyyy-MM-dd HH:mm');
String formattedTime = formatter.format(now);
return formattedTime;
}
Widget _buildMessageList() {
return Expanded(
child: ListView.builder(
itemCount: _messages.length,
itemBuilder: (BuildContext context, int index) {
// return ListTile(
// title: Text(_messages[index]),
// );
return MessageCard( messageText: _messages[index], sentTime: getCurrentTime());
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
_buildMessageList(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
height: 1.0,
color: Colors.grey[300],
),
Row(
children: <Widget>[
// Expanded(
// child: TextField(
// controller: _messageController,
// onSubmitted: (String value) {
// if (value.isNotEmpty) {
// _sendMessage(value);
// }
// },
// ),
// ),
GestureDetector(
onTap: () {
//语言功能
},
child: Container(
height: 28,
width: 28,
margin: const EdgeInsets.only(right: 10),
child: const Image(
image: AssetImage(
'images/brand_profile_voice@2x.png'),
),
)),
Container(
width: screenWith(context) - 120,
height: 34.0,
margin: const EdgeInsets.only(left: 5, right: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6.0),
),
child: Padding(
padding:
const EdgeInsets.only(left: 8.0, right: 8.0),
// 右边留有一些空间
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey, // 边框颜色
width: 1.0, // 边框宽度
),
borderRadius:
BorderRadius.circular(10.0), // 边框圆角
),
child: TextField(
controller: _messageController,
cursorColor: Colors.grey,
style: const TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.w300,
),
decoration: const InputDecoration(
contentPadding: EdgeInsets.only(
left: 5.0,
right: 5.0,
bottom: 14.0),
border: InputBorder.none,
),
onSubmitted: (String value) {
if (value.isNotEmpty) {
_sendMessage(value);
}
},
),
),
),
],
),
)),
IconButton(
icon: const Icon(Icons.send),
onPressed: () {
String message = _messageController.text.trim();
if (message.isNotEmpty) {
_sendMessage(message);
}
},
),
],
)
],
)),
],
),
);
}
}
评论
发表评论