英文:
How to replicate this 2-1 layout in JavaFX?
问题
我已经查阅了文档中的所有布局选项,但我不被允许使用 FXML。我不明白如何开始配置场景中的这三个容器。
英文:
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.
答案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:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论