【javaFX學習】（二） 面板手冊

 移至http://blog.csdn.net/qq_37837828/article/details/78732591 更新

找了好幾個資料，沒找到自己想要的，自己整理下吧，方便以后用的時候挑選，邊學邊記。以學習筆記為主，所以會寫的會偏個人記憶性。非教程，有什么問題一起討論啊。

各個不同的控件放入不同的面板中有不同的效果，挨個開擼。這里可以把面板當作容器來理解，就是裝各種東西的，容器裝容器、裝控件等等。

面板列表:

Accordion　　　　

　　　　手風琴面板：就是一個折疊展開功能,一般與TitledPane一起用）　　　

AnchorPane　　   

　　　　相對位置控制面板：錨布局：可以設置容器里面的控件的各種相對位置,主要用於界面大小改變而控件相對位置不變的情況

BorderPane　　　

　　　　區域面板：划分為了5個區域：上、下、左、右、中

FlowPane　　　　

　　　　流面板：會隨着界面大小而改變控件布局

GridPane　　　　

　　　　網格面板 ：面板中的控件可以設置按網格坐標分布,就當作一個棋盤吧，控件就是棋子，指哪放哪

HBox　　　　　　

　　　　水平排列面板：顧名思義，水平排列，與垂直排列VBox對應

Pane　　　　　　

　　　　所有面板的爸爸：當作java的Object來理解就好了

ScrollPane　　　

　　　　滾動面板：瞄一眼你的網頁右邊有沒有一個滾動條→_→,注意滾動面板里面只能放一個元素，所以一般是把需要的控件都裝到一個其他面板里面，再把那個叫其他的面板扔到這個滾動面板里面-_-

SplitPane　　　  

　　　　分割面板：里面存放的其他面板可以自由拖動大小)

StackPane　　　

　　　　層級面板：放入進StackPane的子模塊會根據放入順序的不同形成不同的層級關系.

TabPane

　　　　標簽面板: 用來放標簽　

TilePane

　　　　片面板: 就是特殊的流面板，里面每個元素的網格大小都是相同的，測試發現取最大的，詳見示例

TitledPane

　　　　標題面板：用法見Accordion　

VBox

　　　　豎直面板：用法見HBox示例

 

Accordion(折疊面板):

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Button;
import javafx.scene.control.ListView;
import javafx.scene.control.TitledPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{

        //創建標題面板1
        TitledPane titledPane1 = new TitledPane("title1",new Button("按鈕1"));

        //創建一個列表控件
        ListView<String> listView = new ListView<>();
        ObservableList<String> ob = FXCollections.observableArrayList();
        ob.addAll("一","二","三");
        listView.setItems(ob);

        //創建標題面板2
        TitledPane titledPane2 = new TitledPane("title2",listView);

        //創建折疊面板
        Accordion accordion = new Accordion();

        //將標題面板添加到折疊面板中
        accordion.getPanes().addAll(titledPane1,titledPane2);

        primaryStage.setScene(new Scene(accordion, 300, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

 

AnchorPane(控件位置控制面板):

 

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個anchorPane面板,
        AnchorPane anchorPane = new AnchorPane();

        //創建按鈕控件
        Button button1 = new Button("靠右按鈕");
        Button button2 = new Button("靠左按鈕");
        Button button3 = new Button("靠下按鈕");

        //將按鈕控件添加入面板(容器)
        anchorPane.getChildren().addAll(button1,button2,button3);

        //設置邊距為
        AnchorPane.setRightAnchor(button1, 10.0);//設置右邊距為10
        AnchorPane.setLeftAnchor(button2,10.0);//左
        AnchorPane.setBottomAnchor(button3,10.0);//下

        primaryStage.setScene(new Scene(anchorPane, 300, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

 BorderPane:區域面板，將界面划分為了5個區域

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個區域控制面板
        BorderPane borderPane = new BorderPane();

        //創建5個按鈕，洗凈，備用
        Button button1 = new Button("左按鈕");
        Button button2 = new Button("右按鈕");
        Button button3 = new Button("上按鈕");
        Button button4 = new Button("下按鈕");
        Button button5 = new Button("中按鈕");

        //將按鈕放入相應區域
        borderPane.setLeft(button1);
        borderPane.setRight(button2);
        borderPane.setTop(button3);
        borderPane.setBottom(button4);
        borderPane.setCenter(button5);


        primaryStage.setScene(new Scene(borderPane, 300, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

 FlowPane(流面板):

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個流面板
        FlowPane flowPane = new FlowPane();

        //創建一堆按鈕或其他什么東西
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");
        Button button4 = new Button("button4");
        Button button5 = new Button("button5");
        Button button6 = new Button("button6");

        //把按鈕都扔進去
        flowPane.getChildren().addAll(button1,button2,button3,button4,button5,button6);

        primaryStage.setScene(new Scene(flowPane, 400, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

GridPane(網格布局):

 創建6個按鈕，前3個放第一行，后3個放第二行

 

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個網格面板
        GridPane gridPane = new GridPane();

        //創建一堆按鈕或其他什么東西
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");
        Button button4 = new Button("button4");
        Button button5 = new Button("button5");
        Button button6 = new Button("button6");

        //把按鈕按照網格坐標扔進去
        gridPane.add(button1,0,0);
        gridPane.add(button2,0,1);
        gridPane.add(button3,0,2);
        gridPane.add(button4,1,0);
        gridPane.add(button5,1,1);
        gridPane.add(button6,1,2);

        primaryStage.setScene(new Scene(gridPane, 400, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

 HBox(水平排列)

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個水平排列面板
        HBox hBox = new HBox();

        //創建一堆按鈕或其他什么東西
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");
        Button button4 = new Button("button4");
        Button button5 = new Button("button5");
        Button button6 = new Button("button6");

        //把按鈕扔進去
        hBox.getChildren().addAll(button1,button2,button3,button4,button5,button6);

        //設置一下各個按鈕的間隔。
        hBox.setSpacing(10.0);

        primaryStage.setScene(new Scene(hBox, 500, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

 Pane:

由於是所有面板的"父類",所以不具備其他面板已經設置好的的布局屬性，故而加進去的控件要記得自己設置在面板中的坐標，否則就會擠在一堆，像這樣：

設置一下控件的坐標:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個面板
        Pane pane = new Pane();

        //創建一堆按鈕或其他什么東西
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");
        Button button4 = new Button("button4");
        Button button5 = new Button("button5");
        Button button6 = new Button("button6");

        //設置按鈕在控件中的坐標
        button1.setLayoutX(50);button1.setLayoutY(50);
        button2.setLayoutX(200);button2.setLayoutY(50);
        button3.setLayoutX(350);button3.setLayoutY(50);
        button4.setLayoutX(50);button4.setLayoutY(100);
        button5.setLayoutX(200);button5.setLayoutY(100);
        button6.setLayoutX(350);button6.setLayoutY(100);

        //把按鈕扔進去
        pane.getChildren().addAll(button1,button2,button3,button4,button5,button6);

        primaryStage.setScene(new Scene(pane, 500, 275));
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

 

 ScrollPane(滾動面板):

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個滾動面板
        ScrollPane scrollPane = new ScrollPane();

        //創建一個水平排列面板,用來裝按鈕，如果想測試垂直滾動，就換成垂直排列面板
        HBox hBox = new HBox();

        //創建一堆按鈕或其他什么東西
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        Button button3 = new Button("button3");
        Button button4 = new Button("button4");
        Button button5 = new Button("button5");
        Button button6 = new Button("button6");

        //把按鈕放在行面板里面
        hBox.getChildren().addAll(button1,button2,button3,button4,button5,button6);
        //為了少裝幾個東西而出現滾動條，我們把按鈕間隔設大一點
        hBox.setSpacing(50);

        //把行面板放到滾動面板里面
        scrollPane.setContent(hBox);

        primaryStage.setScene(new Scene(scrollPane, 500, 275));
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

 SplitPane(分割面板):

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個滾動面板
        SplitPane splitPane = new SplitPane();

        //創建兩個普通面板
        Pane pane1 = new Pane(new Button("左邊的面板"));
        Pane pane2 = new Pane(new Button("右邊的面板"));

        //添加到滾動面板中
        splitPane.getItems().addAll(pane1,pane2);

        primaryStage.setScene(new Scene(splitPane, 500, 275));
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

 

 StackPane(層級面板):

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        //創建一個層級面板
        StackPane stack = new StackPane();

        //創建一個普通面板,並設置背景為黑色
        Pane pane = new Pane();
        pane.setBackground(new Background(new BackgroundFill(Color.BLACK,null,null)));

        //創建一個按鈕
        Button button = new Button("按鈕2");

        //將按鈕和普通面板添加到stackPane面板中
        //stack.getChildren().addAll(pane,button);
        stack.getChildren().addAll(button,pane);

        primaryStage.setScene(new Scene(stack, 300, 275));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

如圖所示，先添加pane時，pane在下面，按鈕在pane的上面；先添加button時，button在下面，pane在上面，所以將button蓋住了。

 TabPane(標簽面板):

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {


        //創建一個標簽面板
        TabPane tabPane = new TabPane();

        //創建兩個標簽，放入標簽面板
        Tab tab1 = new Tab("表1");
        Tab tab2 = new Tab("表2");
        tabPane.getTabs().addAll(tab1,tab2);

        primaryStage.setScene(new Scene(tabPane, 300, 275));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

 

 TilePane(片面板):

特殊的流面板，里面的元素都在網格中，每個網格大小相同，默認取最大的網格大小.例如下面把按鈕1設成100寬，則所有的網格都變成了100寬

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {


        //創建片面板
        TilePane tilePane = new TilePane();

        Button button1 = new Button("按鈕1");
        button1.setPrefWidth(100);
        Button button2 = new Button("按鈕2");
        Button button3 = new Button("按鈕3");
        Button button4 = new Button("按鈕4");
        Button button5 = new Button("按鈕5");
        Button button6 = new Button("按鈕6");

        tilePane.getChildren().addAll(button1,button2,button3,button4,button5,button6);


        primaryStage.setScene(new Scene(tilePane, 300, 275));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}