css - 将 hbox 定位到 javafx gridpane 中单元格的中心

Question

我正在尝试所有方法，但是这个 hbox 不想向下移动单元格，这是截图

位于下面代码中定义的网格框单元格 0 列 0 内的左上角 hbox 拒绝移动到单元格的中心!我试过代码。请帮忙

这是代码

    GridPane prayertime_pane = new GridPane();

    prayertime_pane.setGridLinesVisible(true);

    HBox fajrBox = new HBox();
    fajrBox.setSpacing(0);
    fajrBox.setAlignment(Pos.BOTTOM_CENTER);
    fajrBox.getChildren().addAll(fajr_hourLeft, fajr_hourRight, time_Separator1, fajr_minLeft, fajr_minRight);


    HBox zuhrBox = new HBox();
    zuhrBox.setSpacing(0);
    zuhrBox.getChildren().addAll(zuhr_hourLeft, zuhr_hourRight, time_Separator2, zuhr_minLeft, zuhr_minRight);


    HBox asrBox = new HBox();
    asrBox.setSpacing(0);
    asrBox.getChildren().addAll(asr_hourLeft, asr_hourRight, time_Separator3, asr_minLeft, asr_minRight);


    HBox maghribBox = new HBox();
    maghribBox.setSpacing(0);
    maghribBox.getChildren().addAll(maghrib_hourLeft, maghrib_hourRight, time_Separator4, maghrib_minLeft, maghrib_minRight);


    HBox ishaBox = new HBox();
    ishaBox.setSpacing(0);
    ishaBox.getChildren().addAll(isha_hourLeft, isha_hourRight, time_Separator5, isha_minLeft, isha_minRight);


    TextFlow fajrtextFlow = new TextFlow();
    Text text1 = new Text("الفجر\nFajr");
    text1.setId("prayer-text");
    fajrtextFlow.getChildren().addAll(text1);

    TextFlow duhrtextFlow = new TextFlow();
    Text text2 = new Text("الظهر");
    text2.setId("prayer-text");
    duhrtextFlow.getChildren().addAll(text2);

    TextFlow asrFlow = new TextFlow();
    Text text3 = new Text("العصر");
    text3.setId("prayer-text");
    asrFlow.getChildren().addAll(text3);

    TextFlow maghribFlow = new TextFlow();
    Text text4 = new Text("المغرب");
    text4.setId("prayer-text");
    maghribFlow.getChildren().addAll(text4);

    TextFlow ishaFlow = new TextFlow();
    Text text5 = new Text("العشاء");
    text5.setId("prayer-text");
    ishaFlow.getChildren().addAll(text5);


    prayertime_pane.setAlignment(Pos.BOTTOM_CENTER);
    prayertime_pane.add(fajrBox, 0, 0);
    prayertime_pane.add(zuhrBox, 0, 1);
    prayertime_pane.add(asrBox, 0, 2);
    prayertime_pane.add(maghribBox, 0, 3);
    prayertime_pane.add(ishaBox, 0, 4);

    prayertime_pane.add(fajrtextFlow, 2, 0);
    prayertime_pane.add(duhrtextFlow, 2, 1);
    prayertime_pane.add(asrFlow, 2, 2);
    prayertime_pane.add(maghribFlow, 2, 3);
    prayertime_pane.add(ishaFlow, 2, 4);


    prayertime_pane.setPadding(new Insets(40, 40, 40, 40));
    prayertime_pane.setVgap(20);
    prayertime_pane.setHgap(20);

还包括我的代码的 css

     #prayertime_pane{

        -fx-background-color: rgba(0, 0, 0, 0.25); 
        -fx-background-radius: 10;
        -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );       
        -fx-border-color: blue;
        -fx-border-insets: 5;
        -fx-border-width: 3;
        -fx-border-style: dashed;
        -fx-text-alignment: right;
        -fx-graphic-vpos: center;
        -fx-node-vpos: center;

    }

    #prayer-text {
   -fx-font-size: 28px;
   -fx-font-family: "Arial Black";
   -fx-fill: white;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
   /*-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );*/ 
   -fx-text-alignment: right;

Answer 1

您可以使用 GridPane 的静态方法为单个单元格/节点设置对齐方式:

GridPane.setValignment(fajrBox, VPos.CENTER);

但是很明显，您实际上希望第一列中的单元格垂直居中对齐，在这种情况下使用 RowConstraints:

int numberOfSalatsPerDay = 5;
for (int i = 0; i < numberOfSalatsPerDay; i++) {
    RowConstraints row = new RowConstraints();
    row.setValignment(VPos.CENTER);
    prayertime_pane.getRowConstraints().add(row);
}

在您的用例中最好同时管理行或列单元格。有关更多行/列/单元格设置(minWidth、prefWidth、maxWidth、percentHeight、h 和 v 增长、h 和 v 对齐、fillWidth 等)调查 GridPane , RowConstraints和 ColumnConstraints .

此外，没有像“-fx-graphic-vpos: center; -fx-node-vpos: center;”这样的 css 属性在 JavaFX 中。在自己猜测之前，请参阅 JavaFX CSS 引用指南。