Question

我正在尝试一切，但这个hbox不想向下移动，这是截图

enter image description here

位于下面代码中定义的gridbox单元格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参考指南。

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

1 个答案: