如何为动态创建的元素指定css样式？

Question

我在代码中创建一个矩形并将其放置在scenebuilder中创建的HBox内。然后我将一个已经存在的CSS样式应用于它。除非我在创建时指定高度和宽度，否则矩形甚至不会显示（即使css样式已指定高度和宽度）。但是当我设法让它显示时，不会应用css样式。我不知道为什么会这样，我希望有人可以帮助我！感谢

Rectangle rect = new Rectangle();
timesheetSlots.getChildren().addAll(rect);
rect.getStyleClass().add("timesheetSlot");

.timesheetSlot{
    -fx-background-color: #ff6600;
    -fx-width: 20;
    -fx-height: 25;
    -fx-cursor: hand;
}
.timesheetSlot:hover{
    -fx-background-color: #ffffff;
}
.timesheetSlotSelected{
    -fx-background-color: #1Eff00;
    -fx-max-height: 25;
    -fx-max-width: 20;
    -fx-cursor: hand;
}

Answer 1

您使用的CSS属性适用于Region，但不适用于Rectangle（see CSS reference）。 Node的所有受支持属性均可通过Node.getCssMetaData获得。评价

new Rectangle().getCssMetaData().stream().map(CssMetaData::getProperty).sorted().forEach(System.out::println);

产生以下列表（java 8 update 92）：

-fx-arc-height
-fx-arc-width
-fx-blend-mode
-fx-cursor
-fx-effect
-fx-fill
-fx-focus-traversable
-fx-opacity
-fx-rotate
-fx-scale-x
-fx-scale-y
-fx-scale-z
-fx-smooth
-fx-stroke
-fx-stroke-dash-array
-fx-stroke-dash-offset
-fx-stroke-line-cap
-fx-stroke-line-join
-fx-stroke-miter-limit
-fx-stroke-type
-fx-stroke-width
-fx-translate-x
-fx-translate-y
-fx-translate-z
visibility

这些都不允许您设置height width或Rectangle的样式。另请注意，fill的{​​{1}}是使用Rectangle CSS属性分配的，而不是使用-fx-fill。

的变通方法

使用-fx-background-color

您只需将Region替换为Rectangle，并将最小和最大尺寸设置为宽度/高度：

Region

扩展.timesheetSlot{ -fx-background-color: #ff6600; -fx-width: 20; -fx-min-width: -fx-width; -fx-max-width: -fx-width; -fx-height: 25; -fx-min-height: -fx-height; -fx-max-height: -fx-height; -fx-cursor: hand; }

或者使用支持使用CSS分配大小的类扩展Rectangle类，这需要一些代码，因为您需要添加2个新的可修改属性：

Rectangle

示例CSS：

public class StyleableRectangle extends Rectangle {

    private final StyleableDoubleProperty styleableWidth = new SimpleStyleableDoubleProperty(WIDTH_META_DATA, this, "styleableWidth");
    private final StyleableDoubleProperty styleableHeight = new SimpleStyleableDoubleProperty(HEIGHT_META_DATA, this, "styleableHeight");

    public StyleableRectangle() {
        bind();
    }

    public StyleableRectangle(double width, double height) {
        super(width, height);
        initStyleableSize();
        bind();
    }

    public StyleableRectangle(double width, double height, Paint fill) {
        super(width, height, fill);
        initStyleableSize();
        bind();
    }

    public StyleableRectangle(double x, double y, double width, double height) {
        super(x, y, width, height);
        initStyleableSize();
        bind();
    }

    private void initStyleableSize() {
        styleableWidth.set(getWidth());
        styleableHeight.set(getHeight());
    }

    private final static List<CssMetaData<? extends Styleable, ?>> CLASS_CSS_META_DATA;

    private final static CssMetaData<StyleableRectangle, Number> WIDTH_META_DATA = new CssMetaData<StyleableRectangle, Number>("-fx-width", StyleConverter.getSizeConverter()) {

        @Override
        public boolean isSettable(StyleableRectangle styleable) {
            return !styleable.styleableWidth.isBound();
        }

        @Override
        public StyleableProperty<Number> getStyleableProperty(StyleableRectangle styleable) {
            return styleable.styleableWidth;
        }
    };

    private final static CssMetaData<StyleableRectangle, Number> HEIGHT_META_DATA = new CssMetaData<StyleableRectangle, Number>("-fx-height", StyleConverter.getSizeConverter()) {

        @Override
        public boolean isSettable(StyleableRectangle styleable) {
            return !styleable.styleableHeight.isBound();
        }

        @Override
        public StyleableProperty<Number> getStyleableProperty(StyleableRectangle styleable) {
            return styleable.styleableHeight;
        }
    };

    static {
        // combine already available properties in Rectangle with new properties
        List<CssMetaData<? extends Styleable, ?>> parent = Rectangle.getClassCssMetaData();
        List<CssMetaData<? extends Styleable, ?>> additional = Arrays.asList(HEIGHT_META_DATA, WIDTH_META_DATA);
        List<CssMetaData<? extends Styleable, ?>> own = new ArrayList(parent.size()+ additional.size());
        own.addAll(parent);
        own.addAll(additional);
        CLASS_CSS_META_DATA = Collections.unmodifiableList(own); 
    }

    // make metadata available for extending the class
    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
        return CLASS_CSS_META_DATA;
    }

    @Override
    public List<CssMetaData<? extends Styleable, ?>> getCssMetaData() {
        return CLASS_CSS_META_DATA;
    }

    private void bind() {
        this.widthProperty().bind(this.styleableWidth);
        this.heightProperty().bind(this.styleableHeight);
    }


    // -------------------------------------------------------------------------
    // ----------------------- PROPERTY METHODS --------------------------------
    // -------------------------------------------------------------------------

    public final double getStyleableHeight() {
        return this.styleableHeight.get();
    }

    public final void setStyleableHeight(double value) {
        this.styleableHeight.set(value);
    }

    public final DoubleProperty styleableHeightProperty() {
        return this.styleableHeight;
    }

    public final double getStyleableWidth() {
        return this.styleableWidth.get();
    }

    public final void setStyleableWidth(double value) {
        this.styleableWidth.set(value);
    }

    public final DoubleProperty styleableWidthProperty() {
        return this.styleableWidth;
    }

}