javafx - 将标签添加到边框，JavaFX

Question

当我尝试将标签添加到 gridpane 中时，如第二张图片所示，它不起作用。我已经尝试了很多东西，比如添加 CSS，但它仍然无法正常工作。为什么第 113 和 114 行不起作用？ (opcje.setStyle("-fx-background-color: #f4f4f4");)

这是我的:

这是我需要的:

我的代码:

import javafx.application.Application; 
import javafx.geometry.Insets;
import javafx.scene.Scene; 
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.scene.control.TextField; 
import javafx.stage.Stage; 

public class KCK_lab1_zad2 extends Application { 

@SuppressWarnings("static-access")
public void start (Stage primaryStage) { 

        try {
              primaryStage.setTitle("Narzedzie przetwarzania plikow");

              BorderPane glownyBorderPane = new BorderPane();

              Scene scene = new Scene(glownyBorderPane, 600, 200);

              GridPane lewyGridPane = new GridPane();
              GridPane prawyGridPane = new GridPane();

              glownyBorderPane.setLeft(lewyGridPane);
              glownyBorderPane.setRight(prawyGridPane);
              glownyBorderPane.setMargin(lewyGridPane, new Insets(0, 15, 0, 0));


              Label         zrodlo      = new Label("Źrodlo");
              Label         wynik       = new Label("Wynik");
              TextField     text1       = new TextField();
              TextField     text2       = new TextField();
              Button        przegladaj1 = new Button("Przegladaj...");
              Button        przegladaj2 = new Button("Przegladaj...");

              lewyGridPane.setVgap(15);
              lewyGridPane.setHgap(0);

              lewyGridPane.setPadding(new Insets(15));
              lewyGridPane.setLayoutX(100);
              lewyGridPane.setLayoutY(100);
              lewyGridPane.setMinSize(100, 150);

              text1.setPrefSize(100, 20);
              text2.setPrefSize(100, 20);
              przegladaj1.setPrefSize(100, 20);
              przegladaj2.setPrefSize(100, 20);


              glownyBorderPane.setPadding(new Insets(20, 10, 10, 10));

              Label panelPlikow = new Label("Panel plików");
              panelPlikow.getStyleClass().add("title");
              panelPlikow.setPadding(new Insets(-60, -20, 0, 0));

              panelPlikow.setPrefWidth(150);      
              lewyGridPane.add(panelPlikow, 0, 0);
              lewyGridPane.add(zrodlo, 0, 0);
              lewyGridPane.add(text1, 1, 0);
              lewyGridPane.add(przegladaj1, 2, 0);
              lewyGridPane.add(wynik, 0, 1);
              lewyGridPane.add(text2, 1, 1);
              lewyGridPane.add(przegladaj2, 2, 1);

              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              //grd.prefHeightProperty().bind(root.heightProperty());
              //glownyBorderPane.borderProperty();


              lewyGridPane .setStyle("-fx-border-style: solid inside;");
              lewyGridPane .setStyle("-fx-border-width: 1;");
              lewyGridPane .setStyle("-fx-border-insets: 1;");
              lewyGridPane .setStyle("-fx-border-radius: 1;");
              lewyGridPane .setStyle("-fx-border-color: black;");     


              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              Label     opcje           = new Label ("Opcje uruchomienia");
              Button    uruchom         = new Button ("Uruchom przetwarza...");
              Button    pomoc           = new Button ("Pomoc");
              Button    o_programie     = new Button ("O programie");
              Button    zakoncz         = new Button ("Zapisz i zakończ");

              prawyGridPane.setVgap(0);
              prawyGridPane.setHgap(0);
              prawyGridPane.setPrefSize(150, 200);
              prawyGridPane.setMaxWidth(150);

              prawyGridPane.setPadding(new Insets(15));
              prawyGridPane.setPrefSize(400, 300);


              opcje.setPrefSize(150, 20);
              uruchom.setPrefSize(150, 20);
              o_programie.setPrefSize(150, 20);
              zakoncz.setPrefSize(150, 20);

              opcje.getStyleClass().add("title");
              opcje.setPadding(new Insets(-34, -20, 0, 0));


              VBox vbox = new VBox();
              prawyGridPane.add(vbox, 0, 0);


              opcje.setPrefWidth(150); 
              opcje.setStyle("-fx-background-color: #f4f4f4");
              panelPlikow.setStyle("-fx-background-color: #f4f4f4");
              vbox.getChildren().add(opcje);
              vbox.getChildren().add(uruchom);
              vbox.getChildren().add(pomoc);
              vbox.getChildren().add(o_programie);
              vbox.getChildren().add(zakoncz);

              vbox.toBack();
              //opcje.toFront();



              uruchom.prefWidthProperty().bind(glownyBorderPane.widthProperty());
              pomoc.prefWidthProperty().bind(glownyBorderPane.widthProperty());
              o_programie.prefWidthProperty().bind(glownyBorderPane.widthProperty());
              zakoncz.prefWidthProperty().bind(glownyBorderPane.widthProperty());

              uruchom.prefHeightProperty().bind(glownyBorderPane.heightProperty());
              pomoc.prefHeightProperty().bind(glownyBorderPane.heightProperty());
              o_programie.prefHeightProperty().bind(glownyBorderPane.heightProperty());
              zakoncz.prefHeightProperty().bind(glownyBorderPane.heightProperty());

              /*

              opcje .setStyle("-fx-font: 28px Vivaldi;");
              opcje .setStyle("-fx-font-color: red;");
              opcje .setStyle("-fx-background-color: white;");
              opcje .setStyle("-fx-translate-y: -16;");
              opcje .setStyle("-fx-content-display: top;");
              opcje .setStyle("-fx-background-color: black;");
              opcje.setTextFill(Color.RED);
              opcje.setStyle("-fx-background-color: white");
              */


              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


              //grd.prefHeightProperty().bind(root.heightProperty());
              //glownyBorderPane.borderProperty();



              prawyGridPane .setStyle("-fx-border-style: solid inside;");
              prawyGridPane .setStyle("-fx-border-width: 1;");
              prawyGridPane .setStyle("-fx-border-insets: 1;");
              prawyGridPane .setStyle("-fx-border-radius: 1;");
              prawyGridPane .setStyle("-fx-border-color: black;");      


              //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              primaryStage.setScene(scene);
              primaryStage.setMinHeight(250);
              primaryStage.setMinWidth(580);
              primaryStage.show();

      } catch(Exception e) {
          e.printStackTrace();
      }
  }

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

Answer 1

问题是标题标签的填充。要识别这一点，请设置标题标签的背景颜色，例如为绿色，将填充设置为 0 并逐步增加它以达到您的值。如果你这样做，文本会向上移动(这是你想要的)，但内容(以及背景)会变小并最终消失(这是你不想要的)。总的来说，它不适用于填充:

如果您真的想保留您的解决方案，您可以通过使用通常应用于向标签添加图标的标签的图形属性来弥补这个问题。

替换

 Label panelPlikow = new Label("Panel plików");

与

 Label panelPlikow = new Label();
 panelPlikow.setGraphic(new Label(" Panel plików "));
 panelPlikow.getGraphic().setStyle("-fx-background-color: #f4f4f4;");

和另一个按钮类似。结果是:

但是，我不知道它是否与您的 title-styleclass 结合使用，因为您还没有发布它。你必须尝试一下。

我想指出，有概念上更好的方法来实现您想要的!

接近您的解决方案的一种可能性是，不将 GridPane 直接添加到 BorderPane，而是添加一个 Pane，该 Pane 包含 GridPane 和标签。在这里，标签可以在没有填充的情况下自由定位。

另一种可能性是使用 ControlsFX 的 Borders-control (http://fxexperience.com/controlsfx/features/)。它完全符合您的要求，即用边框包围任意控件，您可以选择定义标题。

 GridPane lewyGridPane = new GridPane();                        
 Node leftWithBorder = Borders.wrap(lewyGridPane).lineBorder().title("Panel plików").color(Color.BLACK).buildAll();
 GridPane prawyGridPane = new GridPane();
 Node rightWithBorder = Borders.wrap(prawyGridPane).lineBorder().title("Opcje uruchomienia").color(Color.BLACK).buildAll();

 glownyBorderPane.setLeft(leftWithBorder);
 glownyBorderPane.setRight(rightWithBorder);

当然，您必须删除当前存在的 GridPane 边框和标题标签，并且必须调整边距、填充、首选大小等。此外，您必须下载 controlsfx-jar 并将其添加到构建路径。

使用 ControlsFX-Borders-control，GUI 看起来几乎相同: