javafx布局类HBox和VBox

HBox

HBox中的H是Horizontal的首字母,意为水平的。HBox即水平的布局,将组件按水平方向依次排列。

代码

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class TestHBoxVBox extends Application{

	public static void main(String[] args) {
		launch();
	}
	public void start(Stage primaryStage) throws Exception {
		Button button=new Button ("button");
		button.setFont(Font.font(20));

		HBox hbox=new HBox();
		hbox.getChildren().add(button);
		hbox.getChildren().add(new Button ("button1"));
		hbox.getChildren().add(new Button ("button2"));
		hbox.setStyle("-fx-background-color:#66ccff");

		Scene scene=new Scene(hbox);
		primaryStage.setScene(scene);
		primaryStage.setWidth(400);
		primaryStage.setHeight(400);
		primaryStage.show();
	}

}


效果

在这里插入图片描述

组件放入HBox后将被托管,此时设置组件位置将无效,例如:

		button.setLayoutX(100);
		button.setLayoutY(100);

在这里插入图片描述

设置外边距(与父组件间的距离)

		//外边距
		hbox.setPadding(new Insets(10))
		//hbox.setPadding(new Insets(10,20,10,10));//将窗口缩小可以看出

在这里插入图片描述

设置组某个子组件外边距

		//设置组某个子组件外边距
		hbox.setMargin(button, new Insets(10));

在这里插入图片描述

设置内边距(各个子组件间的距离)

		//内边距
		hbox.setSpacing(10);

在这里插入图片描述

设置对齐方式(子组件间距离保持不变)

		//对齐方式
		hbox.setAlignment(Pos.CENTER);

在这里插入图片描述

VBox

VBox中的V是Vertical的首字母,意为垂直的。VBox即垂直的布局,将组件按竖直方向依次排列。
其它属性与HBox大体相同。

代码

创建一个VBox ,把它作为一个组件放入hbox中。

		VBox vbox=new VBox();
		vbox.getChildren().add(new Button ("button3"));
		vbox.getChildren().add(new Button ("button4"));
		vbox.getChildren().add(new Button ("button5"));
		
		hbox.getChildren().add(vbox);

在这里插入图片描述

hbox已设置居中,但看到的vbox却跑在了上面。
不妨设置一下vbox背景颜色看一看。

	vbox.setStyle("-fx-background-color:#00ffff");

在这里插入图片描述
可以看出vbox适应父组件的高度和子组件的宽度,其实许多布局容器都有类似效果。
不难想到,若要按钮3,4,5居中只需要设置vbox对齐方式就行了。

	vbox.setAlignment(Pos.CENTER);

在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值