JavaFx 關鍵字高亮文字實現

one發表於2023-05-11
Java

原文地址:JavaFx 關鍵字高亮文字實現 - Stars-One的雜貨小窩

整藍奏雲批次下載器裡的搜尋功能想到的一個關鍵字高亮功能,藉助textflow元件來實現,記錄一下

本文基於TornadoFx框架進行編寫,封裝工具程式碼是kotlin版本

然後也是順便把這個封裝成了stars-one/common-controls
裡的xHighLightTextFlow

效果

思路

實現思路不是太難,就是要看關鍵字的位置,然後計算下標

關鍵字位置有三種情況:

  1. 開頭
  2. 中間
  3. 結尾

我們需要找到關鍵字的下標,然後依次建立出對應的label,如果是有關鍵字的label,則設定一下樣式(背景色為黃色)

之後再將得到的多個label新增到textflow中即可

這裡注意下,需要考慮下大小寫的情況,我的做法就是計算座標的時候,將文字和關鍵字全部轉為小寫來計算,這樣就不會出現問題

程式碼

val myTextFlow = textflow {  }
val keyword = "我的"
val itemTitle = "我的東西22ss11"

//這裡轉為小寫處理,方便後面得到index
val itemTitleLowcase = itemTitle.toLowerCase()
val keywordLowcase = keyword.toLowerCase()

val keyWordLength = keyword.length

when {
    itemTitleLowcase.startsWith(keywordLowcase) -> {

        //關鍵字位於開頭
        myTextFlow.apply {
            label(itemTitle.substring(0, keyWordLength)) {
                style {
                    backgroundColor += c("#ffff00")
                }
            }
            label(itemTitle.substring(keyWordLength))
        }
    }
    itemTitleLowcase.endsWith(keywordLowcase) -> {
        val startIndex = itemTitleLowcase.indexOf(keywordLowcase)
        //關鍵字位於結尾
        myTextFlow.apply {
            label(itemTitle.substring(0, startIndex))
            label(itemTitle.substring(startIndex, itemTitleLowcase.length)) {
                style {
                    backgroundColor += c("#ffff00")
                }
            }
        }
    }
    else -> {
        //關鍵字位於中間
        val arr = itemTitleLowcase.split(keywordLowcase)
        val range1 = arr.first().indices
        val range2 = arr.first().length+keyWordLength until itemTitle.length

        myTextFlow.apply {
            label(itemTitle.substring(range1))
            label(keyword) {
                style {
                    backgroundColor += c("#ffff00")
                }
            }
            label(itemTitle.substring(range2))
        }
    }

}

相關文章