JavaFx Tooltip懸浮提示使用及自定義

one發表於2021-12-21
Java

原文：JavaFx Tooltip懸浮提示使用及自定義 | Stars-One的雜貨小窩

本篇是基於TornadoFx框架對Tooltip元件進行講解,使用Kotlin語言,和傳統Java使用有所區別,僅供參考

介紹

滑鼠懸浮在某個控制元件，彈出提示，效果如下：

使用

Tooltip一般是和某個節點控制元件繫結使用,這裡的節點控制元件只能是control中的包javafx.scene.control,具體可以點選地址跳轉檢視

除此之外,還提供了另外一個方法,可以讓tooltip在當前視窗的指定位置顯示,比較麻煩的就是需要自己去計算偏移量

  • Tooltip.install(control,tooltip) 繫結使用
  • tooltip.show(window,x,y) 指定視窗和偏移量顯示

PS: tooltip指的是Tooltip的物件,可以直接新建

Java中使用

簡單地提下Java中的使用

//control是某個控制元件
Label label = new Lable("hello")
Tooltip.install(label, new Tooltip("滑鼠懸浮顯示的文字"));

TornadoFx中使用

class TestView : View("My View") {
    override val root = vbox {

        label("hello") {
            tooltip = tooltip("這是一段解釋說明")
        }

    }
}

自定義

本章節包括對tooltip的樣式定製化以及指定視窗顯示

樣式自定義

預設的黑底白字有些醜,有時候感覺看到不太清楚,我們可以對其樣式進行調整,調整為白底黑字,程式碼如下:

label("hello") {
    tooltip = tooltip("這是一段解釋說明"){
        style {
            backgroundColor += c("white")
            textFill = c("black")
        }
    }
}

效果如下圖所示:

從上面的程式碼其實就是修改了tooltip內部的樣式就可以了,舉一反三,相關屬性或樣式修改即可對tooltip的樣式進行調整

label("hello") {
    tooltip = tooltip {

        prefWidth = 200.0
        textAlignment = TextAlignment.LEFT
        isWrapText = true
        style {
            backgroundColor += c("white")
            textFill = c("black")
        }
        isAutoHide = false
        text = "這是一段長文字說明長文字說明這是一段長文字說明長文字說明"
    }
}

效果如下:

指定視窗顯示

上面也是解釋過,Tooltip有兩種使用方法,一種是與控制元件進行繫結,另外則是指定視窗來使用,那麼上面情況下是需要使用指定視窗這種方法呢?

答案很明確,有些控制元件並不支援直接安裝tooltip的,那我們想要實現懸浮彈窗只能使用這個指定視窗顯示的方法了

我們以Text為例子,再想上面的label那樣寫,tooltip會直接爆紅的,原因是Text並不是control包中的元件

text("hello") {
    //注意這裡,是宣告瞭變數
    val tooltip = tooltip {

        prefWidth = 200.0
        textAlignment = TextAlignment.LEFT
        isWrapText = true
        style {
            backgroundColor += c("white")
            textFill = c("black")
        }
        isAutoHide = false
        text = "這是一段長文字說明長文字說明這是一段長文字說明長文字說明這是一段長文字說明長文字說明這是一段長文字說明長文字說明"
    }
    //監聽滑鼠劃入事件
    setOnMouseEntered {
        tooltip.show(currentWindow)
    }
     
    //監聽滑鼠劃出事件
    setOnMouseExited {
        ooltip.hide()
    }
}

上述程式碼對Text控制元件設定了滑鼠劃入和劃出事件的監聽,當滑鼠劃入的時候,就顯示tooltip;當滑鼠劃出的時候,就將tooltip進行隱藏

滑動到圖示

首先我們來看動態效果

tooltip自動移動位置有點奇怪,不過沒找到具體原因,湊合著用了..

程式碼也是比較簡單,只是在上面滑鼠劃入和劃出的監聽基礎上加了修改圖示的操作,不過感覺有些卡頓,圖片寬高最好不要設定太大

圖示是自己去iconfont-阿里巴巴向量圖示庫生成了,就簡單的改了下顏色,就有了兩張圖片

PS:實踐的時候,注意下圖片的路徑,如下圖

程式碼如下:

imageview("/img/que_normal.png") {
    fitWidth = 50.0
    fitHeight=50.0
    //注意這裡,是宣告瞭變數
    val tooltip = tooltip {

        prefWidth = 200.0
        textAlignment = TextAlignment.LEFT
        isWrapText = true
        style {
            backgroundColor += c("white")
            textFill = c("black")
        }
        isAutoHide = false
        text = "這是一段長文字說明長文字說明這是一段長文字說明長文字說明這是一段長文字說明長文字說明這是一段長文字說明長文字說明"
    }

     setOnMouseEntered {
         image = Image("/img/que_select.png")
         tooltip.show(currentWindow)
     }
    setOnMouseExited {
        image = Image("/img/que_normal.png")
        tooltip.hide()
    }
}

這裡,還是建議使用字型庫可能效果比較好,可以快速修改顏色

給自己打波廣告,可以去看看我這個開源庫Tornadofx學習筆記（4）——IconTextFx開源庫,整合5000+個字型圖示 - Stars-one - 部落格園

下面這圖片是我用字型庫來實現的效果圖:

相關文章