制作更小的 JavaFX ComboBox

Question

我正在尝试制作一个较小版本的 ComboBox，但无论我做什么，文本和箭头按钮之间的差距都是恒定的。

如果我使用css：

.combo-box-base > *.arrow-button {
    -fx-padding: 0 0 0 0;
    -fx-background-color: pink, pink, pink, pink;
}

箭头按钮变小了，但 ComboBox 本身仍然具有相同的大小，只是增加了箭头和文本之间的间隙以进行补偿。

如果我做

.combo-box > .list-cell {
    -fx-padding: 0 0 0 0;
    -fx-border-insets: 0 0 0 0;
}

组合获得较小的高度，但宽度保持固定。

有没有办法通过减小文本和箭头之间的大小来使组合的首选大小更小？

Answer 1

我知道这个问题已经很老了，但我遇到了同样的问题并想解决它。因此，我开始逐步调试 JavaFX 代码，以了解额外空间的来源。我花了比预期更长的时间，因为我忽略了一小段影响巨大的代码。

该类ComboBoxListViewSkin默认负责计算ComboBox宽度。它的计算方法将计算委托给超类和prefWidth字段的方法，listView并选择较大的结果。

/** {@inheritDoc} */
@Override protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
    double superPrefWidth = super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset);
    double listViewWidth = listView.prefWidth(height);
    double pw = Math.max(superPrefWidth, listViewWidth);

    reconfigurePopup();

    return pw;
}

该listView字段实际上是一个Anonymous Classes扩展的实例，ListView它执行一些ComboBox特定的事情并覆盖一些方法。其中一种方法是protected double computePrefWidth(double height)。它包含导致我们无法摆脱的额外空白问题的行。

pw = Math.max(comboBox.getWidth(), skin.getMaxCellWidth(rowsToMeasure) + 30);

将 30 添加到最宽单元格的宽度正是我们不想要的。因为它是硬编码的，我们不能轻易改变它。乍一看，我忽略了它，导致在调试代码时出现了一些 WTF 时刻。当然，您可以扩展ComboBoxListViewSkin和覆盖它的computePrefWidth方法，但我认为默认ComboBoxListViewSkin类应该提供轻松更改此额外空格的可能性。所以我在 GitHub 上提交了一个问题。

Answer 2

您是否尝试过设置 .combox-box > .text-input 的填充？
根据 Oracles ComboBox CSS 文档，这可能是填充的另一个来源。
如果您计划开发更多 CSS 规则，也许可以查看 SceneBuilder2 的 CSS 检查器或使用ScenicView。ScenicView 还允许实时修改 CSS，这显着提高了调试速度。