为什么 JavaFX 中按钮上的投影效果与窗格上的效果不同

问题描述 投票：0回答：1

请参阅屏幕截图的这一部分。

我添加到此 FXML 页面的第一个投影是针对白色窗格的，我使用了

-fx-effect: dropshadow(three-pass-box, rgba(16, 40, 123, 0.2), 0px, 0px, 4px, 4px);

在 css 中，它的工作方式就像我们希望的那样

然后我将相同的阴影复制到按钮（即使我们可能想以一种或另一种方式调整厚度或颜色），并且不知何故，阴影现在也遮蔽了按钮本身。上面按钮的颜色应该是白色的，就像下面按钮上的文本一样，但是这些 css 设置现在似乎被 dropshadow 否决了，dropshadow 应该只在按钮外部执行，而不是在其边框内执行

这是某种错误还是某种可以解决此问题的配置或设置？

Java 21（openjdk-21.0.0）

MRE 代码，以 pom.xml 开头

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.2.3</version>
    <relativePath/>
  </parent>

  <groupId>nl.mre</groupId>
  <artifactId>MRE</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>
  <properties>
    <maven.compiler.release>21</maven.compiler.release>
    <spring.boot.version>3.2.3</spring.boot.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.openjfx</groupId>
      <artifactId>javafx-controls</artifactId>
      <version>21</version>
    </dependency>
    <dependency>
      <groupId>org.openjfx</groupId>
      <artifactId>javafx-fxml</artifactId>
      <version>21</version>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-autoconfigure</artifactId>
      <version>${spring.boot.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter</artifactId>
      <version>${spring.boot.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>${spring.boot.version}</version>
      <type>pom</type>
    </dependency>
  </dependencies>
</project>

SpringBootApp.java

package nl.mre;

import javafx.application.Application;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootApp {
    public static void main(String[] args) {
        Application.launch(JavaFXApplication.class, args);
    }
}

JavaFXApplication.java

package nl.mre;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import org.springframework.boot.SpringApplication;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.context.annotation.ComponentScan;

@ComponentScan
public class JavaFXApplication extends Application {
    private Parent rootNode;

    private Stage mainStage;

    @Override
    public void init() {
        ConfigurableApplicationContext mainContext = SpringApplication.run(JavaFXApplication.class);
        Platform.runLater(() -> {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("/fxml/Mre.fxml"));
            loader.setControllerFactory(mainContext::getBean);
            try {
                rootNode = loader.load();
            } catch (Exception e) {
                //no logging in MRE
            }
        });
    }

    @Override
    public void start(Stage primaryStage) {
        mainStage = primaryStage;
        mainStage.setScene(new Scene(rootNode));
        mainStage.setResizable(false);
        mainStage.show();
    }

    @Override
    public void stop() {
        mainStage.close();
        System.exit(0);
    }
}

/资源/fxml/Mre.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.Region?>

<BorderPane prefHeight="648.0" prefWidth="1152.0" stylesheets="@../css/application.css" xmlns="http://javafx.com/javafx/21">
    <center>
        <Pane prefHeight="600" prefWidth="1152.0" styleClass="pane-background">
            <Label alignment="CENTER" layoutX="20.0" layoutY="122.0" prefHeight="35.0" prefWidth="390.0" styleClass="label-big-and-bold" text="Nieuw" />
            <Pane layoutX="20.0" layoutY="176.0" prefHeight="264.0" prefWidth="390.0" styleClass="pane-white">
                <TextField alignment="BOTTOM_LEFT" layoutX="20.0" layoutY="20.0" prefHeight="40.0" prefWidth="350.0" styleClass="textfield" />
                <Label layoutX="24.0" layoutY="20.0" prefHeight="15.0" prefWidth="110.0" styleClass="label-small" text="A *" textAlignment="RIGHT" />
                <TextField alignment="BOTTOM_LEFT" layoutX="20.0" layoutY="75.0" prefHeight="40.0" prefWidth="350.0" styleClass="textfield" />
                <Label layoutX="24.0" layoutY="75.0" prefHeight="15.0" prefWidth="140.0" styleClass="label-small" text="B *" />
                <Button disable="true" layoutX="105.0" layoutY="135.0" mnemonicParsing="false" prefHeight="44.0" prefWidth="180.0" styleClass="button-audio" text="ALLEEN AUDIO" />
                <Region layoutX="115.0" layoutY="145.0" opacity="0.4" prefHeight="24.0" prefWidth="24.0" styleClass="region-audio" />
                <Button disable="true" layoutX="105.0" layoutY="195.0" mnemonicParsing="false" prefHeight="44.0" prefWidth="180.0" styleClass="button-video" text="AUDIO EN VIDEO" />
                <Region layoutX="115.0" layoutY="209.0" prefHeight="24.0" prefWidth="24.0" styleClass="region-video" />
            </Pane>
        </Pane>
    </center>
</BorderPane>

/资源/css/application.css

.button-primary, .button-agree, .button-login, .button-start, .button-stop, .button-video {
    -fx-effect: dropshadow(three-pass-box, rgba(16, 40, 123, 0.2), 0px, 0px, 4px, 4px);
    -fx-background-color: #10277b;
    -fx-border-radius: 5;
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-font-family: "Open Sans";
    -fx-text-fill: #ffffff;
}

.button-agree, .button-login, .button-start, .button-stop, .button-video {
    -fx-background-position: left center;
    -fx-background-repeat: no-repeat;
    -fx-padding: 10 12 10 40;
}

.region-video {
    -fx-background-color: white;
    -fx-min-height: 16;
    -fx-min-width: 24;
    -fx-max-height: 16;
    -fx-max-width: 24;
    -fx-shape: "M17.016 10.5l3.984-3.984v10.969l-3.984-3.984v3.516c0 0.563-0.469 0.984-1.031 0.984h-12c-0.563 0-0.984-0.422-0.984-0.984v-10.031c0-0.563 0.422-0.984 0.984-0.984h12c0.563 0 1.031 0.422 1.031 0.984v3.516z";
}


.button-secondary, .button-audio, .button-back, .button-cancel, .button-remark {
    -fx-background-color: white;
    -fx-border-color: #10277b;
    -fx-border-radius: 5;
    -fx-border-width: 2;
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-font-family: "Open Sans";
    -fx-text-fill: #10277b;
    -fx-effect: dropshadow(three-pass-box, rgba(16, 40, 123, 0.2), 0px, 0px, 4px, 4px);
}

.button-audio, .button-back, .button-cancel, .button-remark {
    -fx-background-position: left center;
    -fx-background-repeat: no-repeat;
    -fx-padding: 10 12 10 40;
}

.region-audio {
    -fx-background-color: #10277b;
    -fx-min-height: 24;
    -fx-min-width: 16;
    -fx-max-height: 24;
    -fx-max-width: 16;
    -fx-shape: "M17.297 11.016h1.688c0 3.422-2.719 6.234-6 6.703v3.281h-1.969v-3.281c-3.281-0.469-6-3.281-6-6.703h1.688c0 3 2.531 5.063 5.297 5.063s5.297-2.063 5.297-5.063zM12 14.016c-1.641 0-3-1.359-3-3v-6c0-1.641 1.359-3 3-3s3 1.359 3 3v6c0 1.641-1.359 3-3 3z";
}

.label {
    -fx-text-fill: #10277b;
    -fx-font-size: 16;
    -fx-font-family: "Open Sans";
}

.label-big-and-bold {
    -fx-text-fill: #10277b;
    -fx-font-size: 24;
    -fx-font-weight: bold;
    -fx-font-family: "Open Sans";
}

.label-small {
    -fx-text-fill: #10277b;
    -fx-font-size: 10;
    -fx-font-family: "Open Sans";
}

.pane-background {
    -fx-background-color: #f2f4f8;
}

.pane-white {
    -fx-border-radius: 10;
    -fx-background-color: white;
    -fx-background-radius: 10;
    -fx-effect: dropshadow(three-pass-box, rgba(16, 40, 123, 0.2), 0px, 0px, 4px, 4px);
}


.text-field {
    -fx-background-color: #f2f4f8;
    -fx-border-color: #3596d2;
    -fx-border-width: 0 0 2 0;
    -fx-text-fill: #10277b;
    -fx-font-size: 14;
    -fx-font-family: "Open Sans";
}

.text-field:focused {
    -fx-background-color: -fx-focus-color, #FFFFFF;
    -fx-background-insets: -0.4, 2, -2.8, 5.2;
}
button javafx dropshadow
1个回答
0
投票

问题的出现是因为您的按钮被禁用，并且 modena.css 中定义的默认样式将禁用项目的不透明度设置为 

0.4
。因此，您的按钮是部分透明的，您可以透过它们看到阴影。

如果您关闭禁用按钮的不透明度设置，例如与

.button:disabled {
    -fx-opacity: 1.0;
}

它将解决问题。您可能需要某种表明该按钮被禁用的视觉线索，因此这不太可能是您需要的确切修复方法，但它演示了导致问题的原因。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.