2. 程式人生 > >JavaFX入門（四）：JavaFX佈局（一）

JavaFX入門（四）：JavaFX佈局（一）

阿新 • • 發佈：2019-02-03

說道GUI程式設計一定要談到佈局，JavaFX內建了大量的佈局控制元件提供給我們使用。其實，JavaFX的佈局控制元件和介面元素控制元件都是繼承自javafx.scene.layout.Region類。我們這裡只看佈局控制元件類。佈局控制元件我們在介面上一般是看不到的，它一個容器用於放置其它可視的介面元素控制元件。（JavaFX線上API文件：JavaFX8 API Online）
JavaFX佈局控制元件的類圖如下：
佈局類

下面簡單說說一些常用控制元件類的用法。這裡我們使用SceneBuilder進行介面的設計，SceneBuilder可以在Gluon下載。SceneBuilder的介面如下，我們可以簡單使用拖拽的方法進行介面設計。
SceneBuilder

1. Pane

Pane是其它佈局控制元件類的父類，我們可以將Pane看成一個絕對佈局控制元件，當我們將某個控制元件放置在Pane當中的時候，我們需要指定它的位置座標（layoutX和layoutY）。當我們將一個控制元件拖拽到Pane中的時候，會自動生成layoutX和layoutY座標。如圖是使用Pane為父容器設計的一個簡單介面：
Pane類
FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
 

<?import javafx.scene.layout.*?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="350.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="318.0" layoutY="210.0"
 
 mnemonicParsing="false" text="登入" />
      <Label layoutX="136.0" layoutY="104.0" text="使用者名稱：" />
      <Label layoutX="136.0" layoutY="162.0" text="密 碼：" />
      <TextField layoutX="212.0" layoutY="100.0" />
      <PasswordField layoutX="212.0" layoutY="158.0" />
   </children>
</Pane>

2. BorderPane

BorderPane將介面分割上上下左右中5部分，我們可以將控制元件放置在其中。常見的一個用例場景就是，軟體主介面的上面是選單欄和工具條，左邊和右邊可能是文件或者內容列表或者常用的工具集合，然後中間是主要內容顯示區，下面是狀態列。
在SceneBuilder中我們將一個控制元件拖拽到BorderPane的時候，會有上下左右中的區域顯示。
BorderPane
我們在這5個區域放置5個標籤，如下圖：
BorderPane
FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="上" BorderPane.alignment="CENTER" />
   </top>
   <left>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="左" BorderPane.alignment="CENTER" />
   </left>
   <right>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="右" BorderPane.alignment="CENTER" />
   </right>
   <center>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="中" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="下" BorderPane.alignment="CENTER" />
   </bottom>
</BorderPane>

該FXML程式碼中我們設定了字型，讓顯示更大一些。在後面我們將使用CSS樣式進行字型顏色等樣式的設定。

3. HBox

HBox可以水平排列控制元件，不換行。如圖：
HBox
FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="50.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button1" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button2" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button3" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button4" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button5" />
   </children>
</HBox>

4. VBox

VBox類似的，垂直排列控制元件，不換列。如圖：
VBox
FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="300.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button1" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button2" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button3" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button4" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button5" />
   </children>
</VBox>

5. FlowPane

FlowPane感覺像HBox和VBox的綜合體，FlowPane可以設定一個方向水平或者垂直。預設方向為水平，那麼放入FlowPane中的控制元件會先水平排列，如果第一行滿了以後進入下一行繼續水平排列。垂直方向類似的，先垂直排列，如果第一列滿了以後進入第二列繼續垂直排列。如圖：
FlowPane
可以看到水平方向上滿了以後，進入到下一行排列。
FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<FlowPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" prefHeight="149.0" prefWidth="55.0" text="Button" />
      <Button mnemonicParsing="false" text="Button" />
      <Button mnemonicParsing="false" prefHeight="125.0" prefWidth="100.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="71.0" prefWidth="55.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="97.0" prefWidth="102.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="112.0" prefWidth="213.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="52.0" prefWidth="104.0" text="Button" />
   </children>
</FlowPane>

6. GridPane

GridPane有點像HTML中的Table佈局，屬於比較靈活的佈局方式。預設情況下，控制元件均勻分佈在Grid或者說Table中。但是我們可以指定一個控制元件所佔的行列，讓其跨行和列分佈。當我們將一個元素拖拽到GridPane中的時候可以看到SceneBuilder為我們虛擬除了行和列的分割線：
GridPane
最後設計的介面如圖所示：
GridPane
FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="80.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="180.0" prefWidth="55.0" text="Button" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="80.0" text="Button" GridPane.rowIndex="1" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="521.0" text="Button" GridPane.columnSpan="2" GridPane.rowIndex="2" />
   </children>
</GridPane>

7. AnchorPane

AnchorPane可以設定一個控制元件的Anchor位置，感覺NET的GUI控制元件中最早提供這種控制元件的。比如說我們要將一個Button放置在左下角，離右邊100px，離下邊100px的位置，我們便可以使用AnchorPane控制元件。當視窗放大縮小的時候，該Button始終在左下角離右邊100px，離下邊100px的位置。通俗地說，AnchorPane可以將控制元件錨定到佈局面板的某個位置。
在SceneBuilder中我們可以很容易在右邊的屬性面板中設定錨定的方位和距離：
SceneBuilder
比如我們在左上角和右下角放置兩個Button，如圖：
AnchorPane
當我們調整窗體的大小的時候，錨定位置是不會變的。
AnchorPane
生成的FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="174.0" layoutY="177.0" mnemonicParsing="false" text="右下" AnchorPane.bottomAnchor="100.0" AnchorPane.rightAnchor="100.0" />
      <Button layoutX="106.0" layoutY="63.0" mnemonicParsing="false" text="左上" AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="100.0" />
   </children>
</AnchorPane>

8. ScrollPane

ScrollPane顧名思義就是可以顯示滾動條的容器控制元件了。
我們在ScrollPane中放置一個TextArea文字域控制元件，並且設定TextArea的大小大於ScrollPane的大小，這樣就可以顯示出水平和垂直滾動條了。如下圖：
ScrollPane
FXML程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.web.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<ScrollPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <content>
      <TextArea prefHeight="600.0" prefWidth="500.0" />
   </content>
</ScrollPane>

這一節我們說了一些常見的JavaFX佈局容器或者叫佈局控制元件，當然JavaFX還提供了很多其它的佈局控制元件。不過使用這一節常用的佈局就可以設計出常見的GUI介面了。
在我們用SceneBuilder設計介面的時候，自動生成的FXML檔案中的實體元素和屬性是和JavaFX中的類和屬性是對應的，我們可以通過FXML瞭解對應類的一些屬性和方法。

相關推薦

從零開始搭建物聯網平臺（5）：搭建後臺服務(一）

資料庫的設計： 後臺使用Django web框架實現，Django和python怎麼用就不介紹了，東西太多了，看完下面的這些部落格就可以了，差不多就夠了https://www.cnblogs.com/wupeiqi/articles/4938499.html 資料庫設計： &

JavaFX入門（四）：JavaFX佈局（一）

說道GUI程式設計一定要談到佈局，JavaFX內建了大量的佈局控制元件提供給我們使用。其實，JavaFX的佈局控制元件和介面元素控制元件都是繼承自javafx.scene.layout.Region類。我們這裡只看佈局控制元件類。佈局控制元件我們在介面上一般是看

JavaFx---小結（1）：謀篇佈局

最近用javafx寫了幾個小的圖形介面程式，一路磕磕撞撞，寫的時候遇到了不少問題，出去對javafx的不熟悉，一些小問題也讓我通宵達旦地在網上找資料，甚是傷神，所以將這段時間的經驗記錄下來，以便以後查閱，也給大家做一個參考！ 現在先來講講佈局中的坑！！！ 在做圖形介面的時候，如果一開始就

移動端二三事【四】：陀螺儀（重力感應器）實現手機位置、加速度感應以及常見應用。

效果 防止 size tro 通過 select 代碼 陀螺儀 prime 首先說明一下：陀螺儀感應需在真機環境下進行調試，PC端無效果。 1.獲取感應器 需在window上監聽devicemotion事件，再通過事件對象獲取accelerationIncludingG

Spring Boot快速入門（五）：使用MyBatis（註解形式）進行數據庫操作

訪問 ins name ont clas assert xxx main apach 原文地址：https://lierabbit.cn/articles/7 添加依賴 新建項目選擇web,MyBatis,MySQL三個依賴 對於已存在的項目可以在bulid.gradle

學習 WebService 第四步：利用WSDL（URL）生成WebService客戶端<初級>

SM documents eight 生成 web gen get JD OS 我用的是最簡單的方法，利用jdk的命令wsimport -keep -p 包路徑 -d 代碼存放位置 WSDL網址 藍色是命令，粉色是存放位置，橘色是URL C:\Program Files\

RabbitMQ學習第四記：路由模式（direct）

exceptio 指定 手動 ack key static ech 保存日誌 sta 1、什麽是路由模式（direct） 　　路由模式是在使用交換機的同時，生產者指定路由發送數據，消費者綁定路由接受數據。與發布/訂閱模式不同的是，發布/訂閱模式只要是綁定了交換機的隊列都會收

zookeeper（四）：核心原理（Watcher、事件和狀態）

ted sso 兩個 reat exist 這一 通過 投票 children zookeeper主要是為了統一分布式系統中各個節點的工作狀態，在資源沖突的情況下協調提供節點資源搶占，提供給每個節點了解整個集群所處狀態的途徑。這一切的實現都依賴於zookeeper中的事件監

安卓介面基礎知識總結（二）：RelativeLayout佈局的常見屬性

1.android:layout_above="@id/xxx"  --將控制元件置於給定ID控制元件之上   android:layout_below="@id/xxx"  --將控制元件置於給定ID控制元件之下 2.android:layout_marginLe

安卓介面基礎知識總結（一）：LinearLayout佈局的常見屬性

之前做專案都是用到了才會查詢自己所需的，沒有系統總結一下，也沒有特意去記，面試的時候被問到了居然不知道，-_-|| 決定開始系統總結一下： 1. android:orientation:設定線性佈局是水平還是豎直排列，可能選項如下： 1)vertical,豎直 2)horizontal，水

《SQL入門經典》筆記（第一章：歡迎進入SQL世界）

想刷刷書，順便做個筆記~ 下列內容大部分都是直接抄書，侵刪 1. 什麼是ANSI SQL？ “美國國家標準化組織（ANSI）是一個核準多種行業標準的組織”。1987年，ISO吧ANSI SQL作為國標標準，目前最新的標準是SQL-2008。   2. SQL-2008:

javaweb學習筆記（四）：會話管理（1）

目錄 會話管理 1.概念 2.cookie技術 2.1 Cookie一般處理流程 2.2 Cookie類 會話管理 1.概念 一次會話： 開啟瀏覽器 -> 訪問一些伺服器內容 -> 關閉瀏覽器。（瀏覽器A給伺服器傳送請求，訪問web程式，該次會話就

資料結構實現（四）：迴圈佇列（C++版）

資料結構實現（四）：迴圈佇列（C++版） 1. 概念及基本框架 2. 基本操作程式實現 2.1 入隊操作 2.2 出隊操作 2.3 查詢操作 2.4 其他操作 3. 演算法複雜度分析 3.1 入

OGC入門學習專欄-1：OGC簡介（持續更新）

宣告 本篇簡介的內容來源於OGC官網的英文文件，筆者將其翻譯為中文，方便大家閱讀。如果有不準確或錯誤的地方，歡迎大家在下方留言指正。 OGC官網首頁：http://www.opengeospatial.org/ OGC標準（英文）：http://www.openg

第四章：CSS樣式（後篇）

文章目錄 第一節：CSS權重 ==什麼是CSS權重？== ==權重等級== 第二節：文字操作 ==字型 font== ==文字 text== 第三

Spring Cloud Stream消費失敗後的處理策略（四）：重新入隊（RabbitMQ）

應用場景 之前我們已經通過《Spring Cloud Stream消費失敗後的處理策略（一）：自動重試》一文介紹了Spring Cloud Stream預設的訊息重試功能。本文將介紹RabbitMQ的binder提供的另外一種重試功能：重新入隊。 動手試試 準備一個會消費失敗的例子，可以直接沿用前文的工

SpringCloud（四）：服務消費（Feign）

一、Feign介紹 Feign是一個宣告式的偽Http客戶端，它使得寫Http客戶端變得更簡單。使用Feign，只需要建立一個介面並註解。它具有可插拔的註解特性，可使用Feign 註解和JAX-RS註解。Feign支援可插拔的編碼器和解碼器。Feign預設集成了Ribbon，

PowerBI開發 第十四篇：DAX 表示式（時間+過濾+關係）

DAX表示式中包含時間關係（Time Intelligence）相關的函式，用於對日期維度進行累加、同比和環比等分析。PowerBI能夠建立關係，通過過濾器來對影響互動的上下文。 一，時間關係 DAX表示式有兩種方式計算累加和，TOTALxTD()是DATESxTD()的語法糖，使得PowerBI對累加和

JavaWeb學習總結（四）：Servlet開發（二）

一、ServletConfig講解 1.1、配置Servlet初始化引數 　　在Servlet的配置檔案web.xml中，可以使用一個或多個<init-param>標籤為servlet配置一些初始化引數。 例如： 1 <servlet&g

Akka併發程式設計——第四節：Actor模型（三）

本將主要內容： 1. Actor引用、Actor路徑 1. Actor引用、Actor路徑 下圖是Akka官方文件中給出的一張圖 該圖清晰地說明了ActorPath，ActorRef，Actor及ActorSystem之間的關係，並說明了Actor整