From 20975951baee6f960c96ce68bd10fb87d6c672f4 Mon Sep 17 00:00:00 2001 From: zhangmeng1334717033 Date: Tue, 9 Jun 2020 15:56:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=81=8A=E5=A4=A9=E4=B8=BB?= =?UTF-8?q?=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/chatting_data_page.dart | 14 +++-- lib/chatting_details_page.dart | 110 ++++++++++++++++++++++++++++++++- lib/chatting_item_page.dart | 9 ++- lib/chatting_message_page.dart | 71 +++++++++++++++++++++ 4 files changed, 194 insertions(+), 10 deletions(-) create mode 100644 lib/chatting_message_page.dart diff --git a/lib/chatting_data_page.dart b/lib/chatting_data_page.dart index 1051763..f4743ef 100644 --- a/lib/chatting_data_page.dart +++ b/lib/chatting_data_page.dart @@ -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 = [ - 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), ]; \ No newline at end of file diff --git a/lib/chatting_details_page.dart b/lib/chatting_details_page.dart index 10e72e7..21ad5e8 100644 --- a/lib/chatting_details_page.dart +++ b/lib/chatting_details_page.dart @@ -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 { +class _ChattingDetailsState extends State with TickerProviderStateMixin { + + final List _messages = []; 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: [ + 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: [ + 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(); + } + } diff --git a/lib/chatting_item_page.dart b/lib/chatting_item_page.dart index c33a1b9..125d532 100644 --- a/lib/chatting_item_page.dart +++ b/lib/chatting_item_page.dart @@ -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: [ @@ -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, diff --git a/lib/chatting_message_page.dart b/lib/chatting_message_page.dart new file mode 100644 index 0000000..41d0062 --- /dev/null +++ b/lib/chatting_message_page.dart @@ -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 { + + + @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: [ + 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: [ + 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), + ) + ] + ) + ], + ), + ); + } +} + +