25.4.20学习总结

怎样使用listView组件来做聊天界面

1. 什么是CellFactory？

在JavaFX中，控件（比如ListView、TableView等）用Cell来表现每一条数据。

• Cell：代表这个单元格（即每个列表项）中表现的内容和样式。
  
• CellFactory：是一个工厂接口，负责创建和设置每个Cell。
  

简朴来说，
   CellFactory用于定义怎样将数据对象（比如挚友信息）转化为界面表现的单元格(Cell)。
  

---

2. 为什么要自定义CellFactory？

默认的Cell只表现数据的toString()方法的内容，
假如你必要自定义界面结构（比如表现头像、名字、状态指示等），
就必要自定义Cell，通过实现本身的CellFactory。
3. 怎样自定义CellFactory？

• 自定义CellFactory的步骤：
  
  
  
  • 调用listView.setCellFactory()；
    
  • 在call()中返回一个自定义的ListCell<T>；
    
  • 重写updateItem()，设置每个单元格的内容。
    
  
  

详细的步骤：

 1.创建一个消息属性类；

例如，以聊天室的聊天界面为例

1. import javafx.scene.image.Image;
3. public class TextMessage {
4.     private final String content;
5.     private final int MessageType;
6.     private final String userName;
7.     private final Image  profilePicture;
8.     private final boolean isSender;
9.     public TextMessage(String content, int MessageType, String userName, Image profilePicture, boolean isSender) {
10.         this.content = content;
11.         this.MessageType = MessageType;
12.         this.userName = userName;
13.         this.profilePicture = profilePicture;
14.         this.isSender = isSender;
15.     }
16.     public String getContent() {
17.         return content;
18.     }
19.     public int getMessageType() {
20.         return MessageType;
21.     }
22.     public String getUserName() {
23.         return userName;
24.     }
25.     public Image getProfilePicture() {
26.         return profilePicture;
27.     }
28.     public boolean getIsSender() {
29.         return isSender;
30.     }
32. }

复制代码

2.创建Cell类（稍后写详细代码）

其中，ListCell后跟着的是你创建的属性类。重写方法后，我们将在else里写具体代码。 

1. public class ChatTextMessageCell extends ListCell<TextMessage> {
2.     @Override
3.     protected void updateItem(TextMessage item, boolean empty) {
4.     super.updateItem(item, empty);
5.         if (empty || item == null) {
6.             setText(null);
7.             setGraphic(null);
8.         } else {
13.         }
14.     }
15. }

复制代码

3.在控制器类里初始化

起首，在类里添加如下代码：

1. private ObservableList<TextMessage> messages;

复制代码

其中，ObservableList是 JavaFX 中用于实现数据绑定的紧张接口。它答应 UI 控件主动相应数据变化。
将你的listView组件声明一下，如下，

1. @FXML public ListView<TextMessage> chatList;

复制代码

初始化方法（注意：以initialize为名的无参方法无论加不加注解都会在应用启动时执行）：

1. @FXML public void initialize(){
2.         messages = FXCollections.observableArrayList();
3.         chatList.setItems(messages);
4.         chatList.setCellFactory(param -> new ChatTextMessageCell());
5.     }

复制代码

 4.具体写Cell类

注意：这个类对于初学者来说并不好写，可能需调解多次才华达到预期。
 对于javaFX有过了解的知道，VBox和HBox的区别，我们将在下面可能频繁使用这两个容器。
我们必要聊天界面表现的每条消息由头像，昵称，发出的消息等组成，其中，头像位于最左端或者最右端，昵称和发出的消息共同组成上下结构位于头像的另一端。也就是说，根容器，是必要展示左右两端的，我们使用HBox作为根容器，如下：

1. HBox root = new HBox();

复制代码

之后，我们分别声明头像的组件和另一端的容器，又因为另一端是上下结构，我们使用VBox作为容器。如下：

1. ImageView imageView = new ImageView(item.getProfilePicture());
2. VBox messageBox = new VBox();

复制代码

之后，我们将两者放入根容器中，如下：

1. root.getChildren().addAll(imageView, messageBox);

复制代码

 之后便是相同的操作了，依次处理上下结构即可。
显然，如许的结果不符合要求，我们还行对组件进行设置。在这便必要各位查阅官方文档了。
记得在末了加上setGraphic(root);应用设置！！！
完备代码引用：

1. import javafx.geometry.Pos;
2. import javafx.scene.control.Label;
3. import javafx.scene.control.ListCell;
4. import javafx.scene.image.ImageView;
5. import javafx.scene.layout.HBox;
6. import javafx.scene.layout.VBox;
7. import javafx.scene.shape.Circle;
9. public class ChatTextMessageCell extends ListCell<TextMessage> {
10.     @Override
11.     protected void updateItem(TextMessage item, boolean empty) {
12.         super.updateItem(item, empty);
13.         if (empty || item == null) {
14.             setText(null);
15.             setGraphic(null);
16.         } else {
17.             HBox root = new HBox();
18.             if (item.getMessageType() == 1) {
19.                 // 时间消息样式保持不变
20.                 Label timeLabel = new Label(item.getContent());
21.                 timeLabel.setStyle("-fx-font-size: 10px; -fx-text-fill: gray;");
22.                 root.getChildren().add(timeLabel);
23.                 root.setAlignment(Pos.CENTER);
24.             } else {
25.                 // ================== 头像区域 ==================
26.                 ImageView imageView = new ImageView(item.getProfilePicture());
27.                 imageView.setFitHeight(40);
28.                 imageView.setFitWidth(40);
29.                 imageView.setPreserveRatio(false);
30.                 imageView.setClip(new Circle(20, 20, 15));
32.                 // ================== 消息内容区域 ==================
33.                 VBox messageBox = new VBox();
35.                 // 昵称标签（添加左外边距贴近头像）
36.                 Label nameLabel = new Label(item.getUserName());
37.                 nameLabel.setStyle("-fx-font-size: 12px; -fx-text-fill: #666; /*-fx-padding: 0 0 2px 8px;*/");
39.                 // 消息气泡
40.                 if(item.getMessageType()==2){
41.                     HBox bubble = new HBox();
42.                     bubble.setMaxWidth(200);
43.                     bubble.setStyle(
44.                             "-fx-background-radius: 15px; " +
45.                                     "-fx-padding: 8px 12px; " +
46.                                     "-fx-background-color: " + (item.getIsSender() ? "#f5f5f5" : "#0099ff") + ";"
47.                     );
49.                     // 消息文本
50.                     Label messageLabel = new Label(item.getContent());
51.                     messageLabel.setStyle(
52.                             "-fx-font-size: 14px; " +
53.                                     "-fx-text-fill: " + (item.getIsSender() ? "black" : "white") + ";"
54.                     );
55.                     messageLabel.setWrapText(true);
57.                     // ================== 布局组装 ==================
58.                     bubble.getChildren().add(messageLabel);
59.                     messageBox.getChildren().addAll(nameLabel, bubble);
61.                     // 根容器设置
62.                     root.setSpacing(5);
63.                     if (item.getIsSender()) {
64.                         messageBox.setAlignment(Pos.CENTER_LEFT);
65.                         root.setAlignment(Pos.CENTER_LEFT);
66.                         root.getChildren().addAll(imageView, messageBox);
67.                     } else {
68.                         messageBox.setAlignment(Pos.CENTER_RIGHT);
69.                         root.setAlignment(Pos.CENTER_RIGHT);
70.                         root.getChildren().addAll(messageBox, imageView);
71.                     }
72.                 }
73.             }
74.             setGraphic(root);
75.         }
76.     }
77. }

复制代码

5.将listView的默认样式去除

在你的resources文件中，创建css文件，内容如下：

1. .list-view { /* 应用于整个ListView */
2.     -fx-background-color: WHITE; /* ListView 背景透明 */
3. }
5. .list-cell {
6.     -fx-background-color: transparent; /* 单元格背景透明 */
7.     -fx-padding: 0;                  /* 移除默认内边距 */
8.     -fx-border: none;                /* 移除边框 */
9.     -fx-focus-color: transparent;     /* 移除焦点效果 */
10.     -fx-control-inner-background: transparent; /* 解决部分主题背景问题 */
11.     -fx-text-fill: black;           /* 默认文本颜色，并保持 */
12. }
14. .list-cell:hover {
15.     -fx-background-color: transparent; /* 悬停时透明 */
16. }
18. .list-cell:selected {
19.     -fx-background-color: transparent; /* 选中时透明 */
20. }
22. .list-cell:selected:focused {
23.     -fx-background-color: transparent; /* 选中并聚焦时透明 */
24. }
26. .list-cell:pressed {
27.     -fx-background-color: transparent; /* 按下时透明 */
28. }

复制代码

将此css文件导入即可。

1. FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
2. Scene scene = new Scene(fxmlLoader.load(), 900, 618);
3. // 加载 CSS 文件
4. scene.getStylesheets().add(Objects.requireNonNull(getClass().getResource("style.css")).toExternalForm());

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。