JavaFx ツールチップの一時停止プロンプトの使用とカスタマイズ (Kotlin)

一緒に創造し、成長するために一緒に働きましょう！「ナゲッツデイリー新プラン・8月アップデートチャレンジ」参加26日目、イベント詳細はこちら

この記事は、TornadoFx フレームワークに基づいて、従来の Java とは異なる Kotlin 言語を使用して Tooltip コンポーネントを説明していますが、参考用です。

導入

マウスをコントロールの上に置くと、プロンプトがポップアップ表示されます。効果は次のとおりです。

使用する

ツールチップは通常、ノードコントロールと組み合わせて使用されます. ここでのノードコントロールは、コントロール内のパッケージjavafx.scene.controlのみです. 詳細については、アドレスをクリックして表示にジャンプできます.

また、現在のウィンドウの指定した位置にツールチップを表示する方法も用意されていますが、オフセットを自分で計算する必要があるのが面倒です。

Tooltip.install(control,tooltip)バインド使用
tooltip.show(window,x,y)ウィンドウとオフセット表示を指定する

PS: tooltip は、直接作成できる Tooltip のオブジェクトを指します。

ジャバで使う

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("这是一段解释说明")
        }

    }
}
复制代码

カスタマイズ

この章には、ツールチップのスタイルのカスタマイズとウィンドウ表示の指定が含まれます

スタイルのカスタマイズ

黒の背景にデフォルトの白のテキストは少し見苦しく、不明瞭に感じることがあります. そのスタイルを調整して、白の背景に黒のテキストに調整できます. コードは次のとおりです:

label("hello") {
    tooltip = tooltip("这是一段解释说明"){
        style {
            backgroundColor += c("white")
            textFill = c("black")
        }
    }
}
复制代码

結果は次のとおりです。

上記のコードから、ツールチップ内のスタイルを実際に変更できます.1 つのケースから推論を引き出すことにより、関連する属性またはスタイルを変更することで、ツールチップのスタイルを調整できます.

label("hello") {
    tooltip = tooltip {

        prefWidth = 200.0
        textAlignment = TextAlignment.LEFT
        isWrapText = true
        style {
            backgroundColor += c("white")
            textFill = c("black")
        }
        isAutoHide = false
        text = "这是一段长文本说明长文本说明这是一段长文本说明长文本说明"
    }
}
复制代码

効果は次のとおりです。

指定ウィンドウ表示

上記のように、Tooltipの使い方には、コントロールにバインドする方法と、指定したウィンドウを使用する方法の2通りありますが、上記の場合、指定したウィンドウを使用する必要があるのでしょうか?

答えは非常に明確です。一部のコントロールはツールチップの直接インストールをサポートしていないため、指定されたウィンドウを表示する方法を使用してフローティングポップアップウィンドウを実現することしかできません。

Text を例に取り、上記のラベルのように記述してみましょう。Text はコントロールパッケージのコンポーネントではないため、ツールチップが直接人気になります。

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()
    }
}
复制代码

上記のコードは、テキストコントロールのマウスインおよびマウスアウトイベントの監視を設定します。マウスが引き込まれるとツールヒントが表示され、マウスが引き出されるとツールヒントが非表示になります。

アイコンにスワイプ

まず、動的効果を見てみましょう

ツールチップが自動的にその位置に移動するのは少し奇妙ですが、特定の理由は見つかりませんでした.

コードも比較的シンプルですが、マウスの出し入れの監視を元にアイコンを変更する操作が追加されていますが、ちょっと引っかかる感じがします. 画像の幅と高さはあまり設定しない方がいいです.大きい。

アイコンはiconfont-Alibaba vector icon libraryから自作して、色だけ変えただけで、写真が2枚あります

PS: 練習するときは、以下に示すように、写真のパスに注意してください。

コードは以下のように表示されます:

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()
    }
}
复制代码

ここでは、フォントライブラリを使用することをお勧めします。これは、より適切に機能し、色をすばやく変更できる可能性があります。

自分自身を宣伝するには、私のオープンソースライブラリTornadofx 研究ノート (4) - IconTextFx オープンソースライブラリ、5000 以上のフォントアイコンを統合 - Stars-one - Blog Parkを参照してください。

次の図は、フォントライブラリを使用して実現したレンダリングです。