快捷導(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中使用

簡單地提下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 = "這是一段長文本說明長文本說明這是一段長文本說明長文本說明"
    }
}

效果如下:

指定窗口顯示

上面也是解釋過,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 = "這是一段長文本說明長文本說明這是一段長文本說明長文本說明這是一段長文本說明長文本說明這是一段長文本說明長文本說明"
    }
    //監(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)奇怪,不過沒找到具體原因,湊合著用了..

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

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

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

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

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

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

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