JavaFX: Position des Labels stimmt nicht mit der Position des Ziehknopfes im Schieberegler überein.

Question

Es gibt einen Schieberegler und eine Beschriftung in meiner Szene. Ich habe eine anonyme Methode geschrieben, die den Text des Etiketts entsprechend dem Wert des Schiebereglers setzt und ihn dann direkt unter dem Schieberegler des Schiebereglers platziert.

timeSlider.valueProperty().addListener(new ChangeListener<Number>() { 

      @Override 
      public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) { 
       final double timeSliderMin = timeSlider.getMin(); 
       timeLabel.setText(String.valueOf(newValue.intValue())); 
       timeLabel.setLayoutX(timeSlider.getLayoutX() + (timeSlider.getValue() - timeSliderMin) 
         /(timeSlider.getMax() - timeSliderMin) * timeSlider.getWidth()); 
      } 
}); 

In diesem Zusammenhang ist der timeSlider der Schieber und das Timelabel ist das Label, das ich früher beziehen.

Hier gibt es Bilder von der Verlagerung des Etiketts in Bezug auf den Schieber:

Das Bild oben zeigt, dass, wenn der Schieber an der Minimalwert ist, das Etikett direkt unter ihm ist.

Wenn der Schieberegler jedoch seinen Maximalwert erreicht, ist die Beschriftung nicht richtig auf den Schieberegler ausgerichtet.

Ich würde wirklich jede Einsicht schätzen, was ich möglicherweise falsch machen könnte, damit dies geschieht.

Vielen Dank.

Answer 1

Es sieht für mich so aus, als ob Ihr Label und Text linksbündig ist. Versuchen Sie es zu zentrieren und sehen Sie, was der Unterschied ist.

Answer 2

Nun, Sie wollen den Text auf den Daumen zentriert, also dachte ich, ich würde versuchen, das Layout des Textes auf die Daumenposition zu basieren, und es hat funktioniert.

Ich empfehle nicht unbedingt eine Lösung wie die folgende. Es gibt wahrscheinlich bessere Möglichkeiten, dies zu erreichen, oder zumindest bessere Möglichkeiten, um den Code so zu strukturieren, dass der beschriftete Schieberegler seine eigene "Kontrolle" erhält, aber es war einfach etwas, das mir zu der Aufgabe verholfen hat.

Hinweis: Ich habe den Text über dem Schieberegler platziert, weil er auf diese Weise besser benutzbar ist. Denn dann wurde der Text beim Ziehen des Daumens nicht vom Mauszeiger verdeckt.

Die beschriftete Slider-Idee ist übrigens eigentlich eine nette Idee.

import javafx.application.Application; 
import javafx.geometry.*; 
import javafx.scene.Scene; 
import javafx.scene.control.Slider; 
import javafx.scene.layout.*; 
import javafx.scene.text.Text; 
import javafx.stage.Stage; 

public class LabeledSlider extends Application { 
    @Override 
    public void start(Stage stage) { 
     Text text = new Text(); 
     text.setTextOrigin(VPos.TOP); 
     Slider slider = new Slider(7, 7_700, 4_200) { 
      @Override 
      protected void layoutChildren() { 
       super.layoutChildren(); 

       Region thumb = (Region) lookup(".thumb"); 
       if (thumb != null) { 
        text.setLayoutX(
          thumb.getLayoutX() 
            + thumb.getWidth()/2 
            - text.getLayoutBounds().getWidth()/2 
        ); 
       } 
      } 
     }; 
     slider.setLayoutY(20); 
     text.textProperty().bind(slider.valueProperty().asString("%,.0f")); 

     Pane sliderPane = new Pane(slider, text); 
     slider.prefWidthProperty().bind(sliderPane.widthProperty()); 
     sliderPane.setPrefWidth(200); 

     StackPane layout = new StackPane(sliderPane); 
     layout.setPadding(new Insets(10)); 

     stage.setScene(new Scene(layout)); 
     stage.show(); 
    } 

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