用户只能选择JavaFX之一的图像按钮

Question

我正在开发一个情绪日记应用，目前，它要求用户按照1-5的等级评定他们的心情，然后保存他们的输入，如下图所示。

我想用5个水平布局的小按钮替换它，并将相应的表情符号图像作为背景。我已经选择了我想要使用的图像，并且我研究了实现普通的FX按钮或ImageView，但是看起来点击按钮只是做了一些动作;相反，我希望用户一次只能选择一个（如单选按钮）。我怎么能做到这一点？

Answer 1

建议1：

您可以使用ControlsFX SegmentedButton（设置为您提供的imoji按钮的图形）：

  

来自doc：

SegmentedButton是一个简单的控件，它将一组ToggleButton实例强制在一起，使它们显示为一个集合按钮（带有子按钮），而不是单独的按钮。用图片更清楚地说明了这一点：

此控件上的API非常少，您实际上按照惯例创建ToggleButton个实例（并且不要将它们放入ToggleGroup，因为这是由{{1}完成的}本身），然后将这些按钮放在按钮列表中。对此进行编码的长期方法如下：

SegmentedButton

稍微更短的方法是将ToggleButton实例传递给varargs构造函数，如下所示：

 ToggleButton b1 = new ToggleButton("day");
 ToggleButton b2 = new ToggleButton("week");
 ToggleButton b3 = new ToggleButton("month");
 ToggleButton b4 = new ToggleButton("year");  

 SegmentedButton segmentedButton = new SegmentedButton();    
 segmentedButton.getButtons().addAll(b1, b2, b3, b4);

建议2：

您可以使用ControlsFX Rating：

来自Doc：

允许用户提供评级的控件。该控件支持部分评级（即不是整数并且取决于用户在控件中点击的位置）并且在悬停时更新评级。

创建一个看起来很简单的评级控件：

SegmentedButton segmentedButton = new SegmentedButton(b1, b2, b3, b4);

这会创建默认的水平评级控件。要创建垂直评级控件，只需更改方向，如下：

final Rating rating = new Rating();

您可以继续阅读doc ...

建议3 :(无需第三个图书馆）

您可以使用5 final Rating rating = new Rating(); rating.setOrientation(Orientation.VERTICAL); 创建自定义ToolBar，每个都有一个PseudoClass（Button），每次按下其中一个，其他人将拥有Pseudoclass（{{ 1}}），这样用户就可以看到选择了哪一个。

所以你可以做类似的事情：

如果你想实现它，请阅读本文 - ＆gt; http://fxexperience.com/2012/02/customized-segmented-toolbar-buttons/