Text on java fx menu bar

问题

I'm writing app using JavaFx with fxml file for view. How can I add text on right side of menu (like on attached picture). Scene Builder allows me to add only Menu, but then the text is on the left (where the white box is) and I must disable this menu (because it is not menu). I also wanted to change the style of this menu, but it is not working. It is possible for only one menu?.

My fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>

<MenuBar xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="pl.controler.MainMenuController">
    <menus>
        <Menu fx:id="fileMenu" mnemonicParsing="false" text="%file">
            <items>
                <MenuItem fx:id="closeMenuItem" mnemonicParsing="false" text="%close" />
            </items>
        </Menu>
        <Menu fx:id="menuHelp" mnemonicParsing="false" text="%help">
            <items>
                <MenuItem fx:id="aboutMenuItem" mnemonicParsing="false" text="%about.title" />
            </items>
        </Menu>
      <Menu fx:id="loginName" mnemonicParsing="false" style="font-weight: bold; color: black;">
        <items>
          <MenuItem mnemonicParsing="false" text="Action 1" />
        </items>
      </Menu>
    </menus>
</MenuBar>

Attachment:

回答1:

If you want just text at the right end, you can use a Label. Wrap the MenuBar and the Label in, for example, an AnchorPane to get the desired layout:

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

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Label?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
    <MenuBar AnchorPane.leftAnchor="0" AnchorPane.topAnchor="0">
        <Menu text="File">
            <items>
                <MenuItem text="Close"/>
            </items>
        </Menu>
        <Menu text="Help">
            <items>
                <MenuItem text="About"/>
            </items>
        </Menu>
    </MenuBar>
    <Label text="Some text" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0" AnchorPane.bottomAnchor="0" 
        style="-fx-font-weight: bold; -fx-text-fill: black; " />
</AnchorPane>

This gives the following:

You may want to experiment with some CSS to get the style the way you want, but this will position everything the way you need it. A very quick way to style it so that the AnchorPane is styled like the menu bar is just to add styleClass="menu-bar" to the AnchorPane element:

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" styleClass="menu-bar">

Which now gives

For (maybe) a more robust approach, add id="menu-bar-container" to the AnchorPane and id="menu-bar" to the menu bar. Then the following external CSS will move the default menu bar styles to the anchor pane:

#menu-bar {
    -fx-padding: 0 ;
    -fx-background-color: transparent ;
    -fx-background-insets: 0 ;
    -fx-background-radius: 0 ;
}

#menu-bar-container {
    -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
    -fx-background-color:
        linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
        linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
    -fx-background-insets: 0 0 0 0, 1 0 1 0;
    -fx-background-radius: 0, 0 ;
}

来源：https://stackoverflow.com/questions/35576445/text-on-java-fx-menu-bar

标签

css

javafx

fxml