天天看點
傳回

TornadoFx學習筆記（1）——常用的代碼片段

Tornadofx是基于JavaFx的一個kotlin實作的架構

之後看情況補充..

1.讀取resources檔案夾中的檔案

如圖

想要讀取config.properties檔案，有兩種方法

在class檔案中，可以這樣寫

//獲得輸入流
val resourceAsStream = javaClass.classLoader.getResourceAsStream("config.properties")

在MainView.kt檔案，可以這樣寫：

//需要 “/”
val steam = resources.stream("/config.properties")

2.設定視窗的标題、圖示、視窗大小

建立一個resources檔案夾，将此檔案夾設定為resources檔案夾

TornadoFx學習筆記（1）——常用的代碼片段
class MainView : View() {
    override val root = vbox {
		//設定标題
        title = "這是标題"
		//設定圖示
        addStageIcon(Image("img/file.png"))
		//設定視窗大小
		 setPrefSize(500.0, 400.0)
	}
}

開發者推薦寫在

init

方法裡：

class MainView : View() {
	init {
		title = "APK簽名驗證破解工具 by star-sone"
		setStageIcon(Image("img/file.png"))
	}
    override val root = vbox {
		//設定視窗大小
		 setPrefSize(500.0, 400.0)
	}
}

設定标題還可以這樣設定：

class MainView : View("這是标題") {
    override val root = vbox {
		...
	}
}

3.文字與按鈕

文字的常用樣式設定 

text("hello"){
	//設定方向
	alignment = Pos.TOP_CENTER
	style {
		//設定加粗
		fontWeight = FontWeight.BOL
		//字型大小，第二個參數是機關，一個枚舉類型
		fontSize = Dimension(18.0, Dimension.LinearUnits.px)
		//設定顔色，c方法是tornadofx中的提取顔色方法
		fill= c("red")
	}
}

文字按鈕 

override val root = vbox {
	button("按鈕")
}

按鈕點選 

override val root = vbox {
	button("按鈕"){
		//設定最小寬度使用預設，不然會出現省略号
		setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE)
		action{
			println("點選按鈕")
		}
	}
}

圖檔按鈕 

override val root = vbox {
	button(){
		graphic = imageview("img/file.png") {
			//設定大小
			fitHeight = 30.0
			fitWidth = 30.0
                        //設定圖檔按比例縮放,隻設定fitHeight或fitWidth即可有效果
                        isPreserveRatio=true
		}
		setOnAction{
			println("點選按鈕")
		}
	}
}

按鈕樣式 

override val root = vbox {
	button("按鈕"){
		style {
			//設定背景顔色
			backgroundColor += c("#66bef1")
			//設定按鈕文字顔色
			textFill = c("white")
			//粗體
			fontWeight = FontWeight.BOLD
			//字型大小，第二個參數是機關，一個枚舉類型
			fontSize = Dimension(20.0, Dimension.LinearUnits.px)
		}
		setOnAction{
			println("點選按鈕")
		}
	}
}

按鈕設定滑鼠滑過陰影 

jfxbutton("按鈕"){
    setOnMouseEntered { style { backgroundColor += c(0, 0, 0, 0.1) 
    //圓形陰影
    //backgroundRadius += box(20.percent)
    } }
    setOnMouseExited { style {} }
}

4.表單

登入界面 

override val root = vbox {
	form{
		fieldset {
			field("使用者名") {
				textfield()
			}
			field("密碼") {
				passwordfield()
			}
		}
	}	
}
TornadoFx學習筆記（1）——常用的代碼片段

擷取輸入框的數值 

class MainView : View("Hello TornadoFX") {
	//兩種寫法都可以
    var userTf: TextField by singleAssign()
    var passwordTf by singleAssign<TextField>()

	override val root = vbox {
		form{
			fieldset {
				field("使用者名") {
					userTf = textfield()
				}
				field("密碼") {
					passwordTf = passwordfield()
				}
				field(){
					button("登入"){
						println(usetTf.text)//使用者名
						println(passwordTf.text)//密碼
						
						//登入操作...
					}
				}
			}
		}	
}

輸入框取消預設選中

JavaFx中，第一個輸入框TextField會預設被選中，有時候不希望被選中，可以設定

isFocusTraversable = false

，如果希望全部輸入框不被選中，則全部的輸入框都是設定上面的那個屬性

class MainView : View("Hello TornadoFX") {
	//兩種寫法都可以
    var userTf: TextField by singleAssign()
    var passwordTf by singleAssign<TextField>()

	override val root = vbox {
		form{
			fieldset {
				field("使用者名") {
					userTf = textfield(){
						//設定此屬性
						isFocusTraversable = false
					}
				}
				field("密碼") {
					passwordTf = passwordfield()
				}
				field(){
					button("登入"){
						println(usetTf.text)//使用者名
						println(passwordTf.text)//密碼
						
						//登入操作...
					}
				}
			}
		}	
}

表單驗證 

//建立驗證器
val context = ValidationContext()

//需要驗證的控件，一般是對輸入框
val input = TextField()

//驗證是否符合條件，輸入框不能為空
val validator = context.addValidator(input, input.textProperty()) {
	//這裡的it就是代表了該輸入框的數值
	if(it.isNullOrBlank()){
		//輸入框為空，則彈出此資訊
		error("輸入不能為空")
	}else{
		null
	}
}
//傳回是否通過驗證的結果，這裡可以在button按鈕的點選事件觸發
val result = context.validtate()

固定大小的文本

有時候需要固定大小的文本，文字超過此寬度，後面的會以省略号來隐藏，這個時候可以使用Label，不過考慮到使用者友好度，我們可以加個懸浮窗以便使用者可以檢視文本的全部内容

label("hello"){
	prefWidth = 100.0
	//滑鼠懸浮在上面可以顯示提示框
	tooltip = Tooltip(this.text)
}

5.居中 

override val root = vbox {
	hbox{
		alignment = Pos.CENTER
		button("按鈕")
	}
}

我沒有設定hbox大小，所有hbox大小和button高度一樣，實作了水準居中

TornadoFx學習筆記（1）——常用的代碼片段

6.單選框

我這裡用了Kfoenix，jfxradiobutton是Kfoenix中的控件，jfxradiobutton和radiobutton一樣

override val root = vbox {
	togglegroup {
		jfxradiobutton("選項1") {
			isSelected = true
			setOnAction {

			}
		}
		jfxradiobutton("選項2") {
			setOnAction {

			}
		}
		jfxradiobutton("選項3") {
			setOnAction {

			}
		}
	}
}
TornadoFx學習筆記（1）——常用的代碼片段

7.菜單欄 

override val root = vbox {
	menubar {
		menu("幫助") {
			item("關于") {
				//設定點選事件
				setOnAction { 
                        
				}
			}
		}
		menu("檔案"){
			
		}
	}
	...
}
TornadoFx學習筆記（1）——常用的代碼片段

8.打開新視窗

内部視窗 

button("Open editor") {
	action {
		openInternalWindow(Editor::class)
	}
}

新視窗 

find(AboutView::class).openModal()

9.View傳遞資料

10.顯示隐藏

比如有一個按鈕預設是禁用的，隻有當某個單選框被選中的時候，，這個按鈕才會啟用

val radiobutton = radiobutton(){
	
}

button{
	disable{
		radiobutton.isSelected
	}
}

11.實時視圖

由于是使用kotlin來開發界面，所有，沒有像之前那樣使用fxml可以直接預覽界面，但是，開發提供了一個實時視圖，友善我們在debug模式可以快速看到界面，無需重新開機應用程式

配置

有兩種配置方式

1.MyApp中添加如下代碼

class MyApp: App(MainView::class,Styles::class){
    init {
        reloadViewsOnFocus()
    }
}

2.在debug配置中添加一個參數

--alive-views
TornadoFx學習筆記（1）——常用的代碼片段
TornadoFx學習筆記（1）——常用的代碼片段

使用

修改View，之後按下Ctrl+F9，等待重載完成，應用的界面就會發生變化

TornadoFx學習筆記（1）——常用的代碼片段

PS：同理還有個

--live-stylesheets

參數（對應reloadStylesheetsOnFocus方法），用來開啟樣式的熱更新

12.css樣式

内聯樣式 

override val root = vbox {
	button{
	   style { 
		   backgroundColor += c("blue")
	   } 
	}
}

定義css檔案 

package com.wan.noveldownloader.app

import javafx.scene.text.FontWeight
import tornadofx.*

class Styles : Stylesheet() {
    companion object {
        val MyTab by cssclass()
    }

    init {
        
        MyTab{
            backgroundColor += c("#64b7ea")
			//僞标簽，懸浮
            and(hover){
                backgroundColor+=c("#6495ED")
            }

        }
    }
}

使用addClass方法添加

button{
	addClass(Styles.MyTab)
}

13.單選框 RadioButton

點選按鈕輸出選中的radioButton的userData資料

PS：userData可以是任意類型

import javafx.scene.control.ToggleGroup
import tornadofx.*

class TestView : View("My View") {
    var toggle by singleAssign<ToggleGroup>()
    override val root = vbox {
        toggle = togglegroup {
            radiobutton("是") {
                userData = 0
            }
            radiobutton("否") {
                isSelected = true
                userData = 1
            }
        }
        button {
            action {
                //輸出選中button的userData資料
                println(toggle.selectedToggle.userData)
            }
        }
    }
}

提問之前，請先看提問須知

點選右側圖示發起提問

TornadoFx學習筆記（1）——常用的代碼片段

或者加入QQ群一起學習

TornadoFx學習筆記（1）——常用的代碼片段

TornadoFx學習交流群:1071184701

TornadoFx學習筆記（1）——常用的代碼片段
TornadoFx學習筆記（1）——常用的代碼片段
上一篇: 2017 從上到下列印樹新解法
下一篇: Git請求合并說明