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

download：达内-UI全链路设计2022年最新完结无密
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 = "这是一段长文本阐明长文本阐明这是一段长文本阐明长文本阐明" }

}
【达内-UI全链路设计2022年最新完结无密】指定窗口显现
上面也是解释过,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() }

}
复制代码
这里,还是倡议运用字体库可能效果比拟好,能够快速修正颜色