JavaFX

Question

我注意到从控件 class 继承的每个元素底部都有一个下划线。你可以在图片中看到它：

当我将焦点放在任何项目上时，线条消失了。为什么会发生这种情况，我该如何摆脱它？

代码：

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

这是全局 Modena.css 样式表（或 Caspian.css，如果您仍在使用 JavaFX 7）提供的默认样式。

来自Modena.css：

.button,
.toggle-button,
.radio-button > .radio,
.check-box > .box,
.menu-button,
.choice-box,
.color-picker.split-button > .color-picker-label,
.combo-box-base,
.combo-box-base:editable > .arrow-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

如果不喜欢默认的效果，可以：

应用您自己的主题（即创建您自己的整个摩德纳版本。css/Caspian。css）。你需要写很多东西，但你有完全的控制权。
应用原始主题，但您使用自己的样式表覆盖了其中的一部分。这可能是您需要的。

示例 1：

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

示例 2：

.root{
    -fx-inner-border: transparent;
}

Answer 2

这与背景插图有关。我查看了文件 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 */
}

对 "debugging" JavaFX 有帮助的一些东西是：

JavaFX CSS 参考指南
SceneBuilder的检查工具
modena.css，如上所述

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

JavaFX - Why there is a line under every Control element and how to remove it?

java

fxml