javafx实现手机版QQ登录界面

功能介绍: 实现手机版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就是按设置的大小展示。

源码下载