JavaFX 分页按钮大小和样式答案

【问题标题】：JavaFX Pagination button sizes and styleJavaFX 分页按钮大小和样式
【发布时间】：2018-03-15 18:49:38
【问题描述】：

我正在尝试使 JavaFX 分页控件看起来像这样：

这是我的样式：

 .pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-dark-grey;
}

.pagination .pagination-control .toggle-button:selected {   
    -fx-background-color: -fx-colour-purple;
}

.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover  {   
    -fx-background-color: -fx-bg-colour-grey;
}

.pagination .pagination-control .left-arrow, .right-arrow{
    -fx-background-color: -fx-font-colour-black;
}

.pagination .label {
  -fx-text-fill: -fx-font-colour-black;
}

这是结果：

背景颜色似乎有问题。当按钮被选中时，它在底部溢出一点，对于箭头按钮，背景不会应用于整个按钮（如果你非常仔细地看最右边的箭头按钮，背景颜色会结束，留下一个白色的小条）。另外我如何增加按钮的大小（它们比现实中的图像小）？我试过像这样设置 prefWidth 和 prefHeight 没有结果

.pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-grey;
    -fx-pref-width: 15;
    -fx-pref-height: 15;
}

【问题讨论】：

标签： java css javafx

【解决方案1】：

这些选择器应该做基本的工作：

/* Remove spacing */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
}

/* You can control the actual button sizes here */
.pagination > .pagination-control > .control-box > .number-button,
.pagination > .pagination-control > .control-box > .bullet-button,
.pagination > .pagination-control > .control-box > .left-arrow-button,
.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-insets: 0, 1;
    -fx-background-color: lightgray, #FAFAFA;
    -fx-min-width: 30;
    -fx-min-height: 30;
}

/* Colors on hover */
.pagination > .pagination-control > .control-box > .number-button:hover,
.pagination > .pagination-control > .control-box > .bullet-button:hover,
.pagination > .pagination-control > .control-box > .left-arrow-button:hover,
.pagination > .pagination-control > .control-box > .right-arrow-button:hover {
    -fx-background-insets: 0;
    -fx-background-color: lightgray;
}

/* Selected toggle color */
.pagination > .pagination-control > .control-box > .number-button:selected,
.pagination > .pagination-control > .control-box > .bullet-button:selected{
    -fx-background-insets: 0;
    -fx-background-color: #58379A;
    -fx-text-fill: white;
}

得到如下结果：

所有按钮的大小都是固定的，间距被移除，选中/悬停的切换按钮具有无边框颜色。

此外，如果您还想控制按钮内的文本大小，您可以将以下选择器更新为：

/* Remove spacing and control font size */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
    -fx-font-size: 12;
}

此外，您还可以控制页面信息的文本大小，例如：

.pagination > .pagination-control {
    -fx-font-size: 8;
}

或者你甚至可以隐藏它：

.pagination {
    -fx-page-information-visible: false;
}

得到以下结果：

【讨论】：

【解决方案2】：

问题是 -fx-pref-width 或 height 没有被应用，因为它们是由它们的父布局处理的（至少我是这么认为的）为了强制你需要设置最小宽度和高度的更改而不是首选。

这是我的 CSS：

.pagination > .pagination-control > .control-box > .number-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination > .pagination-control > .control-box > .left-arrow-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination .pagination-control .toggle-button:selected {   
    -fx-background-color: purple;
}

.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover  {   
    -fx-background-color: grey;
}

请考虑查看modena.css 了解更多信息。

【讨论】：