时间戳

首页 > 解决方案 > 如何更改 JavaFX 可编辑组合框/日期选择器中文本字段的背景

css - 如何更改 JavaFX 可编辑组合框/日期选择器中文本字段的背景

问题描述

我有一个函数可以检查表单的输入（文本字段、组合框和日期选择器），如果它们中的任何一个为空，它会将背景颜色更改为浅红色

public void checkForm() {
    if (clientIdInput.getText().equals("")) {
        clientIdInput.setStyle("-fx-background-color: #F5D3D0");
    }

    if(clientNameInput.getText().equals("")) {
        clientNameInput.setStyle("-fx-background-color: #F5D3D0");
    }

    if(clientPhoneNumberInput.getText().equals("")) {
        clientPhoneNumberInput.setStyle("-fx-background-color: #F5D3D0");
    }

    if(trainerIdInput.getText().equals("")) {
        trainerIdInput.setStyle("-fx-background-color: #F5D3D0");
    }

    if(trainerNameInput.getText().equals("")) {
        trainerNameInput.setStyle("-fx-background-color: #F5D3D0");
    }

    if(membershipTypeOptions.getValue() == null) {
        membershipTypeOptions.setStyle("-fx-background-color: #F5D3D0");
    }

    if(membershipStartDateInput.getValue() == null) {
        membershipStartDateInput.setStyle("-fx-background-color: #F5D3D0");
    }

    if(membershipEndDateInput.getValue() == null) {
        membershipEndDateInput.setStyle("-fx-background-color: #F5D3D0");
    }

    if(paymentMethodOptions.getValue() == null) {
        paymentMethodOptions.setStyle("-fx-background-color: #F5D3D0");
    }

    if(paymentAmountInput.getText().equals("")) {
        paymentAmountInput.setStyle("-fx-background-color: #F5D3D0");
    }
}

除了日期选择器和可编辑组合框外，它工作正常，因为它们似乎有一个文本框分层在顶部，不受 -fx-background-color 属性的影响。所以我的问题基本上是如何使两个背景具有相同的颜色？作为一个小问题，有没有一种更有效的方法来实现这个函数的目的，而不是 10 个 if 语句？

这是函数运行后的样子： 图像

标签： cssjavafx

解决方案

它适用于我-fx-background-color用查找的颜色替换-fx-control-inner-background，默认样式表使用它来为文本字段着色。

package org.jamesd.examples.validate;

import java.util.function.Predicate;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Control;
import javafx.scene.control.DatePicker;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class App extends Application {

    @Override
    public void start(Stage stage) {
        
        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        ComboBox<String> combo1 = makeCombo();
        ComboBox<String> combo2 = makeCombo();
        DatePicker dp1 = new DatePicker();
        DatePicker dp2 = new DatePicker();
        
        VBox root = new VBox(10, tf1, tf2, combo1, combo2, dp1, dp2);
        root.setAlignment(Pos.CENTER);
        root.setPadding(new Insets(10));
        
        Button submit = new Button("Submit");
        submit.setOnAction(e -> {
            if (! (validate(tf -> tf.getText().isEmpty(), tf1, tf2)) && 
                    (! validate(cb -> cb.getValue() == null, combo1, combo2, dp1, dp2)) ) {
                System.out.println("Success!");
            }
        });
        
        root.getChildren().add(submit);
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
    }
    
    private ComboBox<String> makeCombo() {
        ComboBox<String> combo = new ComboBox<>();
        combo.getItems().addAll("One", "Two", "Three");
        combo.setEditable(true);
        return combo ;
    }
    
    private <C extends Control> boolean validate(Predicate<C> invalidTest, C... controls) {
        boolean result = true ;
        for (C control : controls) {
            
            if (invalidTest.test(control)) {
                control.setStyle("-fx-control-inner-background: #F5D3D0;");
                result = false ;
            } else {
                control.setStyle("");
            }
        }
        return result ;
    }

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

}

一种为您提供更多控制权的方法是在控件上设置自定义 CSS 伪类，然后使用外部样式表。

推荐阅读