快捷導(dǎo)航

JavaFx?Tooltip懸浮提示使用及自定義代碼詳解

更新時(shí)間：2021年12月21日 14:31:47 作者：Stars-one

本篇是基于TornadoFx框架對(duì)Tooltip組件進(jìn)行講解,使用Kotlin語言,和傳統(tǒng)Java使用有所區(qū)別，本章節(jié)包括對(duì)tooltip的樣式定制化以及指定窗口顯示，對(duì)JavaFx?Tooltip懸浮提示使用及自定義相關(guān)知識(shí)感興趣的朋友一起看看吧

本篇是基于TornadoFx框架對(duì)Tooltip組件進(jìn)行講解,使用Kotlin語言,和傳統(tǒng)Java使用有所區(qū)別,僅供參考

介紹

鼠標(biāo)懸浮在某個(gè)控件，彈出提示，效果如下：

使用

Tooltip一般是和某個(gè)節(jié)點(diǎn)控件綁定使用,這里的節(jié)點(diǎn)控件只能是control中的包javafx.scene.control,具體可以點(diǎn)擊地址跳轉(zhuǎn)查看

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

Tooltip.install(control,tooltip) 綁定使用
tooltip.show(window,x,y) 指定窗口和偏移量顯示

PS: tooltip指的是Tooltip的對(duì)象,可以直接新建

Java中使用

簡(jiǎn)單地提下Java中的使用

//control是某個(gè)控件
Label label = new Lable("hello")
Tooltip.install(label, new Tooltip("鼠標(biāo)懸浮顯示的文字"));

TornadoFx中使用

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

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

    }
}

自定義

本章節(jié)包括對(duì)tooltip的樣式定制化以及指定窗口顯示

樣式自定義

默認(rèn)的黑底白字有些丑,有時(shí)候感覺看到不太清楚,我們可以對(duì)其樣式進(jìn)行調(diào)整,調(diào)整為白底黑字,代碼如下:

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

效果如下圖所示:

從上面的代碼其實(shí)就是修改了tooltip內(nèi)部的樣式就可以了,舉一反三,相關(guān)屬性或樣式修改即可對(duì)tooltip的樣式進(jìn)行調(diào)整

label("hello") {
    tooltip = tooltip {

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

效果如下:

指定窗口顯示

上面也是解釋過,Tooltip有兩種使用方法,一種是與控件進(jìn)行綁定,另外則是指定窗口來使用,那么上面情況下是需要使用指定窗口這種方法呢?

答案很明確,有些控件并不支持直接安裝tooltip的,那我們想要實(shí)現(xiàn)懸浮彈窗只能使用這個(gè)指定窗口顯示的方法了

我們以Text為例子,再想上面的label那樣寫,tooltip會(huì)直接爆紅的,原因是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 = "這是一段長(zhǎng)文本說明長(zhǎng)文本說明這是一段長(zhǎng)文本說明長(zhǎng)文本說明這是一段長(zhǎng)文本說明長(zhǎng)文本說明這是一段長(zhǎng)文本說明長(zhǎng)文本說明"
    }
    //監(jiān)聽鼠標(biāo)劃入事件
    setOnMouseEntered {
        tooltip.show(currentWindow)
    }
     
    //監(jiān)聽鼠標(biāo)劃出事件
    setOnMouseExited {
        ooltip.hide()
    }
}

上述代碼對(duì)Text控件設(shè)置了鼠標(biāo)劃入和劃出事件的監(jiān)聽,當(dāng)鼠標(biāo)劃入的時(shí)候,就顯示tooltip;當(dāng)鼠標(biāo)劃出的時(shí)候,就將tooltip進(jìn)行隱藏

滑動(dòng)到圖標(biāo)

首先我們來看動(dòng)態(tài)效果

tooltip自動(dòng)移動(dòng)位置有點(diǎn)奇怪,不過沒找到具體原因,湊合著用了..

代碼也是比較簡(jiǎn)單,只是在上面鼠標(biāo)劃入和劃出的監(jiān)聽基礎(chǔ)上加了修改圖標(biāo)的操作,不過感覺有些卡頓,圖片寬高最好不要設(shè)置太大

圖標(biāo)是自己去iconfont-阿里巴巴矢量圖標(biāo)庫(kù)生成了,就簡(jiǎn)單的改了下顏色,就有了兩張圖片

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

代碼如下:

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 = "這是一段長(zhǎng)文本說明長(zhǎng)文本說明這是一段長(zhǎng)文本說明長(zhǎng)文本說明這是一段長(zhǎng)文本說明長(zhǎng)文本說明這是一段長(zhǎng)文本說明長(zhǎng)文本說明"
    }

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

這里,還是建議使用字體庫(kù)可能效果比較好,可以快速修改顏色

給自己打波廣告,可以去看看我這個(gè)開源庫(kù)Tornadofx學(xué)習(xí)筆記（4）——IconTextFx開源庫(kù),整合5000+個(gè)字體圖標(biāo)

下面這圖片是我用字體庫(kù)來實(shí)現(xiàn)的效果圖: