首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JavaFX TitledPane更改的标题背景在鼠标输入时重置

JavaFX TitledPane更改的标题背景在鼠标输入时重置
EN

Stack Overflow用户
提问于 2018-10-31 12:08:56
回答 1查看 1.5K关注 0票数 3

我需要在运行时根据一些传入值更改TitledPane标题背景,否则就重新设置它。

我所有的TitledPane是样式上的CSS附加到现场。

改变背景并不是问题。问题是,当鼠标在背景更改后进入标题时,背景就会从CSS中重置为背景。

更改TitledPane标题背景的测试应用程序:

代码语言:javascript
运行
复制
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TitledPane;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class TitledPaneApplication extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        final StackPane root = new StackPane();

        final TitledPane titledPane = new TitledPane();
        titledPane.setText("Title");
        root.getChildren().add(titledPane);

        final String titleBackgroundValue = "#00ff11";
        final ToggleButton button = new ToggleButton("Change");
        button.setOnAction(event -> {
            boolean selected = button.isSelected();

            final Node node = titledPane.lookup(".title");
            if (selected) {
                final Color color = Color.valueOf(titleBackgroundValue);
                ((Region) node).setBackground(new Background(new BackgroundFill(color, null, null)));
            } else {
                ((Region) node).setBackground(null);
                titledPane.applyCss();
            }
        });

        button.setSelected(false);
        titledPane.setContent(button);

        final Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add(getClass().getResource("light.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.setTitle("TestApplication");
        primaryStage.show();
    }

}

场景CSS light.css

代码语言:javascript
运行
复制
.root {
    -fx-base: rgb(240, 240, 240);
    -fx-background: rgb(240, 240, 240);
    -fx-border-color: rgb(220, 220, 220);

    /* make controls (buttons, thumb, etc.) slightly lighter */
    -fx-color: derive(-fx-base, 10%);

    /* text fields and table rows background */
    -fx-control-inner-background: rgb(248, 248, 248);
    /* version of -fx-control-inner-background for alternative rows */
    -fx-control-inner-background-alt: derive(-fx-control-inner-background, -2.5%);

    /* text colors depending on background's brightness */
    -fx-light-text-color: rgb(220, 220, 220);
    -fx-mid-text-color: rgb(100, 100, 100);
    -fx-dark-text-color: rgb(20, 20, 20);

    /* A bright blue for highlighting/accenting objects.  For example: selected
     * text; selected items in menus, lists, trees, and tables; progress bars */
    -fx-accent: rgb(0, 80, 100);

    /* color of non-focused yet selected elements */
    -fx-selection-bar-non-focused: rgb(50, 50, 50);

    -fx-font-family: "Roboto"; /* "Segoe UI Semibold", "Roboto", "Monospaced" */
    -fx-font-size: 1em;

    -primary-border-color: rgb(220, 220, 220);
}

/* Fix derived prompt color for text fields */
.text-input {
    -fx-prompt-text-fill: derive(-fx-control-inner-background, -50%);
}

/* Keep prompt invisible when focused (above color fix overrides it) */
.text-input:focused {
    -fx-prompt-text-fill: transparent;
}

/* Fix scroll bar buttons arrows colors */
.scroll-bar > .increment-button > .increment-arrow,
.scroll-bar > .decrement-button > .decrement-arrow {
    -fx-background-color: -fx-mark-highlight-color, rgb(220, 220, 220);
}

.scroll-bar > .increment-button:hover > .increment-arrow,
.scroll-bar > .decrement-button:hover > .decrement-arrow {
    -fx-background-color: -fx-mark-highlight-color, rgb(240, 240, 240);
}

.scroll-bar > .increment-button:pressed > .increment-arrow,
.scroll-bar > .decrement-button:pressed > .decrement-arrow {
    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
}

.text-field {
    -fx-font-size: 10pt;
}

.combo-box {
    -fx-font-size: 10pt;
}

/* ScrollPane style. */
.scroll-pane {
    -fx-background-color: transparent;
}

.scroll-pane > .viewport {
    -fx-background-color: transparent;
}

/* TabPane style. */
.tab-pane > .tab-header-area {
    -fx-background-color: transparent;
}

/* TitledPane style. */
.titled-pane {
    -fx-border-width: 1;
    -fx-border-color: -primary-border-color;
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.15), 5, 0.0, 0, 1);
}

.titled-pane > .content {
    -fx-border-width: 0;
}

.titled-pane .title .arrow-button {
    visibility: false;
}

.titled-pane > .title {
    -fx-background-color: -primary-border-color;
    -fx-background-insets: 0;
    -fx-background-radius: 0 0 0 0;
    -fx-padding: 0.2em 0.2em 0.2em 0.2em;
}

.titled-pane > .title .text {
    -fx-font-size: 10pt;
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-31 22:34:59

设置内联CSS样式将优先于css文件中的样式。因此,通过setStyle应用背景就可以做到这一点。

代码语言:javascript
运行
复制
button.setOnAction(event -> {
            final Node node = titledPane.lookup(".title");
            if (button.isSelected()) {
                node.setStyle("-fx-background-color:#00ff11;");
            } else {
                node.setStyle(null);
            }
        });

更新:不过,更详细地介绍了实际问题。要理解这一点,首先需要了解如何在内部定义.title的背景以及如何设置悬停样式。

在Modena.css内部,下面是.title背景的样式:

代码语言:javascript
运行
复制
.titled-pane > .title {
    -fx-background-color:
        linear-gradient(to bottom,
            derive(-fx-color,-15%) 95%,
            derive(-fx-color,-25%) 100%
        ),
        -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
    -fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */
}

.titled-pane > .title:hover {
    -fx-color: -fx-hover-base;
}

如果您注意到实际背景来自-fx-颜色,-fx-内边界和-fx-体-颜色。然而-fx-内部边界和-fx-体颜色确实再次衍生自-fx-颜色只.

代码语言:javascript
运行
复制
-fx-inner-border: linear-gradient(to bottom,
                ladder(
                    -fx-color,
                    derive(-fx-color,30%) 0%,
                    derive(-fx-color,20%) 40%,
                    derive(-fx-color,25%) 60%,
                    derive(-fx-color,55%) 80%,
                    derive(-fx-color,55%) 90%,
                    derive(-fx-color,75%) 100%
                ),
                ladder(
                    -fx-color,
                    derive(-fx-color,20%) 0%,
                    derive(-fx-color,10%) 20%,
                    derive(-fx-color,5%) 40%,
                    derive(-fx-color,-2%) 60%,
                    derive(-fx-color,-5%) 100%
                ));
                
-fx-body-color: linear-gradient(to bottom,
            ladder(
                -fx-color,
                derive(-fx-color,8%) 75%,
                derive(-fx-color,10%) 80%
            ),
            derive(-fx-color,-8%));

在:悬停伪状态下,将-fx-颜色更改为-fx-悬停-基,并相应地更新背景。,这是你的问题,。您仅以编程方式设置默认背景。在.title上的鼠标上,仍然选择内部CSS文件样式(因为您还没有为悬停定义自定义文件样式)。

如果我们设法更新-fx-color属性,那么它将处理针对不同伪状态的相应的css更新。

对于您的需求,一种更正确的方法如下:通过这种方式,您仍然可以获得内部定义的标题的渐变特性。

代码语言:javascript
运行
复制
button.setOnAction(event -> {
            final Node node = titledPane.lookup(".title");
            if (button.isSelected()) {
                node.setStyle("-fx-color:#00ff11;");
            } else {
                node.setStyle(null);
            }
        });
    
// In css file  
.titled-pane > .title {
    -fx-color: -primary-border-color;
    -fx-background-insets: 0;
    -fx-background-radius: 0 0 0 0;
    -fx-padding: 0.2em 0.2em 0.2em 0.2em;
}

更新2

请在另一个TitledPane中找到下面的TitledPane示例。

代码语言:javascript
运行
复制
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.Set;

public class TitledPaneApplication extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        final VBox root = new VBox();
        root.setSpacing(10);

        final TitledPane titledPane = new TitledPane();
        titledPane.setText("Title");

        final String titleBackgroundValue = "#00ff11";
        final ToggleButton button = new ToggleButton("Change");
        button.setOnAction(event -> {
            final Set<Node> node = titledPane.lookupAll(".title");
            if (button.isSelected()) {
                node.forEach(n->n.setStyle("-fx-color:#00ff11;"));
            } else {
                node.forEach(n->n.setStyle(null));
            }
        });
        button.setSelected(false);

        VBox inner = new VBox();
        inner.setSpacing(10);
        inner.setPadding(new Insets(10));
        final TitledPane innerTP = new TitledPane();
        innerTP.setText("Inner Title");
        inner.getChildren().addAll(new Label("Inner"),innerTP);
        innerTP.setContent(new Button("Dummy Button"));

        titledPane.setContent(inner);

        root.getChildren().addAll(button,titledPane);
        final Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add(getClass().getResource("light.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.setTitle("TestApplication");
        primaryStage.show();
    }
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53083005

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档