如何自訂 JavaFX 進度條的外觀？

JavaFX 進度條樣式

簡介

自訂 UI 元件的外觀可以增強使用者體驗並使它們與應用程式的美觀保持一致。本文討論 JavaFX ProgressBar 元件的自訂。

設定進度列顏色

使用 -fx-background-color 屬性定義進度列的顏色。內部欄可以使用 -fx-accent 屬性進行著色。

.progress-bar {
    -fx-background-color: lightblue;
    -fx-accent: red;
}

設定進度欄背景顏色

要將進度欄的背景顏色與其主顏色分開設置，使用 -fx-control-inner-background 屬性。

.progress-bar > .track {
    -fx-control-inner-background: lightgray;
}

在進度欄頂部新增自訂文字

要在進度欄頂部新增文字節點，請建立一個自訂標籤並將其絕對定位在欄上。

Label progressText = new Label("Progress: 50%");
progressText.setLayoutX(getProgressBar().getLayoutX() + getProgressBar().getWidth() / 2);
progressText.setLayoutY(getProgressBar().getLayoutY() + 2);

其他自訂

更改進度欄高度

.progress-bar .bar { 
    -fx-padding: 1px; 
    -fx-background-insets: 0; 
}

CSS 類別名稱和指令

ProgressBar 元件的CSS 類別名稱和指令可在JavaFX 預設樣式表中找到，例如modena.css (Java 8) 或caspian.css (Java 7)。

CSS 參考指南

有關 JavaFX CSS 使用的一般信息，請參閱 JavaFX CSS 參考指南。

以上是如何自訂 JavaFX 進度條的外觀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！