形象与ListView中的文本在左侧和右侧上交替排的JavaFX

Question

ListView<ChatModel> listView; 
ObservableList<ChatModel> items = FXCollections.observableArrayList(); 

private final Image IMAGE_MEN = new Image("men.png"); 
private final Image IMAGE_WOMEN = new Image("women.png"); 

private Image[] listOfImages = {IMAGE_MEN, IMAGE_WOMEN}; 

listView = new ListView<ChatModel>(); 
     listView.setPrefHeight(550); 
     listView.setItems(items); 

     listView.setCellFactory(param -> new ListCell<ChatModel>() { 
      private ImageView imageView = new ImageView(); 

      @Override 
      public void updateItem(ChatModel name, boolean empty) { 
       super.updateItem(name, empty); 
       if (empty) { 
        setText(null); 
        setGraphic(null); 
       } else { 
        if (name.getClientName().equals("testing")) 
         imageView.setImage(listOfImages[0]); 
        else if (name.getClientName().equals("testing1")) 
         imageView.setImage(listOfImages[1]); 
        setText(name.getClientMessage()); 
        setGraphic(imageView); 
       } 
      } 
     }); 

我，我用上面代码中使用的图像在ListView添加的项目和文本它工作正常，但在列表视图中的设计在左在所有的行中。我有一个要求，交替行应该有不同的设计。下一行应该有右侧元素。

这里的设计我都取得了至今

我想在左右侧交替行。

请谁能告诉我怎样才能做到这一点。

Answer 1

你可以用CSS实现它：

.list-view .list-cell:odd { 
    -fx-content-display:left; 
} 

.list-view .list-cell:even { 
    -fx-content-display:right; 
} 

选择器设置基础上，ListCell的伪状态的-fx-content-display属性：

• odd：文本左 - 图形右侧

• even：格拉希奇左 - 右文字