css - JavaFX - setStyle() 更改未显示

Question

我正在创建一个 JavaFX 应用程序，但我在更改某些组件的背景颜色时遇到了问题。对于按钮，我可以更改它们的背景半径，但不能更改它们的背景颜色。对于 TableView，我也无法更改背景颜色。

这是我的代码和我所看到的图片。

import javafx.geometry.Pos;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TableView;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class HomeUI extends Application {
    private TableView transactionTable = new TableView();
    private Button importButton = new Button("Import");
    private Button trendButton = new Button("Trends");
    private Button transactionButton = new Button("Transactions");

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        // Set the text of defined fields
        primaryStage.setTitle(" Budget Tracker");
        // Import button information

        // Create Anchor pane
        AnchorPane anchorPane = new AnchorPane();
        anchorPane.setPrefHeight(668.0);
        anchorPane.setPrefWidth(1112.0);
        anchorPane.setStyle("-fx-background-color: #545e75;");

        // VBox to hold all buttons
        VBox vBox = new VBox();
        vBox.setPrefWidth(195);
        vBox.setPrefHeight(668);
        vBox.prefHeight(668);
        vBox.prefWidth(203);
        vBox.setStyle("-fx-background-color: #82a0bc;");
        vBox.setLayoutX(0);
        vBox.setLayoutY(0);
        vBox.setAlignment(Pos.CENTER);

        // importButton settings
        importButton.setMnemonicParsing(false);
        importButton.setPrefWidth(300);
        importButton.setPrefHeight(80);
        importButton.setStyle("-fx-background-color: #cacC9cc");
        importButton.setStyle("-fx-background-radius: 0;");

        // trendButton settings
        trendButton.setPrefWidth(300);
        trendButton.setPrefHeight(80);
        trendButton.setStyle("-fx-background: #bcbdc1");
        trendButton.setStyle("-fx-background-radius: 0");

        // transactionButton settings
        transactionButton.setPrefWidth(300);
        transactionButton.setPrefHeight(80);
        transactionButton.setStyle("-fx-base: #aeacb0");
        transactionButton.setStyle("-fx-background-radius: 0");

        // Add buttons to the vBox
        vBox.getChildren().addAll(importButton, trendButton, transactionButton);

        // TableView settings
        transactionTable.setPrefHeight(568);
        transactionTable.setPrefWidth(694);
        transactionTable.setLayoutX(247);
        transactionTable.setLayoutY(50);
        transactionTable.setStyle("-fx-background-color: CAC9CC;");
        transactionTable.setEditable(false);

        // Add components to anchorPane
        anchorPane.getChildren().addAll(vBox, transactionTable);

        // Add anchorPane to scene and show it
        primaryStage.setScene(new Scene(anchorPane));
        primaryStage.show();
    }
}

Answer 1

按钮

通过设置 style 属性，您可以替换旧样式。多次执行此操作不会组合样式。您应该设置一个结合规则的值。

代替

transactionButton.setStyle("-fx-base: #aeacb0");
transactionButton.setStyle("-fx-background-radius: 0");

使用

transactionButton.setStyle("-fx-base: #aeacb0; -fx-background-radius: 0;");

表格 View

TableView 很少显示它自己的背景。您将看到的大多数着色是作为 TableView 的后代添加的 TableRow 的背景色。不过，您需要使用 CSS 样式表来执行此操作(除非您想使用 rowFactory 来执行样式设置)。

.table-view .table-row-cell {
    -fx-background-color: #CAC9CC;
}