css - 制作更小的 JavaFX ComboBox

Question

我正在尝试制作一个较小版本的组合框，但无论我做什么，文本和箭头按钮之间的间隙都是不变的。

如果我使用 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 宽度。它的 compute 方法将计算委托(delegate)给父类(super class)和字段 listView 的 prefWidth 方法，并选择较大的结果。

/** {@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 类应该提供轻松更改此额外空白的可能性。所以我提交了 issue at GitHub .