Question

如下图所示，红色工具栏不会停留在屏幕顶部。无论窗口缩放如何，如何顶部对齐工具栏？

图片：http://i63.tinypic.com/r7iowg.png

scene.fxml：

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
      prefHeight="650.0" prefWidth="1175.0"
      fx:controller="app.controller.TableViewController" xmlns="http://javafx.com/javafx/8.0.40"
      xmlns:fx="http://javafx.com/fxml/1">
        <ToolBar prefHeight="35.0" prefWidth="1200.0" style="-fx-background-color: #8C0000;">
            <ImageView fitHeight="35.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
                <Image url="@../images/react-toolbar-logo.png"/>
            </ImageView>
        </ToolBar>
        <TabPane layoutY="45.0" prefHeight="605.0" prefWidth="1175.0" tabClosingPolicy="UNAVAILABLE" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity">
            <Tab text="Technician View">
                <Pane prefHeight="485.0" prefWidth="1075.0">
                    <opaqueInsets>
                        <Insets/>
                    </opaqueInsets>
                    <ScrollPane hbarPolicy="NEVER" prefHeight="575.0" prefWidth="1175.0" vbarPolicy="NEVER">
                        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="650.0" prefWidth="1175.0">
                            <TableView fx:id="technicianTable" layoutX="85.0" layoutY="55.0" prefHeight="475.0"
                                       prefWidth="1000.0" />
                            <Label fx:id="viewLabel1" layoutX="85.0" layoutY="26.0" prefHeight="17.0"
                                   prefWidth="351.0"/>
                        </AnchorPane>
                    </ScrollPane>
                </Pane>
            </Tab>
            <Tab text="Group View">
                <Pane prefHeight="485.0" prefWidth="1075.0">
                    <opaqueInsets>
                        <Insets/>
                    </opaqueInsets>
                    <ScrollPane hbarPolicy="NEVER" prefHeight="575.0" prefWidth="1175.0" vbarPolicy="NEVER">
                        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="650.0" prefWidth="1175.0">
                            <TableView fx:id="groupTable" layoutX="85.0" layoutY="55.0" prefHeight="475.0"
                                       prefWidth="1000.0"/>
                            <Label fx:id="viewLabel2" layoutX="85.0" layoutY="26.0" prefHeight="17.0"
                                   prefWidth="351.0"/>
                        </AnchorPane>
                    </ScrollPane>
                </Pane>
            </Tab>
            <Tab text="1-QUEUE">
                <Pane prefHeight="485.0" prefWidth="1075.0">
                    <opaqueInsets>
                        <Insets/>
                    </opaqueInsets>
                    <ScrollPane hbarPolicy="NEVER" prefHeight="575.0" prefWidth="1175.0" vbarPolicy="NEVER">
                        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="650.0" prefWidth="1175.0">
                            <TableView fx:id="queueTable" layoutX="85.0" layoutY="55.0" prefHeight="475.0"
                                       prefWidth="1000.0"/>
                            <Label fx:id="viewLabel3" layoutX="85.0" layoutY="26.0" prefHeight="17.0"
                                   prefWidth="351.0"/>
                        </AnchorPane>
                    </ScrollPane>
                </Pane>
            </Tab>
        </TabPane>
</VBox>

Answer 1

您可以通过将ToolBar放入另一个容器，然后将容器的对齐方式设置为TOP_CENTER来实现此目的。

<强>代码：

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

<?import javafx.scene.control.*?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>

<VBox xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="app.controller.TableViewController">

    <VBox alignment="TOP_CENTER">
        <ToolBar prefHeight="35.0" prefWidth="1200.0" style="-fx-background-color: #8C0000;">
            <ImageView fitHeight="35.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
                <Image url="@../images/react-toolbar-logo.png"/>
            </ImageView>
        </ToolBar>
    </VBox>

    <VBox alignment="CENTER">
        <TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
                 prefWidth="1200.0"
                 tabClosingPolicy="UNAVAILABLE">

            <Tab text="Technician View">
                <ScrollPane hbarPolicy="NEVER" vbarPolicy="NEVER" prefHeight="575.0" prefWidth="1175.0">
                    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="650.0" prefWidth="1175.0">
                        <TableView fx:id="technicianTable" layoutX="85.0" layoutY="55.0" prefHeight="475.0"
                                   prefWidth="1025.0"/>
                        <Label fx:id="viewLabel1" layoutX="85.0" layoutY="26.0" prefHeight="17.0" prefWidth="351.0"/>
                    </AnchorPane>
                </ScrollPane>
            </Tab>

            <Tab text="Group View">
                <ScrollPane hbarPolicy="NEVER" vbarPolicy="NEVER" prefHeight="575.0" prefWidth="1175.0">
                    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="650.0" prefWidth="1175.0">
                        <TableView fx:id="groupTable" layoutX="85.0" layoutY="55.0" prefHeight="475.0"
                                   prefWidth="1025.0"/>
                        <Label fx:id="viewLabel2" layoutX="85.0" layoutY="26.0" prefHeight="17.0" prefWidth="351.0"/>
                    </AnchorPane>
                </ScrollPane>
            </Tab>

            <Tab text="1-QUEUE">
                <ScrollPane hbarPolicy="NEVER" vbarPolicy="NEVER" prefHeight="575.0" prefWidth="1175.0">
                    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="650.0" prefWidth="1175.0">
                        <TableView fx:id="queueTable" layoutX="85.0" layoutY="55.0" prefHeight="475.0"
                                   prefWidth="1025.0"/>
                        <Label fx:id="viewLabel3" layoutX="85.0" layoutY="26.0" prefHeight="17.0" prefWidth="351.0"/>
                    </AnchorPane>
                </ScrollPane>
            </Tab>

        </TabPane>
    </VBox>

</VBox>

如何在窗口重新缩放期间保持JavaFx工具栏的顶部对齐？

1 个答案: