如何在JavaFX中复制这个2-1的布局?

huangapple 未分类评论63阅读模式
标题翻译

How to replicate this 2-1 layout in JavaFX?

问题

我已经查阅了文档中的所有布局选项,但我不被允许使用 FXML。我不明白如何开始配置场景中的这三个容器。如何在JavaFX中复制这个2-1的布局?

英文翻译

I've looked into all of the layout options in the docs, and I am not allowed to use FXML. I don't understand where to start with configuring the 3 containers in the scene. 如何在JavaFX中复制这个2-1的布局?

答案1

得分: 4

有许多方法可以实现这个;可能最直接的方法是将左侧的两个窗格放在一个 VBox 中,然后使用一个 BorderPane,将 VBox 放在左侧,将 "CCTV" 窗格放在中间。代码如下:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class LayoutExample extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane lighting = new Pane();
        lighting.getChildren().add(new Label("Lighting"));
        Pane heating = new Pane();
        heating.getChildren().add(new Label("Heating"));
        Pane cctv = new Pane();
        cctv.getChildren().add(new Label("CCTV"));

        lighting.getStyleClass().add("control-pane");
        heating.getStyleClass().add("control-pane");
        cctv.getStyleClass().add("control-pane");

        BorderPane root = new BorderPane();
        VBox left = new VBox();
        left.getChildren().add(lighting);
        left.getChildren().add(heating);

        left.setFillWidth(true);
        left.setSpacing(5);
        VBox.setVgrow(lighting, Priority.ALWAYS);
        VBox.setVgrow(heating, Priority.ALWAYS);

        root.setLeft(left);
        root.setCenter(cctv);

        BorderPane.setMargin(cctv, new Insets(0, 0, 0, 10));

        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("layout-style.css").toExternalForm());

        primaryStage.setScene(scene);

        primaryStage.setWidth(800);
        primaryStage.setHeight(640);
        primaryStage.show();
    }

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

这个CSS还不太对,但可以给你添加边框的想法:

.control-pane {
  -fx-background-color: -fx-body-color, -fx-outer-border, -fx-body-color ;
  -fx-background-insets: 0, 1, 2 ;
  -fx-background-radius: 0, 1, 0 ;
  -fx-padding: 3 ;
  
  -fx-min-width: 300px ;
  -fx-min-height: 300px ;
 }

你还可以将根节点设置为 HBox,并在每个窗格上设置 hgrow,以优先分配额外的水平空间给 CCTV 窗格。或者使用 GridPane,将 CCTV 窗格的行跨度设置为 2。可能还有很多其他方法可以实现这个。

英文翻译

There are many ways you can do this; probably the most immediate is to put the two panes on the left in a VBox, and then use a BorderPane, with the VBox on the left and the "CCTV" pane in the center. This looks like:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class LayoutExample extends Application {

	@Override
	public void start(Stage primaryStage) throws Exception {
		Pane lighting = new Pane(); 
		lighting.getChildren().add(new Label("Lighting"));
		Pane heating = new Pane();
		heating.getChildren().add(new Label("Heating"));
		Pane cctv = new Pane();
		cctv.getChildren().add(new Label("CCTV"));
		
		lighting.getStyleClass().add("control-pane");
		heating.getStyleClass().add("control-pane");
		cctv.getStyleClass().add("control-pane");
		
		BorderPane root = new BorderPane() ;
		VBox left = new VBox();
		left.getChildren().add(lighting);
		left.getChildren().add(heating);
		
		// expand both panes in left to full width of vbox:
		left.setFillWidth(true);
		// add vertical space between panes:
		left.setSpacing(5);
		// allocate extra vertical space equally to both panes in left:
		VBox.setVgrow(lighting, Priority.ALWAYS);
		VBox.setVgrow(heating, Priority.ALWAYS);
		
		root.setLeft(left);
		root.setCenter(cctv);
		
		// Add a left margin to the center pane to give it some space:
		BorderPane.setMargin(cctv, new Insets(0, 0, 0, 10));
		
		Scene scene = new Scene(root);
		scene.getStylesheets().add(getClass().getResource("layout-style.css").toExternalForm());
		
		primaryStage.setScene(scene);
		
		primaryStage.setWidth(800);
		primaryStage.setHeight(640);
		primaryStage.show();
				
	}
	
	public static void main(String[] args) {
		Application.launch(args);
	}

}

This CSS isn't quite right, but gives you an idea how to add the borders:

<!-- language: css -->

.control-pane {
  -fx-background-color: -fx-body-color, -fx-outer-border, -fx-body-color ;
  -fx-background-insets: 0, 1, 2 ;
  -fx-background-radius: 0, 1, 0 ;
  -fx-padding: 3 ;
  
  /** Just to demo empty boxes: **/
  -fx-min-width: 300px ;
  -fx-min-height: 300px ;
 }

This looks like:

如何在JavaFX中复制这个2-1的布局?

You could also use a HBox as the root, and set the hgrow on each to prioritize extra horizontal space on the CCTV pane. Or use a GridPane, and set the row span of the CCTV pane to 2. There are probably many other ways to do this.

huangapple
  • 本文由 发表于 2020年3月4日 07:08:32
  • 转载请务必保留本文链接:https://java.coder-hub.com/60516842.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定