关于ui:达内UI全链路设计2022年最新完结无密

31次阅读

共计 2044 个字符，预计需要花费 6 分钟才能阅读完成。

JavaFx Tooltip 悬浮提醒使用及自定义 (Kotlin)
使用
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 停止藏匿
代码如下:
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()}

}
复制代码
这里, 还是倡导使用字体库可能成果比较好, 可能疾速修改色彩

正文完