如何在JavaFX中创建一个开关按钮？

Question

我想创建一个类似上面的开关按钮 我是一名Swt开发人员，我曾经使用过这个小部件 Switchbutton。 在JavaFX中有类似的东西吗？

- Rajesh Kumar Dash

---

你可能想看一下http://docs.oracle.com/javafx/2/api/javafx/scene/control/ToggleButton.html。我知道它不完全相同，但基本上提供了相同的功能。 - int lawl is over 9000

Answer 1

首先想到的是扩展JavaFX Label，并添加一个Button作为图形和一个SimpleBooleanProperty进行监听。在按钮上设置ActionEvent处理程序，以切换Label的文本、样式和图形内容对齐方式。下面的代码将帮助您入门，您可以尝试使用样式和边界。

package switchbutton;

import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;

public class SwitchButton extends Label
{
    private SimpleBooleanProperty switchedOn = new SimpleBooleanProperty(true);

    public SwitchButton()
    {
        Button switchBtn = new Button();
        switchBtn.setPrefWidth(40);
        switchBtn.setOnAction(new EventHandler<ActionEvent>()
        {
            @Override
            public void handle(ActionEvent t)
            {
                switchedOn.set(!switchedOn.get());
            }
        });

        setGraphic(switchBtn);

        switchedOn.addListener(new ChangeListener<Boolean>()
        {
            @Override
            public void changed(ObservableValue<? extends Boolean> ov,
                Boolean t, Boolean t1)
            {
                if (t1)
                {
                    setText("ON");
                    setStyle("-fx-background-color: green;-fx-text-fill:white;");
                    setContentDisplay(ContentDisplay.RIGHT);
                }
                else
                {
                    setText("OFF");
                    setStyle("-fx-background-color: grey;-fx-text-fill:black;");
                    setContentDisplay(ContentDisplay.LEFT);
                }
            }
        });

        switchedOn.set(false);
    }

    public SimpleBooleanProperty switchOnProperty() { return switchedOn; }
}

- OttPrime

Answer 2

控件FX项目提供了一个类似于您所寻找的开关按钮。

- user2683474

Answer 3

这个可以用两个绑定在一起的切换按钮来实现(bind())，每个按钮都有自己的CSS样式，不需要写解释。实际上，似乎CSS是最棘手（但可行）的部分，需要注意确保正确性。

然后你只需要让你的应用程序监听其中一个切换按钮即可实现所需功能？

- user2683474

---

这是一个答案。该答案建议将具有不同CSS样式的两个切换按钮绑定在一起。如果您认为这是错误的、不好的做法或者没有用处，正确的行为是对答案进行投票，而不是删除它。 - Robert Columbia