如何在fxml中完成3个水平线菜单

Question

我想创建类似 "Firefox (Three horizontal line - top right side) Menu" 的菜单。我不知道如何在 FXML 中创建这一行叠加菜单。有人对此有任何想法吗？

非常感谢。

Answer 1

这里举个例子给大家一个提示，进一步的改进和修改由您决定：

@Override
public void start( final Stage primaryStage )
{
    Line l1 = new Line( 0.5, 0, 15.5, 0 );
    l1.setStrokeWidth( 2 );
    Line l2 = new Line( 0.5, 5, 15.5, 5 );
    l2.setStrokeWidth( 2 );
    Line l3 = new Line( 0.5, 10, 15.5, 10 );
    l3.setStrokeWidth( 2 );

    MenuButton m = new MenuButton();
    m.setGraphic( new Group( l1, l2, l3 ) );
    m.getItems().addAll( new MenuItem( "Settings" ), new MenuItem( "About" ) );

    Platform.runLater(() ->
    {
        // hide the arrow of menuButton
        m.lookup( ".arrow" ).setStyle( "-fx-background-insets: 0; -fx-padding: 0; -fx-shape: null;" );
        // hide the arraw-button pane, to remove unnecessary padding
        m.lookup( ".arrow-button" ).setStyle( "-fx-padding: 0" );
    });

    final Scene scene = new Scene( new Group( m ), 400, 300 );
    primaryStage.setScene( scene );
    primaryStage.show();
}

线条被放入 MenuButton 的图形中属性。由于menubutton有一个三角箭头，我们需要通过查找来隐藏它。

或者，除了使用 Line，您还可以将 SVG 图像（字符串）放入按钮的形状属性。

如何在fxml中完成3个水平线菜单

How to accomplish 3 horizontal line menu in fxml

overlay

javafx

menu

fxml