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>

示例.css

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

Answer 1

这与背景插图有关。我查看了 modena.css 文件，它位于 com.sun.javafx.scene.control.skin.modena< 的 jfxrt.jar 中。/。您的 JavaFX 项目必然包含此 JAR，因此您可以随意查看该文件。

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

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

参数顺序为:顶部、右侧、底部、左侧。我决定覆盖 sample.css 中的“bottom”值，将 -1 更改为 0:

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

这解决了问题，但打破了焦点突出显示，所以我从 modena.css 复制并粘贴了 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 ReferenceGuide
• SceneBuilder的检查工具
• modena.css，如上所述