如何设置JavaFX中ControlsFX的SegmentedBar各分段的颜色？

SegmentedBar的单个分段样式无法直接通过控件全局的setStyle方法修改，原因是每个分段是控件内部独立渲染的Cell节点，需要通过自定义Cell工厂单独指定样式，以下是两种可行方案： #

方法1：代码内动态指定颜色（无需额外CSS文件） #

直接将分段所需颜色存在Segment的userData属性中，在Cell渲染时读取并设置样式：

@FXML SegmentedBar segments;

public void setSegments() {
    // 构造两个分段，分别存储需要的颜色到userData
    SegmentedBar.Segment seg1 = new SegmentedBar.Segment(10, "10");
    seg1.setUserData("#27ae60"); // 第一个分段设为绿色
    SegmentedBar.Segment seg2 = new SegmentedBar.Segment(90, "90");
    seg2.setUserData("#2980b9"); // 第二个分段设为蓝色

    segments.getSegments().addAll(seg1, seg2);

    // 自定义Cell工厂处理每个分段的样式
    segments.setCellFactory(bar -> new SegmentedBar.Cell<>() {
        @Override
        protected void updateItem(SegmentedBar.Segment item, boolean empty) {
            super.updateItem(item, empty);
            if (empty || item == null) {
                setStyle("");
                return;
            }
            // 读取颜色设置当前分段Cell的背景
            String color = (String) item.getUserData();
            setStyle("-fx-background-color: " + color + ";");
        }
    });
}

方法2：绑定CSS类（适合样式统一管理场景） #

如果项目样式统一放在CSS文件中管理，可以给分段添加自定义样式类，同步到渲染Cell后通过CSS定义样式：

Java代码部分 #

@FXML SegmentedBar segments;

public void setSegments() {
    // 给分段添加自定义样式类标识
    SegmentedBar.Segment seg1 = new SegmentedBar.Segment(10, "10");
    seg1.getStyleClass().add("segment-first");
    SegmentedBar.Segment seg2 = new SegmentedBar.Segment(90, "90");
    seg2.getStyleClass().add("segment-second");

    segments.getSegments().addAll(seg1, seg2);

    segments.setCellFactory(bar -> new SegmentedBar.Cell<>() {
        @Override
        protected void updateItem(SegmentedBar.Segment item, boolean empty) {
            super.updateItem(item, empty);
            // 先移除旧的自定义样式类，避免Cell复用导致样式错乱
            getStyleClass().removeAll("segment-first", "segment-second");
            if (empty || item == null) {
                return;
            }
            // 同步当前分段的样式类到渲染Cell
            getStyleClass().addAll(item.getStyleClass());
        }
    });
}

对应CSS文件部分 #

.segment-first {
    -fx-background-color: #27ae60;
}
.segment-second {
    -fx-background-color: #2980b9;
}

内容的提问来源于stack exchange，提问作者sillyPin