java - 如何定位我的按钮？

Question

好吧，我在 FXML 中有这段代码，我希望底部的四个按钮彼此直接相邻等等，但我根本不知道如何使用 CSS 定位它们。

有人能告诉我怎么做吗？出于某种原因，这是我的代码，无论我尝试什么，它们都不会移动。

这是我的 CSS:

.root {
}

.button {
    -fx-background-color:rgb(255.0,255.0,255.0);
    -fx-effect: dropshadow( three-pass-box , rgba(0.0,0.0,0.0,0.6) , 5.0, 0.0 ,0.0 , 1.0 );

}

.button:hover{
    -fx-background-color:rgb(127.0,127.0,127.0);
    -fx-effect: dropshadow( three-pass-box , rgba(0.0,0.0,0.0,0.6) , 5.0, 0.0 ,0.0 , 1.0     );

}

这是我的 FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.BorderPane?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.Label?>

<BorderPane prefHeight="270.0" prefWidth="368.0"
    xmlns:fx="http://javafx.com/fxml" fx:controller="application.FX_TimerController">
    <!-- TODO Add Nodes -->

    <!-- Top Starts Here -->
    <top>
        <SplitPane dividerPositions="0.50">
            <items>
                <AnchorPane>
                    <children>
                        <Button mnemonicParsing="false" id="fx_btnStart" text="Start" />
                    </children>
                </AnchorPane>

                <AnchorPane>
                    <children>
                        <Button mnemonicParsing="false" id="fx_btnStop" text="Stop" />
                    </children>
                </AnchorPane>
            </items>
        </SplitPane>
    </top>
        <!-- Top Ends Here -->

    <center>
        <Label id="fx_timer_Label" />
    </center>


    <bottom>
        <GridPane id="Bob">
            <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
                    prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
                    prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
                    prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
                    prefWidth="100.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints minHeight="10.0" prefHeight="30.0"
                    vgrow="SOMETIMES" />
            </rowConstraints>
            <children>
                <Button mnemonicParsing="false" text="Up" />
                <Button mnemonicParsing="false" text="Down"
                    GridPane.columnIndex="1" />
                <Button mnemonicParsing="false" text="Up"
                    GridPane.columnIndex="2" />
                <Button mnemonicParsing="false" text="Down"
                    GridPane.columnIndex="3" />
            </children>
        </GridPane>
    </bottom>

Answer 1

您在 GridPane 中遇到的问题是因为 columnContraints。从您的 fxml 中删除 columnContraints 并且您的按钮彼此相邻放置

<bottom>
    <GridPane id="Bob">
        <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0"
                vgrow="SOMETIMES" />
        </rowConstraints>
        <children>
            <Button mnemonicParsing="false" text="Up" />
            <Button mnemonicParsing="false" text="Down"
                GridPane.columnIndex="1" />
            <Button mnemonicParsing="false" text="Up"
                GridPane.columnIndex="2" />
            <Button mnemonicParsing="false" text="Down"
                GridPane.columnIndex="3" />
        </children>
    </GridPane>
</bottom>

方法二

如果您可以灵活地使用 的任何布局，我建议将 GridPane 替换为 HBox。因为 GridPanes 应该有列约束!

<bottom>
    <HBox id="Bob">
        <children>
            <Button mnemonicParsing="false" text="Up" />
            <Button mnemonicParsing="false" text="Down"/>
            <Button mnemonicParsing="false" text="Up"/>
            <Button mnemonicParsing="false" text="Down"/>
        </children>
    </HBox>
</bottom>