JavaFX在Scene Builder中边界正确,但在正在运行的程序中没有

时间:2017-11-05 21:24:50

标签: java css border fxml styling

问题: 我有一个名为MenuContainer的HBox,其中我有一个MenuBar,我使用FXML来解决问题,将CSS用于样式。我想在MenuContainer下面有1px边框,所以我给它了样式:" -fx-border-width:0px 0px 1px 0px; -fx-border-color:black;"我知道样式表已正确设置,因为我在项目中设置了其他元素。 我的问题是边框没有出现,经过进一步的实验,我发现边框开始显示当我将边框宽度增加到5px时,边框显示为应该是(1px)。我花了好几个小时试图找到一个不仅仅是将宽度设置为5px的修复,因为我不知道这是否适用于不同的屏幕尺寸,我对这种懒惰的修复感到不满意。 有趣的是,当我在FXML的场景构建器中查看布局时,边框会正确显示,但是当我运行程序时,它不存在,附着的是此截图。Executed ProgramIn Scene Builder

相关代码: FXML

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

<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.control.Accordion?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>

<GridPane fx:id="mainGridPane" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="code.controllers.MainScreenController">


    <children>

        <!-- menu at the top of screen -->
        <HBox fx:id="menuContainer" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="0" GridPane.hgrow="ALWAYS">
            <MenuBar fx:id="menuBar" HBox.hgrow="ALWAYS">
                <menus>
                    <Menu text="File">
                        <MenuItem text="New" />
                        <MenuItem text="Open" />
                        <MenuItem text="Save" />
                    </Menu>
                    <Menu text="Edit">

                    </Menu>
                </menus>
            </MenuBar>
        </HBox>

        <!--the toolbar-->
        <HBox fx:id="toolBar" alignment="CENTER_LEFT" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="1">
            <Button fx:id="undoButton" styleClass="toolButton">
                <tooltip>
                    <Tooltip text="Undo" />
                </tooltip>
                <HBox.margin>
                    <Insets left="15.0" />
                </HBox.margin>
            </Button>
            <Button fx:id="redoButton" styleClass="toolButton">
                <tooltip>
                    <Tooltip text="Redo" />
                </tooltip>
                <HBox.margin>
                    <Insets right="15.0" />
                </HBox.margin>
            </Button>
            <Separator orientation="VERTICAL" />
            <Button fx:id="drawButton" styleClass="toolButton">
                <tooltip>
                    <Tooltip text="Draw" />
                </tooltip>
                <HBox.margin>
                    <Insets left="15.0" />
                </HBox.margin>
            </Button>
            <Button fx:id="cursorButton" styleClass="toolButton">
                <tooltip>
                    <Tooltip text="Move" />
                </tooltip>
            </Button>
        </HBox>


        <Canvas fx:id="mainCanvas" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="2" GridPane.valignment="TOP" />

        <!-- pane at left hand side of screen -->
        <VBox fx:id="sidePane" GridPane.columnIndex="0" GridPane.rowIndex="2">

            <ScrollPane hbarPolicy="NEVER" styleClass="secondaryContainer">
                <Accordion fx:id="componentAccordion" style="-fx-background-color: #3c3f41">
                    <panes>
                        <TitledPane text="Inputs">
                            <Button styleClass="componentButton" />
                        </TitledPane>

                        <TitledPane text="Outputs">

                        </TitledPane>

                        <TitledPane text="Logic Gates">

                        </TitledPane>
                    </panes>
                </Accordion>
            </ScrollPane>

        </VBox>

    </children>

    <!--These properties dynamically size the components to the screen size-->
    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" />
      <ColumnConstraints />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints percentHeight="3.0" vgrow="NEVER" />
        <RowConstraints percentHeight="5.0" vgrow="NEVER" />
        <RowConstraints percentHeight="92.0" vgrow="NEVER" />
      <RowConstraints />
    </rowConstraints>

    <!-- points to the stylesheet that this markup file is using-->
    <stylesheets>
        <URL value="@../css/mainStyle.css" />
    </stylesheets>
</GridPane>

CSS

#menuContainer {
    -fx-background-color: #3c3f41;
    -fx-border-width: 0px 0px 1px 0px;
    -fx-border-color: black;
}
#menuBar {
    -fx-background-color: #3c3f41;
}

#toolBar {
    -fx-background-color: #3c3f41;
    -fx-border-width: 1px 0px 0px 0px;
    -fx-border-color: #585d5f;
}

0 个答案:

没有答案