功能介绍: 实现手机版QQ登录界面。
在线运行:
功能实现思路: 该QQ登陆界面主要使用的是GridPane布局，因为GridPane能很方便的把任意一个控件放到你想的地方，并且控制你的布局。
QQLogin类继承VBox，因为分成了2个GridPane， 使用VBox很放便的上下布局，并且能设置自动填充空白处。
效果图:
核心代码:
public void initLoginPane(){ StackPane picture = new StackPane(); ImageView image1 = new ImageView(new Image(getClass().getResourceAsStream("img/faceback.png"))); ImageView image2 = new ImageView(new Image(getClass().getResourceAsStream("img/h001.png"))); image2.setTranslateX(-7); image2.setTranslateY(-9); picture.getChildren().addAll(image1,image2); ComboBox account = new ComboBox(); account.setMinHeight(35); account.setPromptText("输入账号"); account.setEditable(true); account.prefWidthProperty().bind(this.widthProperty().multiply(0.7)); PasswordField password = new PasswordField(); password.prefWidthProperty().bind(this.widthProperty().multiply(0.7)); password.setMinHeight(35); password.setPromptText("输入密码"); CheckBox c1 = new CheckBox("记住密码"); c1.setStyle("-fx-text-fill:#000"); c1.setFont(new Font(15)); c1.setMinHeight(30); c1.prefWidthProperty().bind(this.widthProperty().multiply(0.3)); Button b1 = new Button("登陆"); b1.setFont(new Font(15)); b1.setPrefWidth(80); b1.setStyle("-fx-border-radius:2"); GridPane.setHalignment(b1, HPos.RIGHT); GridPane.setMargin(b1, new Insets(0, 0, 0, 1)); loginPane.setHgap(10); loginPane.setVgap(10); loginPane.add(picture, 0, 0, 1, 2); loginPane.add(account, 1, 0); loginPane.add(password, 1, 1); loginPane.add(c1, 0, 2); loginPane.add(b1, 1, 2); loginPane.setId("loginPane"); loginPane.setMinHeight(170); Reflection ref = new Reflection(); ref.setFraction(0.1); ref.setTopOpacity(0.1); ref.setTopOffset(5); loginPane.setEffect(ref); getChildren().add(loginPane); } 代码说明: 第0,0存放了2副图片，使用StackPane布局，因为StackPane是堆栈布局，我希望把二副图片叠加在一起。但是StackPane是默认控件放在中间，子节点的布局由父类控制，所以我要移动图片只能够设置translate。你可以使用SceneView，去调节你的位置。
其中设置字体颜色.setStyle("-fx-text-fill:#000");
设置字体大小.setFont(new Font(15));
调节button的形状变成圆状：.setStyle("-fx-border-radius:2");
调节背景的形状变成圆状：-fx-background-radius:7;
对于GridPane布局，它所展示的大小，是你控件的大小，再加上Hgap或Vgap。如你设置gridPand大小100，但是你一行的二个最大column中的控件都是20，那么展示的时候就只有40。所以针对Grid布局的时候，若你想它展示宽度和设置宽度一样的话，那么你需要设置最大的控件的宽度。如上面我设置account占70%，c1占30%，这样GridPane就是按设置的大小展示。