修改聊天主界面

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> 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),
 ];

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<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();
+  }
+
 }

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: <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,

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<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),
+                )
+              ]
+          )
+        ],
+      ),
+    );
+  }
+}
+
+