JavaFX 重点按钮下划线答案

【问题标题】：JavaFX Focused Button UnderLineJavaFX 重点按钮下划线
【发布时间】：2016-11-12 09:07:01
【问题描述】：

我制作了Button，并用Rectangle 对其进行了整形并更改了背景颜色。

源代码：
MainApplication.java：

AnchorPane anchor  = new AnchorPane();
    anchor.maxWidth(325);
    Button[] buttons = new Button[3];
    String[] buttonName = new String[]{"Player","World","Log"};
    for (int i = 0 ; i < 3 ; i ++){
        Button button = new Button();
        button.setText(buttonName[i]);
        button.setShape(new Rectangle(100, 25));
        button.setMaxWidth(100);
        button.setMinWidth(100);
        button.setMaxHeight(25);
        button.setMinHeight(25);
        button.setId("tabButton");
        StackPane stack = new StackPane();
        stack.setMaxWidth(100);
        stack.setMaxHeight(25);
        stack.setMinWidth(100);
        stack.setMinHeight(25);
        RippingCircle circle = new RippingCircle();//just a rippleAnimation
        circle.setToSize(Math.sqrt(100 * 100 + 25 * 25));
        circle.setFromSize(0.0);
        circle.setFill(Color.rgb(0, 0, 0, 0.2));
        Rectangle clip = new Rectangle(-50, -12.5, 100, 25);
        circle.setClip(clip);
        stack.getChildren().addAll(button, circle);
        stack.setLayoutX(100 * i);
        stack.setLayoutY(0);
        button.setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent){
                StackPane.setMargin(circle, new Insets((mouseEvent.getY() - 12.5) * 2, 0, 0, (mouseEvent.getX() - 50) * 2));
                clip.setX(-mouseEvent.getX());
                clip.setY(-mouseEvent.getY());
                circle.play();
            }
        });
        button.setOnMouseReleased(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent){
                circle.stop();
            }
        });
        anchor.getChildren().add(stack);
        buttons[i] = button;
    }

MainApplication.css：

#tabButton {
-fx-background-color: #03A9F4;
-fx-text-fill: rgba(150,255,255,255);
-fx-font: 12 Arial;
-fx-focus-color: #FFEB3B;
-fx-faint-focus-color: #FFEB3B;
-fx-accent: #FFEB3B;
}
#tabButton:hover {
    -fx-background-color: #039BE5;
    -fx-text-fill: rgba(150,255,255,255);
    -fx-font: 12 Arial;
    -fx-focus-color: #FFEB3B;
    -fx-faint-focus-color: #FFEB3B;
    -fx-accent: #FFEB3B;
}
#tabButton:focused {
    -fx-background-color: #03A9F4;
    -fx-text-fill: rgba(255,255,255,255);
    -fx-font: 12 Arial;
    -fx-focus-color: black;
    -fx-faint-focus-color: black;
}

当它聚焦时，Player 按钮下方会出现一条下划线：

像这样。
这个下划线是什么，如何更改它的颜色？

【问题讨论】：

BTW：您不必重复在#tabButton 规则中设置的属性，除非您想覆盖该值。例如。在您的第二条规则中，除了 -fx-background-color: #039BE5; 之外的所有内容都是不必要的。此外，您的 GUI 可能会受益于修改悬停和聚焦按钮的外观，即为 #tabButton:hover:focused 指定规则。此外，如果多个节点的样式应该相同，您通常会为每个节点使用不同 id 的样式类。

标签： java javafx

【解决方案1】：

我认为它属于焦点，如果你想隐藏它：

-fx-background-insets:0;

或改变颜色：

-fx-focus-color: red;
-fx-faint-focus-color: red;

祝你好运！

【讨论】：

在MainApplication.css中，我已经改了颜色但是下划线还是白色的。