【问题标题】:Image Buttons that user can only select one of JavaFX用户只能选择 JavaFX 之一的图像按钮
【发布时间】:2017-06-04 03:47:00
【问题描述】:

我正在开发一个心情日记应用,目前它会要求用户在保存条目之前以 1-5 的等级对自己的心情进行评分,如下图所示。

我想用 5 个水平布局的小按钮替换它,并以各自的表情符号图像作为背景。我已经选择了我想使用的图像,并且我研究了实现一个普通的 FX 按钮或ImageView,但是对于那些看起来点击按钮只是做了一些动作;相反,我希望用户一次只能选择一个(如单选按钮)。我怎样才能做到这一点?

【问题讨论】:

  • 如何显示只有一个被选中?比如Button的背景颜色会不一样?
  • 好点,我应该提到这一点。我在想按钮周围可能有一个细轮廓,以显示最后点击的是哪一个?

标签: java javafx imageview textfield


【解决方案1】:

建议一:

您可以使用 ControlsFX SegmentedButton(设置为您喜欢的表情符号的按钮图形):

来自文档:

SegmentedButton 是一个简单的控件,它将一组 ToggleButton 实例强制组合在一起,使它们显示为一个集合按钮(带有子按钮),而不是单个按钮。用一张图片更好地说明这一点:

这个控件上的 API 很少,你基本上像往常一样创建 ToggleButton 实例(不要费心将它们放入 ToggleGroup,因为这是由 SegmentedButton 本身完成的),然后您将这些按钮放在按钮列表中。编写此代码的常用方法如下:

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

一个稍微短一点的方法是将 ToggleButton 实例传递给可变参数构造函数,如下所示:

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

建议 2:

您可以使用 ControlsFX Rating

来自文档:

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

要创建一个如下所示的 Rating 控件很简单:

final Rating rating = new Rating();

这将创建一个默认的水平评级控件。要创建垂直 Rating 控件,只需更改方向,如下所示:

final Rating rating = new Rating();
 rating.setOrientation(Orientation.VERTICAL);

您可以继续阅读doc...


建议 3:(不需要第三个库)

您可以使用 5 个 Button 自定义 ToolBar ,每个都有一个 PseudoClass(selected) 并且每次按下其中一个时,其他的都会有 Pseudoclass(selected=false) ,所以用户可以看到选择了哪一个。

所以你可以制作类似于:

如果你想实现它,请阅读这篇文章 -> http://fxexperience.com/2012/02/customized-segmented-toolbar-buttons/

【讨论】:

  • 这正是我想要的,非常感谢!
  • 我宁愿使用伪类而不是类——这似乎是它们的用途……
  • @glglgl Ops 是的,我想说的是伪类,我正在修复它。
  • @JoshNarsu 很高兴它有帮助:-)
猜你喜欢
  • 2017-06-28
  • 2018-04-17
  • 2018-06-27
  • 2016-12-12
  • 1970-01-01
  • 1970-01-01
  • 2012-04-23
  • 2011-08-13
  • 1970-01-01
相关资源
最近更新 更多