iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0

還記得即時通訊軟體(Instant Message,簡稱 IM)出現後,為了在收到訊息時有視覺上的提示,Desktop 上開始出現 Notification UI。不過那時各家軟體都是自行實作,所以 Notification 的樣式可謂百家爭鳴。近年來 Desktop 環境受到 Mobile UI 的影響,各作業系統也都有 Notification Center 的設計,不論是在 UI 上或是 API 上都更加的統一。

Notification 演變至今,也可以算是 UI 元件的其中一環,在 Compose for Desktop 裡也支援發送 Notification,今天的耕讀筆記就研究一下如何在 Desktop 上發送 Notification 及其設定細節。

Notification 類別

要發送通知,首先需要實例化一個 Notification 類別,其支援三個屬性:

Notification(
    title = "...",
    message = "...",
    type = Notification.Type.Info
)
  • title:設定通知在顯示時的標題文字。
  • message:設定通知在顯示時的訊息內容。
  • type:設定通知的類型。

在 Compose for Desktop 裡,Notification 的類型共有四種,在發送通知前,可依照需求選擇發送通知的類型:

  1. None:一般通知。
  2. Info:提供「資訊」類型的通知。
  3. Warning:需要「警告」使用者時的通知。
  4. Error:當有「錯誤」發生時的通知。

Tray 發送 Notification

要發送 Notification,在 Compose for Desktop 裡的限制是,必須從 Tray 元件的 TrayState 發送。實作時,需要在宣告 Window 前先將 Tray 的狀態以 rememberTrayState() 儲存起來,並在宣告 Tray 時一併傳入。接著,在需要發送 Notification 的 Event Handler 裡,將預備好的 Notification 傳入 trayState.sendNotification() 後發送:

fun main() = application {
    val trayState = rememberTrayState()

    Tray(
        state = trayState,
        icon = painterResource("..."),
    ) {
        Item(
            text = "...",
            onClick = {
                trayState.sendNotification(
                    Notification(
                        title = "...",
                        message = "...",
                        type = Notification.Type.Info
                    )
                )
            }
        )
    }
}

在上面的範例裡,筆者是將通知行為綁在 Tray 的選單裡,讀者可以試著增加選單裡的選項,並對應到不同的 Notification 類型。而根據 Notification 類型的不同,在不同的作業系統上也會有顯示差異,讀者可以在不同作業系統上測試一下其顯示結果。

Notification 現階段的限制

由於 Notification 這部份的功能在 Compose for Desktop 是用 Swing API 實作,而 Swing 在發送 Notification 時一定要有 Tray,也因此 Compose for Desktop 現階段要實作 Notification 功能時,也會有一樣的限制。Compose for Desktop 團隊仍在持續開發中,未來這塊實作有可能會再調整,敬請期待後續的發展!

參考資料


上一篇
第 18 天:Desktop 特有元件之 Tray
下一篇
第 20 天:解析 Modifier
系列文
傳教士的 Compose for Desktop 耕讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言