1

我正在代码中创建一个矩形并将其放置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;
}
4

1 回答 1

2

您正在使用适用于 的 CSS 属性，Region但不适用于Rectangle（请参阅 CSS 参考）。a 的所有受支持属性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

这些都不允许您设置heightorwidth的样式Rectangle。另请注意，filla是使用CSS 属性Rectangle分配的，而不是使用.-fx-fill-fx-background-color

解决方法

使用Region

您可以简单地Rectangle用 a替换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;
}

扩展Rectangle

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

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;
    }

}

示例 CSS：

.timesheetSlot {
    -fx-fill: brown;
    -fx-width: 20;
    -fx-height: 25;
    -fx-cursor: hand;
}
于 2016-07-20T12:24:19.293 回答