【问题标题】:Why does disabled JavaFX TextArea has a different color than TextField为什么禁用的 JavaFX TextArea 的颜色与 TextField 不同
【发布时间】:2016-06-13 05:29:11
【问题描述】:

我正在重新设置 JavaFX 应用程序的样式,但 :disabled 样式有问题。当我尝试更改-fx-text-fill-fx-opacity settings 时,textareas 的文本颜色仍然比文本字段略浅。这是我现在得到的风格:

/*** Text Fields and Areas ***/
.text-field,
.text-area {
    -fx-text-fill: #000;
    -fx-opacity: 1.0;
}

.text-field:disabled,
.text-area:disabled {
    -fx-text-fill: #000;
    -fx-opacity: 0.5;
}

这是禁用组件在程序中的外观: Screenshot from the JavaFX application

如您所见,TextField 的文本颜色为#7a7a7a,即#000 的50%。然而,TextArea 的颜色似乎是 #c7c7c7,它是 #000 的 25%。

有谁知道我怎样才能为文本区域获得与文本字段相同的禁用颜色?

【问题讨论】:

  • 您好,当您将禁用的不透明度设置为 1 时会发生什么情况,在文本字段为 1 且文本区域为 0.5 的情况下,您是否得到相同的结果
  • 当禁用属性的不透明度也设置为 1 时,最终颜色相同 (#000)。

标签: java css javafx


【解决方案1】:

发生了什么

IMO 当前行为是一个错误,应提交至http://bugreport.java.com(我已经这样做了,不幸的是,Java 错误报告系统不提供任何方法来跟踪此错误报告,除非它被 JavaFX 团队接受)。

问题是文本区域中文本的不透明度修改器被应用了两次。默认的 TextArea 皮肤被实现为一个 TextArea 控制节点,其中有一个内部 ScrollPane,当 TextArea 被禁用时,两者的不透明度都设置为 0.4,因此文本(和滚动窗格中的滚动条)具有禁用不透明度褪色效果应用了两次(这是错误的)。您可以通过检查 ScenicView 中禁用的 TextArea 控件来看到这一点。

解决方法

当它包含在文本输入控件中时,将禁用的滚动窗格的不透明度显式设置为 1。

.text-input > .scroll-pane:disabled {
    -fx-opacity: 1;
}

示例应用:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import org.scenicview.ScenicView;

public class DisabilityAssistance extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        TextArea area = new TextArea("Text Area");
        area.setDisable(true);
        TextField field = new TextField("Text Field");
        field.setDisable(true);

        Scene scene = new Scene(new VBox(10, area, field));
        stage.setScene(scene);
        stage.show();

        scene.getStylesheets().add(getClass().getResource(
                "disability.css"
        ).toURI().toURL().toExternalForm());

        ScenicView.show(stage.getScene());
    }

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

输出(未应用 CSS 解决方法):

输出(应用了 CSS 解决方法):

【讨论】:

    猜你喜欢
    • 2019-07-16
    • 1970-01-01
    • 2015-07-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-22
    相关资源
    最近更新 更多