如何单独引用 RangeSlider (ControlsFX) 的每个 Thumb

Question

我正在尝试绑定一个标签以显示在 RangeSlider 的下拇指和上拇指上方。

标签的位置应始终保持在各自拇指上方，无论用户将其滑动到哪里。像这样：

我的方法是将侦听器附加到每个拇指，以便每次用户滑动时我都可以将标签设置为具有适当的 X/Y 坐标。但是当我运行以下代码时，我似乎无法通过 css 选择器获得对个人拇指的引用。

我关注了，但这只用了一个拇指，因此很容易参考。你如何在我的上下文中正确使用 CSS 选择器，或者如果我的选择器有缺陷，什么是更好的方法？

控制器

public class SliderDemoController implements Initializable {
    @FXML
    private RangeSlider range;
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        Pane thumb = (Pane) range.lookup(".range-slider .low-thumb");
        System.out.println(thumb); // <-- Prints null
    }
}

主要

public class SliderDemoMain extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage initStage) throws IOException {
        FXMLLoader loader = new FXMLLoader(Drag.class.getClassLoader().getResource("sliderdemo.fxml"));
        Parent root = loader.load();
        Scene scene = new Scene(root);
        Stage primaryStage = new Stage();
        primaryStage.setTitle("Slider Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

styleMain.css

.range-slider .range-bar {
    -fx-background-color: grey;
}

.range-slider .low-thumb {
     //....
}
.range-slider .high-thumb {
    //....
}

sliderdemo.fxml

的顶行

<HBox fx:id="menuBar" maxHeight="-Infinity" minHeight="-Infinity" prefHeight="79.0" stylesheets="@styleMain.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.propertydrop.SliderDemoController">

Answer 1

要使 CSS 查找起作用，您需要应用 CSS，进行布局传递，并且节点成为场景的一部分。（请注意，在您引用的 post 中，答案中的代码会在执行查找之前仔细执行这些步骤。）

这在控制器中很难实现，因为 initialize() 方法通常在将 FXML 的根节点添加到场景之前调用。您可以通过观察节点的 sceneProperty() 来解决这个问题，并在它设置为非空值时做出响应。（是的，这有点 hack...）：

public class SliderDemoController implements Initializable {
    @FXML
    private RangeSlider range;
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        ChangeListener<Scene> initializer = new ChangeListener<Scene>() {
            @Override
            public void changed(ObservableValue<? extends Scene> obs, Scene oldScene, Scene newScene)  {
                if (newScene != null) {
                    range.applyCss();
                    range.getParent().layout();
                    Pane thumb = (Pane) range.lookup(".range-slider .low-thumb");
                    System.out.println(thumb); // <-- No longer null
                    range.sceneProperty().removeListener(this);
                }
            }
        };
        range.sceneProperty().addListener(initializer);
    }
}

根据您的具体要求，您也许可以做一些不那么丑陋的事情，例如在事件处理程序中执行查找或在滑块的 highValue 或 [=14= 上执行侦听器] 属性。

如何单独引用 RangeSlider (ControlsFX) 的每个 Thumb

How to Individually Reference Each Thumb of a RangeSlider (ControlsFX)

javafx

rangeslider

controlsfx