JavaFX：如何制作带有两 (2) 个或更多图标的按钮？

Question

关于如何向 JavaFX 按钮添加图形的在线资源很多。

但是我想知道是否有办法添加第二张（或任何数字，但在大多数情况下超过 2 张图像可能没有多大意义）图像。

我的用例：我有一个按钮，左侧有一个方形图标，后跟一个文本标签。该图像是按钮所链接的某些 real-life 概念的表示（例如可以是汽车或人）。我想在一些按钮的右侧添加一个小图标，一个 "right chevron" 来指示交互的性质。

我想也许可以使用全宽的 HBox 作为按钮的图形节点，并向其中添加 2 个图像，但我认为将文本放在顶部是不可能的图形节点。

有什么想法吗？

Answer 1

您可以尝试在按钮中使用 html 格式，并在文本前后添加带有标签的图像。

您可以在此处找到更多相关信息：http://docs.oracle.com/javase/tutorial/uiswing/components/html.html

Answer 2

我有同样的事情要相处。您使用 HBox 描述了解决方案。我认为这也是最好的方法。

执行以下操作：使用您自己的特定布局创建一个新的 CustomButton，可能使用 HBox 并从 JavaFX 扩展 Button class。按照您需要的方式设置样式，您可以在自定义按钮中添加任意数量的图像。也许它看起来像这样：

public class CustomButton extends Button
{
   private HBox hbox;
   private ImageView image1;
   private ImageView image2;

   public CustomButton()
   {
      super();
      // Here add your specific images to global or local variables and then add all the children    (images) to your HBox layout and this one to the button.
   }
}

问题在于，JavaFX 提供的是普通按钮，而不是深度自定义的组件。如果你想设置样式，你可以使用 CSS 无论如何。

Answer 3

使用图标和文本创建您自己的自定义节点并将其设置为图形。当然，您不会显示按钮文本，因为它已经在您的自定义图形节点中。

这是一个简单的例子。您需要提供文件 icon1.png 和 icon2.png.

public class ButtonWithMultipleIcons extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {

            Group group = new Group();

            Button button = new Button();
            button.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

            HBox hBox = new HBox();

            ImageView icon1 = new ImageView( getClass().getResource( "icon1.png").toExternalForm());
            ImageView icon2 = new ImageView( getClass().getResource( "icon2.png").toExternalForm());

            Label label = new Label("Text");

            //make the button grow if you want the right icon to always be on the right of the button :
            label.setMaxWidth(Long.MAX_VALUE);

            HBox.setHgrow(label, Priority.ALWAYS);


            hBox.getChildren().addAll( icon1, label, icon2);

            button.setGraphic(hBox);

            group.getChildren().add( button);

            Scene scene = new Scene(group,400,400);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

JavaFX：如何制作带有两 (2) 个或更多图标的按钮？

JavaFX : how to make a button with two (2) or more icons?

java

user-interface

javafx