1. 程式人生 > >JavaFx---小結(1):謀篇佈局

JavaFx---小結(1):謀篇佈局

最近用javafx寫了幾個小的圖形介面程式,一路磕磕撞撞,寫的時候遇到了不少問題,出去對javafx的不熟悉,一些小問題也讓我通宵達旦地在網上找資料,甚是傷神,所以將這段時間的經驗記錄下來,以便以後查閱,也給大家做一個參考!
現在先來講講佈局中的坑!!!
在做圖形介面的時候,如果一開始就想法兒把各種各樣的控制元件堆在scene(場景)裡,那麼你的介面將會變得一團糟,那為什麼別人做出的介面就這麼整潔,結構清晰呢?這裡面就是佈局的功勞!
那佈局到底是什麼呢?
以前我認為佈局就想一個有容納功能的容器一樣(當然好像也差不多),但是這樣的理解不便於靈活的理解和應用佈局。其實,佈局更像是一種約束方式,是一種結構,它控制在佈局上的控制元件的擺放方式,各個控制元件之間的距離,還有將這些控制元件放在一個什麼樣的背景之上!說白了,佈局就想一隻無形的大手,將各個控制元件安排的明明白白!!!
在javafx中主要有以下幾種佈局方式:

  • VBox
  • HBox
  • GridPane
  • FlowPane
  • BorderPane
  • StackPane

1.VBox

VBox也就是垂直方向的佈局,這樣的佈局就是說加入到這個佈局的控制元件都會一溜兒的垂直排列。就像這樣:
在這裡插入圖片描述
大家別小瞧了這個介面,這個介面看似簡單,確實複雜佈局的基礎。大家在做介面的時候最好先設計一下介面的佈局,對於一個複雜的佈局,我們很難只通過一個佈局就解決問題,而是在佈局裡巢狀佈局,通過這樣的組合和巢狀佈局的方式實現複雜的介面。而相對於整個介面來說,可能是一個VBox佈局裡放了HBox,放了GridPane等佈局,這樣能夠比較方便的實現複雜的佈局。如果你在向介面中新增控制元件時總不能按照你想要的方式進行排列,你可以試試將介面的佈局進行層次分析、設計,將整個佈局劃分為多個佈局,也許就能就覺你的問題了。

2.HBox

其實HBox和VBox差不多,只不過是控制元件排列方式上的差別,就像在wxpython裡,只有一個BoxSizer。HBox的作用和VBox差不多,可以用來作為整個介面的整體佈局,而將其他佈局新增進整體佈局。such as:

整體佈局
如圖所示,在相應的佈局里加入你的控制元件,一個複雜的介面就出來啦!

3.GridPane

在我剛開始接觸佈局時覺得最有用的應該就是網格佈局了吧,可是在使用之後才發現網格佈局存在著太多的限制,用在一些簡單的佈局上倒是不錯。
網格佈局中對每一行每一列都要求有相同的高度和寬度,也就是說你新增進網格佈局的控制元件是真的會像網格一樣整整齊齊地排列在佈局上,就算某個控制元件很小,由於存在較大的控制元件,它所佔的網格也會很大,這樣的佈局實在是太ugly了。就像這樣:

在這裡插入圖片描述
btn4小小的,但是由於btn1大大的,導致它也必須在一個大大大的網格里。
注意:在向網格布中新增控制元件時制定了行列位置,則應該先指定列,再指定行!

4.FlowPane

FlowPane也叫流佈局,其實它有點像HBox(VBox),但是又有點不同,流佈局將控制元件按照加入的次序,根據你指定的方向進行組織,當這個方向上排不下了(由於介面大小的原因等),則會開始新的一個一列或一行。這個我用的比較少,就不往下結論了哈!

5.BorderPane

邊界佈局就是將整個佈局分成了五個部分:上下左右中。
在這裡插入圖片描述

這個佈局我也用的比較少,但是可以發現,這個佈局其實也比較適合於整體佈局,用於控制整個介面的佈局,用於作為佈局的佈局。

5.StackPane

棧佈局,聽名字就知道這個佈局應該是由棧的特性的,也就是隻有放置在頂上的控制元件才會展示出來。

6.佈局中的一些小問題

1.直接將佈局放在場景中時,有時候佈局會緊挨著視窗,這樣可能不太美觀,可以給佈局加上(當然也可以給控制元件加上)Padding 屬性,用來控制佈局與視窗的上下左右的距離。
2.實現透明視窗的方法:

		//依次設定:pane->scene->stage
		//需要的設定如示:
		//該視窗的透明度是0.85
		pane.setStyle("-fx-background:transparent;-fx-background-color: rgba(255,255,255,0.85);" );
		scene.setFill(null);
		stage.initStyle(StageStyle.TRANSPARENT);