如何定位我的按钮？

Question

Okay so I have this code in FXML and I want the four bottom buttons to be all directly next to each other and stuff but I can't figure out how to position them at all using CSS.

Can someone tell me how? Here's my code for some reason no matter what I try they don't move at all.

Here's my 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     );

}

Here's my 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

The issue you are facing in GridPane is because of the columnContraints . Remove the columnContraints from your fxml and your buttons are placed next to each other

<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>

Approach 2

If you flexible with using any layout for the , I would recommend replacing the GridPane with a HBox . As GridPanes should have column constraints !

<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>

Answer 2

One thing is that you can download and use JavaFX Scene Builder for ease. You can graphically position everything where ever you want.

To define custom position you can do something like this in your button tag.

    <Button fx:id="button" mnemonicParsing="false" text="Up" layoutX="80.0" layoutY="100.0"
     onAction="#handleButtonAction" />