如何在javafx中创建这种类型的按钮

Question

在javafx我可以创建这种类型的按钮吗？我尝试了splitmenubutton，但它带有箭头的按钮。在此图片中，按钮包含带有文本和图像的箭头（不仅仅是箭头）。

Answer 1

以下是使用MenuButton的示例。我找到了一个选项图像和一个向下箭头图像。

  

密钥代码

//Use a VBox to stack the different nodes
menuButton.setGraphic(new VBox(new StackPane(imageView), label, new StackPane(imageView2)));

***附加的CSS文件会删除默认的向下箭头。****

  

完整代码

import javafx.application.Application;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
/**
 *
 * @author Sedrick
 */
public class JavaFXApplication9 extends Application {

    @Override
    public void start(Stage primaryStage) {

        MenuItem menuItem1 = new Menu("One");
        MenuItem menuItem2 = new Menu("Two");

        MenuButton menuButton = new MenuButton();
        ImageView imageView = new ImageView(new Image(getClass().getResourceAsStream("options.png")));
        imageView.setFitWidth(25);
        imageView.setFitHeight(25);
        ImageView imageView2 = new ImageView(new Image(getClass().getResourceAsStream("arrow.png")));
        imageView2.setFitWidth(25);
        imageView2.setFitHeight(15);
        Label label = new Label("Options");
        menuButton.setGraphic(new VBox(new StackPane(imageView), label, new StackPane(imageView2)));
        menuButton.getItems().addAll(menuItem1, menuItem2);
        menuButton.setPopupSide(Side.BOTTOM);

        StackPane root = new StackPane();        
        root.getChildren().add(menuButton);

        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(getClass().getResource("myCss.css").toString());

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);

        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}    

CSS文件

来自here的代码。

.menu-button > .arrow-button {
    -fx-padding: 0;
}

.menu-button > .arrow-button > .arrow {
    -fx-padding: 0;
}

  

结果