我有一个StackPane
,需要在其中添加四个文本字段和一个图表。这些文本字段将用于设置图表轴的范围。我之所以选择StackPane
是因为它在以后包含的停靠窗格中很好地缩放了(与图表一起)。我没有将文本字段嵌入到VBox
或HBox
中,因为它们给以后添加到窗格中的缩放矩形(可缩放)带来了麻烦。
除了我无法设置TextField
和StackPane
之间靠近边界的距离这一事实之外,其他所有方法都起作用。我所能控制的只是pane.setAlignment(upperY, Pos.TOP_LEFT)
之类的一般定位。但这意味着我的TextField
中有两个在左下角重叠。有谁知道如何通过CSS或直接在Java代码中解决此问题?
我尝试在CSS中设置-fx-alignment
。我尝试更改窗格的类型。我尝试在CSS等中设置边框插图。
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application
{
static LineChart<Number, Number> chart;
@Override
public void start(Stage stage) throws Exception
{
TextField upperY = new TextField("upperY"); upperY.getStylesheets().add("css/chart.css");
TextField lowerY = new TextField("lowerY"); lowerY.getStylesheets().add("css/chart.css");
TextField rightX = new TextField("rightX"); rightX.getStylesheets().add("css/chart.css");
TextField leftX = new TextField("leftX"); leftX.getStylesheets().add("css/chart.css");
StackPane pane = new StackPane();
HBox.setHgrow(pane, Priority.ALWAYS);
VBox.setVgrow(pane, Priority.ALWAYS);
pane.setAlignment(upperY, Pos.TOP_LEFT);
pane.setAlignment(lowerY, Pos.BOTTOM_LEFT);
pane.setAlignment(rightX, Pos.BOTTOM_RIGHT);
pane.setAlignment(leftX, Pos.BOTTOM_LEFT);
chart = new LineChart<>(new NumberAxis(), new NumberAxis());
pane.getChildren().addAll(chart, upperY, lowerY, leftX, rightX);
Pane root = new Pane();
root.getChildren().add(pane);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
} // end start
public static void main(String[] args)
{
launch(args);
}
}
.text-field{
-fx-font-size: 10pt;
-fx-min-width: 35;
-fx-pref-width: 35;
-fx-max-width: 35;
-fx-min-height: 18;
-fx-pref-height: 18;
-fx-max-height: 18;
-fx-font-family: "Arial Narrow";
-fx-text-fill: black;
-fx-alignment: BASELINE_CENTER;
-fx-padding: -2 2 0 2; /* // T R B L*/
-fx-background-color: white;
-fx-control-inner-background: white;
-fx-border-color: lightgray;
-fx-border-insets: 0 0 0 0;
-fx-background-insets: 0 0 0 0;
}
我需要将leftX
文本字段向右推,并将lowerY
文本字段向上推一点。
答案 0 :(得分:0)
布局的工作方式类似于GridPane
。唯一的问题是,对图表使用列/行跨度会导致图表未用于计算GridPane
的首选大小。
但是,您可以使用HBox
和VBox
分别保留底部和左侧的文本字段,并将VBox
和图表放在第一行和HBox
中在图表下方的单元格中。
为简单起见,以下示例使用Region
代替图表,但是调整代码以使用其他节点类型很简单:
private static TextField createTextField(String prompt) {
TextField tf = new TextField(prompt);
return tf;
}
@Override
public void start(Stage primaryStage) throws Exception {
// Using simple region instead of a chart for simplicity here
Region chart = new Region();
chart.setStyle("-fx-background-color: red;");
chart.setPrefSize(300, 300);
// create textfield container to the left
Region placeholder = new Region();
VBox.setVgrow(placeholder, Priority.ALWAYS);
VBox left = new VBox(
createTextField("upperY"),
placeholder,
createTextField("lowerY"));
// create textfield container to the bottom
placeholder = new Region();
HBox.setHgrow(placeholder, Priority.ALWAYS);
HBox bottom = new HBox(
createTextField("leftX"),
placeholder,
createTextField("rightX"));
GridPane container = new GridPane();
container.add(left, 0, 0);
container.add(bottom, 1, 1);
container.add(chart, 1, 0);
// make sure the row/column containing the chart is the one that grows
ColumnConstraints cConstraints = new ColumnConstraints();
cConstraints.setHgrow(Priority.ALWAYS);
container.getColumnConstraints().addAll(new ColumnConstraints(), cConstraints);
RowConstraints rConstraints = new RowConstraints();
rConstraints.setVgrow(Priority.ALWAYS);
container.getRowConstraints().addAll(rConstraints, new RowConstraints());
Scene scene = new Scene(container);
primaryStage.setScene(scene);
primaryStage.show();
}