Question

我的场景中有一个滑块和一个标签。我编写了一个匿名方法，根据滑块的值设置标签文本，然后将其直接放在滑块的拖动按钮下。

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

在此上下文中，timeSlider是滑块，timeLabel是我之前引用的标签。

以下是标签相对于滑块未对齐的图片：

上图显示当滑块处于最小值时，标签直接位于其下方。

但是，当滑块处于最大值时，标签甚至与滑块没有正确对齐。

我非常感谢任何有关我可能做错的见解。

非常感谢。

Answer 1

你希望文本以拇指为中心，所以我想我会尝试将文本的布局基于拇指位置，并且它有效。

我不一定推荐像下面那样的解决方案。可能有更好的方法来实现这一点，或者至少有更好的方法来构造代码，使标记的滑块成为自己的控件＆＃34;，但这只是我想出来的，似乎完成了工作。

注意，我将文本放在滑块上方，因为它似乎更有用。因为这样，拖动拇指时鼠标指针不会遮挡文本。

顺便说一句，带标签的滑块构思实际上是个不错的主意。

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

Answer 2

我认为你的标签和文字是左对齐的。尝试将它居中，看看有什么不同。

JavaFX：标签的位置与滑块中拖动按钮的位置不匹配

2 个答案: