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>

方法2

如果您灵活使用任何布局，我建议您使用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>

Answer 2

有一点是您可以轻松下载和使用JavaFX Scene Builder。您可以用图形方式将所有内容放在任何您想要的位置。

要定义自定义位置，您可以在按钮标记中执行此类操作。

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

如何定位我的按钮？

2 个答案: