2025年2月27日18:09:38

src/main/java/com/zhangmeng/tools/controller/ChatAppImplController.java

@@ -15,7 +15,9 @@ import javafx.scene.control.*;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.input.KeyCode;
+import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.HBox;
+import javafx.scene.layout.VBox;
 import javafx.scene.paint.Paint;
 import javafx.scene.text.Font;
 import javafx.util.Callback;
@@ -27,6 +29,7 @@ import org.java_websocket.drafts.Draft_6455;
 import org.java_websocket.handshake.ServerHandshake;
 
 import java.net.URI;
+import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
@@ -34,6 +37,12 @@ import java.util.Map;
 @Slf4j
 public class ChatAppImplController {
 
+    @FXML
+    public AnchorPane log_root;
+
+    @FXML
+    public ScrollPane log_scroll;
+
     public enum Type{
         ws("ws"),
         wss("wss")
@@ -95,8 +104,53 @@ public class ChatAppImplController {
         });
         file_button.setOnAction(event -> getChatFriendList());
         init_netty_client();
+
+        log_root.prefWidthProperty().bind(log_scroll.widthProperty().subtract(15));
+        log_root.prefHeightProperty().bind(log_scroll.heightProperty());
+
+        create_chat_items();
+
     }
 
+    //eg
+    private void create_chat_items() {
+
+        for (int i = 0; i < 20; i++) {
+            String friend_name = i + "friend_name1111111111111111111111111";
+            String content = i +"content" ;
+            String time = "2021-01-01 10:00:00";
+            HBox hBox = create_chat_item(friend_name, content, time);
+            log_root.getChildren().add(hBox);
+            AnchorPane.setTopAnchor(hBox, 35.0 *  + i);
+            if (i%2 == 0){
+                hBox.setAlignment(Pos.CENTER_RIGHT);
+                AnchorPane.setRightAnchor(hBox, 0.0);
+                hBox.setStyle("-fx-background-color: #c2e6c5;-fx-border-radius: 10px;-fx-background-radius: 10px");
+            }else {
+                hBox.setStyle("-fx-background-color: white;-fx-border-radius: 10px;-fx-background-radius: 10px");
+                hBox.setAlignment(Pos.CENTER_LEFT);
+                AnchorPane.setLeftAnchor(hBox, 0.0);
+            }
+        }
+
+    }
+
+    private HBox create_chat_item(String friend_name, String content, String time) {
+        HBox hBox = new HBox(10);
+        //hBox.setAlignment(Pos.CENTER);
+
+        Label label = new Label(friend_name + " : " + content);
+        label.setWrapText(true);
+        label.setTextFill(Paint.valueOf("#000000"));
+        label.setFont(Font.font(15));
+        label.setPrefWidth(200);
+//        label.setPrefHeight(35);
+        hBox.getChildren().add(new Label(time));
+        hBox.getChildren().add(label);
+        return hBox;
+    }
+
+
     public void init_netty_client(){
         if (webSocketClient == null) {
             webSocketClient(ChatAppImplController.Type.ws, netty_host, netty_port, "/websocket", "userId=1&source=pc");

src/main/resources/fxml/chat-app-impl.fxml

@@ -2,14 +2,15 @@
 
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ListView?>
+<?import javafx.scene.control.ScrollPane?>
 <?import javafx.scene.control.SplitPane?>
 <?import javafx.scene.control.TextArea?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 
-<AnchorPane fx:controller="com.zhangmeng.tools.controller.ChatAppImplController" prefHeight="649.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/19"
+<AnchorPane prefHeight="649.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/19"
-            xmlns:fx="http://javafx.com/fxml/1">
+            xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.zhangmeng.tools.controller.ChatAppImplController">
 
     <SplitPane dividerPositions="0.25" layoutX="35.0" layoutY="42.0" prefHeight="160.0" prefWidth="200.0"
                AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
@@ -18,18 +19,26 @@
             <ListView fx:id="listView" prefHeight="200.0" prefWidth="200.0"/>
             <AnchorPane minHeight="0.0" minWidth="0.0" opacity="1" prefHeight="160.0" prefWidth="100.0">
                 <children>
-                    <VBox prefHeight="447.0" prefWidth="895.0" AnchorPane.bottomAnchor="200.0"
+                    <ScrollPane fx:id="log_scroll" prefHeight="447.0" prefWidth="895.0" AnchorPane.bottomAnchor="200.0"
-                          AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"/>
+                          AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
-                    <AnchorPane layoutY="447.0" prefHeight="200.0" prefWidth="895.0"
+
-                                AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
+                                <content>
+                                    <AnchorPane fx:id="log_root" prefHeight="459.0" prefWidth="895.0">
+                                    </AnchorPane>
+                                </content>
+
+                    </ScrollPane>
+                    <AnchorPane layoutY="447.0" prefHeight="200.0" prefWidth="895.0" AnchorPane.bottomAnchor="0.0"
+                                AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                         <children>
-                            <TextArea fx:id="content" layoutX="14.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0"
+                            <TextArea fx:id="content" layoutX="14.0" prefHeight="200.0" prefWidth="200.0"
+                                      style="-fx-border-width: 0;-fx-border-style: none;" AnchorPane.bottomAnchor="0.0"
                                       AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
-                                      AnchorPane.topAnchor="25.0" style="-fx-border-width: 0;-fx-border-style: none;"/>
+                                      AnchorPane.topAnchor="25.0"/>
                             <HBox prefHeight="100.0" prefWidth="200.0" AnchorPane.bottomAnchor="173.0"
                                   AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                                 <children>
-                                    <Button mnemonicParsing="false" text="文件" fx:id="file_button" />
+                                    <Button fx:id="file_button" mnemonicParsing="false" text="文件"/>
                                 </children>
                             </HBox>
                         </children>