如何在JavaFX中实现仅含红、绿、蓝三色的ColorPicker？

这问题我之前也碰到过，默认ColorPicker的全量颜色界面确实不符合你的精简需求。咱们可以用按钮+自定义上下文菜单的方案来实现，完全避开默认控件的复杂界面，只展示红、绿、蓝三种颜色选项。

核心思路 #

不用原生的ColorPicker控件，而是给普通按钮绑定一个ContextMenu，菜单里只放三个对应红、绿、蓝的选项。点击按钮就弹出这个菜单，用户选择后触发对应的颜色处理逻辑。

FXML代码示例 #

先在FXML里定义按钮和对应的上下文菜单，把所有控件都放在FXML里，符合你的需求：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ContextMenu?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.paint.Color?>
<?import javafx.scene.shape.Rectangle?>

<VBox xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="your.package.ColorPickerController">
    <!-- 自定义颜色选择按钮 -->
    <Button text="选择颜色" prefWidth="120">
        <contextMenu>
            <ContextMenu>
                <!-- 红色选项：用颜色块+文字增强直观性 -->
                <MenuItem fx:id="redItem" text="红色">
                    <graphic>
                        <Rectangle width="20" height="20" fill="red" stroke="black" strokeWidth="1"/>
                    </graphic>
                </MenuItem>
                <!-- 绿色选项 -->
                <MenuItem fx:id="greenItem" text="绿色">
                    <graphic>
                        <Rectangle width="20" height="20" fill="green" stroke="black" strokeWidth="1"/>
                    </graphic>
                </MenuItem>
                <!-- 蓝色选项 -->
                <MenuItem fx:id="blueItem" text="蓝色">
                    <graphic>
                        <Rectangle width="20" height="20" fill="blue" stroke="black" strokeWidth="1"/>
                    </graphic>
                </MenuItem>
            </ContextMenu>
        </contextMenu>
    </Button>
</VBox>

控制器代码示例 #

在Java控制器里给每个颜色选项绑定点击事件，处理颜色选择后的逻辑：

package your.package;

import javafx.fxml.FXML;
import javafx.scene.control.MenuItem;
import javafx.scene.paint.Color;

public class ColorPickerController {

    @FXML
    private MenuItem redItem;

    @FXML
    private MenuItem greenItem;

    @FXML
    private MenuItem blueItem;

    @FXML
    public void initialize() {
        // 为每个颜色选项绑定选择事件
        redItem.setOnAction(event -> handleColorPick(Color.RED));
        greenItem.setOnAction(event -> handleColorPick(Color.GREEN));
        blueItem.setOnAction(event -> handleColorPick(Color.BLUE));
    }

    /**
     * 处理颜色选择后的逻辑，这里可以根据你的需求修改
     */
    private void handleColorPick(Color selectedColor) {
        // 示例：打印选中的颜色
        System.out.println("选中颜色: " + selectedColor);
        
        // 如果你需要修改某个控件的颜色，比如一个Label：
        // label.setTextFill(selectedColor);
        // 或者修改背景色：
        // somePane.setBackground(new Background(new BackgroundFill(selectedColor, CornerRadii.EMPTY, Insets.EMPTY)));
    }
}

效果说明 #

点击按钮后会弹出一个简洁的菜单，里面只有红、绿、蓝三个带颜色块的选项，完全不会出现默认ColorPicker的复杂界面，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者GuroItuyoshi