hat JavaFX css eine Möglichkeit, die Hintergrundfarbe über die Ränder hinaus zu stoppen?

Question

Ich versuche, eine Karte wie das Bootstrap-CSS zu erstellen, aber JavaFX-Komponenten verwenden. Ich möchte eine abgerundete Umrandung, aber die Hintergrundfarbe des oberen Teils (der Kopfzeile) bereitet mir Probleme.

Der Hintergrund überläuft die Grenze und sieht ziemlich hässlich aus. Ich habe ein bisschen gegoogelt und festgestellt, dass ein Overflow: versteckt auf der Hintergrundfarbe sollte es lösen. JavaFX css scheint das jedoch nicht zu haben. Gibt es eine andere Möglichkeit, dies zu lösen?

Meine Lösung bisher:

Answer 1

Wie in den JavaFX CSS Reference Guide beschrieben, Überlauf wird nicht unterstützt.

JavaFX CSS nicht CSS-Layout-Eigenschaften wie float, Position, Überlauf und Breite unterstützen. Die CSS Polsterung und Margen Eigenschaften werden jedoch auf einigen JavaFX-Szenengrafikobjekte unterstützt. Alle anderen Aspekte des Layouts werden programmgesteuert in JavaFX-Code behandelt. Außerdem wird CSS-Unterstützung für HTML-spezifische Elemente wie Tabellen nicht unterstützt, da in JavaFX kein entsprechendes Konstrukt vorhanden ist.

jedoch das abgerundete Hintergrund Problem zu lösen Sie -fx-background-radius zusammen mit -fx-border-radius verwenden können. Sie sollten den gleichen Wert haben. Sie finden es here in the reference guide.

---

Hier ist ein Beispiel für eine Bootstrap-like-Karte, die ich denke, Sie versuchen zu machen. Sie würden verwenden -fx-background-radius: <top-left> <top-right> <bottom-right> <bottom-left>; die -fx-background-radius: 10 10 0 0;

public class Card extends StackPane { 
    public BorderPane border = new BorderPane(); 
    public StackPane header = new StackPane(), content = new StackPane(); 
    public Card() { 
     setAlignment(Pos.CENTER); 
     getChildren().add(border); 
     border.setTop(header); 
     border.setCenter(content); 
     border.setStyle("-fx-border-color: cornflowerblue; -fx-border-radius: 10; "); 
     header.setStyle("-fx-background-color: derive(cornflowerblue, 70%); -fx-background-radius: 10 10 0 0; "); 
     header.setMinWidth(100); 
     header.setMinHeight(80); 
     content.setMinWidth(100); 
     content.setMinHeight(100); 
    } 

    public BorderPane getCard() { 
     return border; 
    } 

    public StackPane getHeader() { 
     return header; 
    } 

    public StackPane getContent() { 
     return content; 
    } 
} 

public void start(Stage stage) throws Exception { 
    Card card = new Card(); 
    card.setPadding(new Insets(10,10,10,10)); 

    GridPane grid = new GridPane(); 
    grid.setVgap(10); grid.setHgap(10); 
    grid.setAlignment(Pos.CENTER); 
    grid.addRow(0, new Label("Username"), new TextField()); 
    grid.addRow(1, new Label("Password"), new PasswordField()); 
    grid.addRow(2, new Button("Submit")); 
    card.getContent().getChildren().add(grid); 

    Label title = new Label("Card Example"); 
    title.setFont(Font.font("Tahoma", FontWeight.SEMI_BOLD, 36)); 
    card.getHeader().getChildren().add(title); 

    StackPane stack = new StackPane(); 
    stack.setAlignment(Pos.CENTER); 
    stack.getChildren().add(card); 

    Scene scene = new Scene(stack, 500, 300); 
    stage.setTitle("Boostrap-like Card Example"); 
    stage.setScene(scene); 
    stage.show(); 
}