JavaFX에서 ListCell의 ListView 폭을 동적으로 변경합니다.

Question

이것은 javaFX를 사용하는 채팅 응용 프로그램의 인터페이스입니다. 채팅 창은 ListView 구성 요소이며 CSS를 사용하여 조금 닦습니다.

.list-cell { 
    display: inline-block; 
    -fx-min-width: 50px; 
    -fx-background-color: lightyellow; 
    -fx-background-radius: 30px; 
    -fx-border-radius: 20px; 
    -fx-border-width: 2px; 
    -fx-border-style: solid; 
    -fx-border-color: #666666; 
} 
.list-cell:empty { 
    -fx-background-color: transparent; 
    -fx-border-width: 0px; 
} 

문제는 내가 텍스트의 길이에 따라 각 listcell 요소의 폭을 변경할 것입니다 : 여기에 CSS와 스크린 샷입니다. CSS 파일에 minWidthprefWidth (예 : 50px)을 설정하거나 listView.setCellFactory을 사용하려고했지만 아무 일도 일어나지 않았습니다. 길이는 전혀 변하지 않습니다. ListView에서 각 셀의 길이를 바꿀 수 있을지 궁금합니다. (또는 HBox/VBox/seperator와 같은 것을 사용해야합니다 ...)

Answer 1

그래픽을 Label으로 변경하고 레이블의 스타일을 지정하십시오. 예 :

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.control.ListCell; 
import javafx.scene.control.ListView; 
import javafx.stage.Stage; 

public class FormattedListCell extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     ListView<String> listView = new ListView<>(); 
     listView.getItems().addAll("One", "Two", "Three", "Four"); 

     listView.setCellFactory(lv -> new ListCell<String>() { 
      private final Label label = new Label(); 
      @Override 
      protected void updateItem(String item, boolean empty) { 
       super.updateItem(item, empty); 
       if (empty) { 
        setGraphic(null); 
       } else { 
        label.setText(item); 
        setGraphic(label); 
       } 
      } 
     }); 

     Scene scene = new Scene(listView, 400, 400); 
     scene.getStylesheets().add("formatted-list-cell.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

와 스타일 시트를 수정

.list-cell .label { 
    display: inline-block; 
    -fx-min-width: 50px; 
    -fx-background-color: lightyellow; 
    -fx-background-radius: 30px; 
    -fx-border-radius: 20px; 
    -fx-border-width: 2px; 
    -fx-border-style: solid; 
    -fx-border-color: #666666; 
} 
.list-cell:empty .label { 
    -fx-background-color: transparent; 
    -fx-border-width: 0px; 
} 

당신은 실제로 목록 세포 (뿐만 아니라 그 안에 라벨) 당신이 원하는 정확한 스타일을 얻을 수있는 스타일을해야 할 수도 있습니다, 그러나 이것은해야 너 시작 했어. 여기

는 -fx-background 그래서 텍스트 색상이 자동으로 조정됩니다 것을, 선택 색상을 관리하고 사용하는보다 완전한 CSS 파일, 또한 목록 세포 자체에 어떤 스타일을 추가합니다

.list-cell { 
    -fx-background-color: transparent ; 
    -fx-padding: 0 ; 
} 

.list-cell .label { 
    display: inline-block; 
    -fx-background: lightyellow; 
    -fx-background-color: -fx-background ; 
    -fx-background-radius: 30px; 
    -fx-border-radius: 20px; 
    -fx-border-width: 2px; 
    -fx-border-style: solid; 
    -fx-border-color: #666666; 
    -fx-padding: 12px ; 
} 
.list-cell:empty .label { 
    -fx-background-color: transparent; 
    -fx-border-width: 0px; 
} 
.list-cell:selected .label { 
    -fx-background: -fx-selection-bar ; 
}