JavaFx 关键字高亮文本实现

原文地址: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))
        }
    }

}