聊天界面

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="Test">#D8D8D8</color>
+</resources>

lib/main.dart

@@ -41,7 +41,7 @@ class _ChatAppState extends State<ChatApp> {
   void initState() {
     // TODO: implement initState
     super.initState();
-    print("666666");
+
   }
 
   @override

lib/tools/HomePage.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import 'Message.dart';
+
 class Homepage extends StatefulWidget {
   const Homepage({super.key});
 
@@ -8,16 +10,162 @@ class Homepage extends StatefulWidget {
 }
 
 class _HomepageState extends State<Homepage> {
+  List<Message> list = [];
+  final TextEditingController _chatController = TextEditingController();
+  String chatText = "";
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    list = [Message('你好', false), Message('你好', true)];
+
+    //监听内容变化
+    _chatController.addListener(() {
+      chatText = _chatController.text;
+      print("内容监听1：${_chatController.text}");
+    });
+  }
+
+  @override
+  void dispose() {
+    _chatController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-     appBar: AppBar(
+      backgroundColor: Colors.white,
-       title: Text("聊天"),
+      appBar: AppBar(
-     ),
+        title: Text(
+          "王梦阳",
+          style: TextStyle(fontSize: 18),
+        ),
+        backgroundColor: Colors.white,
+        centerTitle: true,
+      ),
       body: Container(
-        child: Text('你好'),
+        child: Column(
+          children: [
+            Container(
+              width: double.infinity,
+              height: 1,
+              color: Color(0xFFDFDFDF),
+            ),
+            Expanded(
+                child: Container(
+              alignment: Alignment.topCenter,
+              child: ListView.builder(
+                  // reverse: true,
+                  itemCount: list.length,
+                  itemBuilder: (Context, index) {
+                    return _item(index);
+                  }),
+            )),
+            Card(
+              elevation: 5,
+              color: Colors.white,
+              margin: EdgeInsets.only(left: 16, right: 16, bottom: 30),
+              child: Row(
+                children: [
+                  //输入框
+                  Expanded(
+                    child: Container(
+                      margin: EdgeInsets.only(left: 16),
+                      child: TextField(
+                        controller: _chatController,
+                        decoration: InputDecoration(
+                          border: InputBorder.none, // 移除非聚焦状态下的边框
+                          enabledBorder: InputBorder.none, // 移除获得焦点但未输入内容时的边框
+                          focusedBorder: InputBorder.none, // 移除输入时的边框
+                        ),
+                      ),
+                    ),
+                  ),
+                  GestureDetector(
+                    onTap: () {
+                      list.add(Message(chatText, true));
+                      _chatController.clear();
+                      setState(() {});
+                    },
+                    child: Container(
+                      width: 70,
+                      height: 50,
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                          color: Color(0xFF006CFF), borderRadius: BorderRadius.all(Radius.circular(8.0))),
+                      child: Text(
+                        "发送",
+                        style: TextStyle(color: Colors.white),
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ],
+        ),
       ),
     );
+  }
 
+  _item(index) {
+    return Padding(
+      padding: EdgeInsets.symmetric(vertical: 8.0),
+      child: !list[index].isMe
+          ? Row(
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                Container(
+                  width: 45,
+                  height: 45,
+                  color: Color(0xFFD8D8D8),
+                  margin: EdgeInsets.only(left: 16),
+                ),
+                Container(
+                  margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 4.0),
+                  padding: EdgeInsets.all(12.0),
+                  decoration: BoxDecoration(
+                    color: Color(0xFFECECEC),
+                    borderRadius: BorderRadius.circular(16.0),
+                  ),
+                  child: Text(
+                    list[index].text,
+                    style: TextStyle(
+                      fontSize: 16,
+                      color: Colors.black,
+                    ),
+                  ),
+                ),
+              ],
+            )
+          : Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                Container(
+                  margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 4.0),
+                  padding: EdgeInsets.all(12.0),
+                  decoration: BoxDecoration(
+                    color: Color(0xFF006CFF),
+                    borderRadius: BorderRadius.circular(16.0),
+                  ),
+                  child: Text(
+                    list[index].text,
+                    style: TextStyle(
+                      fontSize: 16,
+                      color: Colors.white,
+                    ),
+                  ),
+                ),
+                Container(
+                  width: 45,
+                  height: 45,
+                  color: Color(0xFFD8D8D8),
+                  margin: EdgeInsets.only(right: 16),
+                ),
+              ],
+            ),
+    );
   }
 }

lib/tools/Message.dart

@@ -0,0 +1,6 @@
+class Message{
+  final String text;
+  final bool isMe;
+
+  Message(this.text, this.isMe);
+}