JavaFX - 为什么每个Control元素下都有一行以及如何删除它？

Question

我注意到从Control类继承的每个元素底部都有一个下划线.你可以在图片中看到它:

当我把焦点放在任何一个项目上时,该线条就消失了.为什么会这样,我怎么能摆脱它？

码:

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


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

sample.fxml

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.ComboBox?>
<?import java.lang.String?>
<?import javafx.collections.FXCollections?>

<GridPane stylesheets="@sample.css"
          xmlns:fx="http://javafx.com/fxml"
          alignment="center">
    <HBox>
        <ProgressBar minWidth="100" progress="0.3"/>
        <Button text="Button"/>
        <Button text="Button"/>
        <Button text="Button"/>
        <ComboBox>
            <items>
                <FXCollections fx:factory="observableArrayList">
                    <String fx:value="String" />
                    <String fx:value="String" />
                    <String fx:value="String" />
                </FXCollections>
            </items>
        </ComboBox>
    </HBox>
</GridPane>

sample.css

.root {
-fx-background-color: gray;
}

Answer 1

这与背景插图有关。我查看了atmodena.css中提供的文件。您的 JavaFX 项目必然包含此 JAR，因此您可以自行查看该文件。jfxrt.jarcom.sun.javafx.scene.control.skin.modena

我查看了样式.button并看到了我怀疑可能导致此问题的一行：

-fx-background-insets: 0 0 -1 0, 0, 1, 2;

参数的顺序为：上、右、下、左。我决定覆盖我的 'bottom' 值sample.css，将 -1 更改为 0：

.button {
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}

这解决了问题，但破坏了焦点突出显示，因此我复制并粘贴了modena.cssfor的背景插图button:focus，以提供以下 CSS 文件：

.root {
    -fx-background-color: grey;
}
.button {
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}
.button:focused {
    -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
}

结果是：

左边是没有焦点的按钮，右边是有焦点的按钮。

您可以对您想要更改的大多数其他控件执行类似的操作，但是进度条有点不同，因为有两件事需要更改：

.progress-bar > .bar
{
    -fx-background-insets: 3 3 3 3;
                            /* ^ was 4 */
}
.progress-bar > .track
{
    -fx-background-insets: 0, 0 0 1 0, 1 1 1 1;
                                        /* ^ was 2 */
}

对于“调试”JavaFX 一些有用的东西是：

• JavaFX CSS 参考指南
• SceneBuilder的检查工具
• modena.css， 正如刚才提到的