如何在macOS原生菜单栏中添加JSlider控件？

问题说明 #

我用Swing结合Kotlin开发俄罗斯方块克隆版，希望在菜单栏里用JSlider控制方块圆角程度、方块间隙这类视觉设置。在Windows系统中，窗口内的菜单栏能正常显示滑块和关联标签并工作，但切换到macOS的屏幕顶部原生菜单栏时，JSlider和对应的JLabel完全不显示，其他普通菜单项却正常显示。

目标是实现类似VLC播放器那样的效果——在macOS原生菜单栏中嵌入可交互的滑块控件，带对应文字标签。

核心代码 #

创建视觉偏好菜单 #

fun createVisualPrefsMenu(): JMenu {
    /* 省略其他无关菜单项 */
    val menu = JMenu("Visual Preferences")
    val gapLabel = JLabel("Gap: " + Theme.gap)
    val gapSlider = JSlider(JSlider.HORIZONTAL, 0, 42, Theme.gap)
    gapSlider.addChangeListener {
        Theme.gap = gapSlider.value
        gapLabel.text = "Gap: " + Theme.gap
    }

    val bevelLabel = JLabel("Roundness: " + Theme.bevelPercent)
    val bevelSlider = JSlider(JSlider.HORIZONTAL, 0, 100, (Theme.bevelPercent * 100).toInt())
    bevelSlider.addChangeListener {
        Theme.bevelPercent = bevelSlider.value.toFloat() / 100
        bevelLabel.text = "Roundness: " + Theme.bevelPercent
    }

    menu.add(bevelLabel)
    menu.add(bevelSlider)
    menu.add(gapLabel)
    menu.add(gapSlider)
    return menu
}

菜单栏创建与窗口绑定 #

private fun createTableMenuBar(): JMenuBar {
    val menuBar = JMenuBar()
    /* 省略其他菜单添加逻辑 */
    menuBar.add(createVisualPrefsMenu())
    menuBar.validate()
    return menuBar
}

// 窗口初始化时绑定菜单栏
init {
    /* 其他初始化逻辑 */
    menuBar = createTableMenuBar()
    frame.jMenuBar = menuBar
    /* 其他初始化逻辑 */
}

macOS专属配置 #

fun main() {
    if (SystemInfo.isMacOS) {
        /* 其他配置 */
        System.setProperty("apple.laf.useScreenMenuBar", Theme.hasTransparentWindowBar.toString())
        // 本次演示中hasTransparentWindowBar值为true
        /* 其他配置 */
    }

    val g = GraphicsPanel
    g.run()
}

解决方案 #

macOS原生菜单栏对直接添加的Swing组件兼容性有限，需要通过组件包裹或使用适配库来解决：

方案1：用JMenuItem包裹自定义组件（纯Swing实现） #

将滑块和标签封装到JPanel中，再把面板作为JMenuItem的子组件添加，同时调整样式适配菜单栏：

fun createVisualPrefsMenu(): JMenu {
    val menu = JMenu("Visual Preferences")

    // 处理圆角滑块项
    val bevelPanel = JPanel(FlowLayout(FlowLayout.LEFT, 5, 2))
    val bevelLabel = JLabel("Roundness: " + Theme.bevelPercent)
    val bevelSlider = JSlider(JSlider.HORIZONTAL, 0, 100, (Theme.bevelPercent * 100).toInt())
    bevelSlider.preferredSize = Dimension(150, bevelSlider.preferredSize.height) // 固定宽度避免压缩
    bevelSlider.addChangeListener {
        Theme.bevelPercent = bevelSlider.value.toFloat() / 100
        bevelLabel.text = "Roundness: " + Theme.bevelPercent
    }
    bevelPanel.add(bevelLabel)
    bevelPanel.add(bevelSlider)
    
    val bevelMenuItem = JMenuItem()
    bevelMenuItem.isBorderPainted = false // 关闭边框，贴近原生样式
    bevelMenuItem.add(bevelPanel)
    menu.add(bevelMenuItem)

    // 处理间隙滑块项
    val gapPanel = JPanel(FlowLayout(FlowLayout.LEFT, 5, 2))
    val gapLabel = JLabel("Gap: " + Theme.gap)
    val gapSlider = JSlider(JSlider.HORIZONTAL, 0, 42, Theme.gap)
    gapSlider.preferredSize = Dimension(150, gapSlider.preferredSize.height)
    gapSlider.addChangeListener {
        Theme.gap = gapSlider.value
        gapLabel.text = "Gap: " + Theme.gap
    }
    gapPanel.add(gapLabel)
    gapPanel.add(gapSlider)
    
    val gapMenuItem = JMenuItem()
    gapMenuItem.isBorderPainted = false
    gapMenuItem.add(gapPanel)
    menu.add(gapMenuItem)

    return menu
}

方案2：使用MacWidgets库实现原生风格滑块 #

如果需要完全贴近macOS原生控件的视觉和交互体验，可以使用第三方库MacWidgets：

1. 添加Gradle依赖：

dependencies {
    implementation 'com.explodingpixels:macwidgets:0.9.5'
}

2. 替换菜单创建逻辑：

import com.explodingpixels.macwidgets.SliderMenuItem

fun createVisualPrefsMenu(): JMenu {
    val menu = JMenu("Visual Preferences")

    // 圆角滑块
    val bevelSliderMenuItem = SliderMenuItem(
        "Roundness: " + Theme.bevelPercent,
        (Theme.bevelPercent * 100).toInt(), 0, 100
    )
    bevelSliderMenuItem.slider.addChangeListener {
        val value = bevelSliderMenuItem.slider.value.toFloat() / 100
        Theme.bevelPercent = value
        bevelSliderMenuItem.text = "Roundness: $value"
    }
    menu.add(bevelSliderMenuItem.component)

    // 间隙滑块
    val gapSliderMenuItem = SliderMenuItem(
        "Gap: " + Theme.gap,
        Theme.gap, 0, 42
    )
    gapSliderMenuItem.slider.addChangeListener {
        val value = gapSliderMenuItem.slider.value
        Theme.gap = value
        gapSliderMenuItem.text = "Gap: $value"
    }
    menu.add(gapSliderMenuItem.component)

    return menu
}

关键注意事项 #

• macOS原生菜单栏对组件布局限制较多，必须给滑块设置合适的preferredSize防止被压缩
• 用JMenuItem包裹时，关闭边框绘制能获得更贴近原生的视觉效果
• MacWidgets库仅适配macOS，需在Windows/Linux环境下做降级处理，继续使用标准Swing组件

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