root
/
chatting
mirror of https://gitee.com/zhang_1334717033/chatting
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

修改聊天主界面

master
zhangmeng1334717033 2020-06-09 15:56:48 +08:00
parent ae498bdd7f
commit 20975951ba
4 changed files with 194 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/chatting_data_page.dart
View File

@ -7,6 +7,10 @@ enum MessageType { SYSTEM, PUBLIC, CHAT, GROUP }
// 聊天数据
class MessageData {
//id
int id;
//头像
String avatar;
@ -26,9 +30,9 @@ class MessageData {
}
List<MessageData> messageData = [
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "一休哥", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "一休哥", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "一休哥", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "一休哥", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "一休哥", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "张三", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "李四", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "王麻子", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "王五", "一哥", new DateTime.now(), MessageType.CHAT),
new MessageData("http://blogimages.jspang.com/blogtouxiang1.jpg", "赵柳", "一哥", new DateTime.now(), MessageType.CHAT),
];

110
lib/chatting_details_page.dart
View File

@ -1,18 +1,124 @@
import 'package:flutter/material.dart';
import 'package:chatting/chatting_data_page.dart';
import 'package:chatting/chatting_message_page.dart';
/**
* 聊天主界面
*/
class ChattingDetails extends StatefulWidget {
final MessageData messageData;
const ChattingDetails({Key key, @required this.messageData}) : super(key: key);
@override
_ChattingDetailsState createState() => _ChattingDetailsState();
}
class _ChattingDetailsState extends State<ChattingDetails> {
class _ChattingDetailsState extends State<ChattingDetails> with TickerProviderStateMixin {
final List<ChatMessagePage> _messages = <ChatMessagePage>[];
TextEditingController _textEditingController =new TextEditingController();
bool _isComposing = false;
void _handleSubmitted(String text) {
_textEditingController.clear();
setState((){
_isComposing = false;
});
ChatMessagePage message = new ChatMessagePage(
text: text,
animationController: new AnimationController(
duration: new Duration(milliseconds: 700),
vsync: this
),
messageData: widget.messageData,
);
setState((){
_messages.insert(0, message);
});
message.animationController.forward();
}
@override
Widget build(BuildContext context) {
return Container(
return Scaffold(
appBar: AppBar(
title: Text(widget.messageData.title),
centerTitle: true,
),
body: Column(
children: <Widget>[
Flexible(
child: ListView.builder(
padding: const EdgeInsets.all(8.0),
reverse: true,
itemCount: _messages.length,
itemBuilder: (_,int index){
return _messages[index];
},
),
),
Divider(height: 1.0,),
Container(
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
),
child: row()
)
],
),
);
}
Widget row (){
return IconTheme(
//data: IconThemeData(color: Theme.of(context).accentColor),
data: IconThemeData(color: Colors.pink),
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: TextField(
controller: _textEditingController,
onChanged: (String text) {
setState((){
_isComposing = text.length > 0;
});
},
onSubmitted: _handleSubmitted,
decoration: new InputDecoration.collapsed(hintText: '发送消息'),
),
),
Container(
margin: new EdgeInsets.symmetric(horizontal: 4.0),
child: new IconButton(
icon: new Icon(Icons.send),
onPressed: _isComposing ? () => _handleSubmitted(_textEditingController.text) : null
),
)
],
),
),
);
}
@override
void dispose() {
for(ChatMessagePage message in _messages)
message.animationController.dispose();
super.dispose();
}
}

9
lib/chatting_item_page.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:chatting/chatting_data_page.dart';
import 'package:chatting/touch_callback.dart';
import 'package:chatting/chatting_details_page.dart';
class ChattingItemPage extends StatelessWidget {
@ -22,10 +23,11 @@ class ChattingItemPage extends StatelessWidget {
child: TouchCallBack(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext ctx){
return null;
return ChattingDetails(messageData: messageData,);
}));
},
child: Row(
//垂直方 居中显示
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
@ -34,8 +36,9 @@ class ChattingItemPage extends StatelessWidget {
// 头像左右留一定的外边距
margin: const EdgeInsets.only(left: 13.0, right: 13.0),
child:
Image.network(messageData.avatar, width: 48.0, height: 48.0),
Image.network(messageData.avatar, width: 35.0, height: 30.0),
),
SizedBox(width: 20),
Expanded(
//主标题和子标题采用垂直布局
child: Column(
@ -57,7 +60,7 @@ class ChattingItemPage extends StatelessWidget {
),
Text(
messageData.subTitle,
style: TextStyle(fontSize: 14.0, color: Color(0xffa9a9a9)),
style: TextStyle(fontSize: 16.0, color: Color(0xffa9a9a9)),
maxLines: 1,
//显示不下的文本用省略号代替
overflow: TextOverflow.ellipsis,

71
lib/chatting_message_page.dart Normal file
View File

@ -0,0 +1,71 @@
import 'package:flutter/material.dart';
import 'package:chatting/chatting_data_page.dart';
/**
* CurvedAnimation对象与SizeTransition类结合使用可以产生一个简单的动画效果。缓解效果会使消息在动画开始时快速滑动，并减慢速度直到停止。
*/
class ChatMessagePage extends StatefulWidget {
ChatMessagePage({this.text,this.animationController,this.messageData});
final MessageData messageData ;
final String text;
final AnimationController animationController;
@override
_ChatMessagePageState createState() => _ChatMessagePageState();
}
class _ChatMessagePageState extends State<ChatMessagePage> {
@override
Widget build(BuildContext context) {
if(widget.messageData.title==null){
print("11");
}
return SizeTransition(
sizeFactor: CurvedAnimation(
parent: widget.animationController,
curve: Curves.easeOut
),
axisAlignment: 0.0,
child: cellContaint(context),
);
}
Widget cellContaint (BuildContext context){
return Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 16.0),
child: new CircleAvatar(child: new Text(widget.messageData.title[0])),
),
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(widget.messageData.title, style: Theme.of(context).textTheme.subhead),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(widget.text),
)
]
)
],
),
);
}
}