首页 > 其他分享 >BorderPane边框布局

BorderPane边框布局

时间:2024-06-22 17:09:28浏览次数:23  
标签:Button 布局 borderPane 边框 BorderPane 区域 设置 new

JavaFX 的 BorderPane 是一种布局方式,它将容器分为五个区域:顶部(top)、底部(bottom)、左侧(left)、右侧(right)和中心(center)。每个区域可以放置一个节点,中心区域可以放置任意类型的节点,而其他四个区域通常放置较小的控件或组件。

以下是 BorderPane 的一些基本用法:

  1. 区域设置:使用 setTopsetBottomsetLeftsetRightsetCenter 方法来设置各个区域的节点。

  2. 对齐方式:虽然 BorderPane 本身不支持对齐方式的设置,但你可以通过在各个区域中使用其他布局(如 HBoxVBox)来实现对齐。

  3. 填充和边距:可以为 BorderPane 设置填充(padding)和边距(margin),以控制内容与边框之间的空间。

  4. 权重BorderPane 没有权重的概念,每个区域的大小完全取决于其子节点的大小。

下面是一个 BorderPane 的使用案例,演示了如何使用 BorderPane 来创建一个简单的应用程序界面:

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

public class BorderPaneDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 BorderPane 实例
        BorderPane borderPane = new BorderPane();

        // 创建按钮并设置文本
        Button topButton = new Button("Top");
        Button bottomButton = new Button("Bottom");
        Button leftButton = new Button("Left");
        Button rightButton = new Button("Right");
        Button centerButton = new Button("Center");

        // 设置按钮到 BorderPane 的对应区域
        borderPane.setTop(topButton);
        borderPane.setBottom(bottomButton);
        borderPane.setLeft(leftButton);
        borderPane.setRight(rightButton);
        borderPane.setCenter(centerButton);

        // 创建场景并设置 BorderPane
        Scene scene = new Scene(borderPane, 400, 300); // 设置场景的宽度和高度

        // 设置舞台并显示
        primaryStage.setScene(scene);
        primaryStage.setTitle("BorderPane Demo");
        primaryStage.show();
    }

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

在这个例子中,我们创建了一个 BorderPane,并为顶部、底部、左侧、右侧和中心区域分别添加了一个按钮。然后,我们创建了一个场景并将 BorderPane 设置为场景的内容。最后,我们设置了舞台的标题并显示了舞台。

运行这个程序,你会看到一个窗口,其中包含五个按钮,分别位于 BorderPane 的不同区域。这种布局非常适合创建具有清晰结构的应用程序界面。

标签:Button,布局,borderPane,边框,BorderPane,区域,设置,new
From: https://www.cnblogs.com/zllw946/p/18262517

相关文章

  • 第二讲 常见布局及控件
    第二讲常见布局及控件一.RelativeLayout格式:android:layout_二.线性布局 layout_width不要设置wrap_content没有用layout_weight是每个控件占权重线性布局默认水平显示选择题:1.在下列选项中,用于给Activity指定主题的属性是(C)A、iconB、labelC、themeD、style分......
  • qt开发-08_layout 布局
    Qt提供了非常丰富的布局类,基本布局管理类包括:QBoxLayout、QGridLayout、QFormLayout和QStackedLayout。这些类都从QLayout继承而来,它们都来源于QObject(而不是QWidget)。创建更加复杂的布局,可以让它们彼此嵌套完成。其中QBoxLayout提供了水平和垂直的布局管理;QFormLa......
  • fyne的VBox布局
    fyne的VBox布局最常用的布局是layout.BoxLayout,它有两种变体,水平和垂直。box布局将所有元素排列在单行或单列中,并带有可选的空格以帮助对齐。一步一步实现一个如下界面布局,这个界面可以使用VBox布局来实现。代码1packagemainimport( "fyne.io/fyne/v2" "fyne.io/......
  • fyne的border布局02
    border布局02边框布局可能是最广泛用于构建用户界面的布局,因为它允许将项目定位在中心元素周围,而中心元素将扩展以填充空间。实现如下一个界面布局:实现代码如下:packagemainimport( "edgevpndemo/resources" "fyne.io/fyne/v2" "fyne.io/fyne/v2/app" "fyne.i......
  • 【vue】可视化大屏实现固定比例布局(不错位)
    背景最初方案是使用dataV中的大屏自适应组件,后续发现dataV在不同显示器分辨率下的效果会不一致导致图表内容错位等问题;后续查找资料重新写自适应。组件封装resizeMixin.js//*默认缩放值constscale={width:'1',height:'1',};//*设计稿尺寸(px)cons......
  • Web应用课 2.4 CSS——flex、响应式布局
    flex布局主轴方向flex-directionCSSflex-direction属性指定了内部元素是如何在flex容器中布局的,定义了主轴的方向(正方向或反方向)。/*文本排成行的方向*/flex-direction:row;/*类似于<row>,但方向相反*/flex-direction:row-reverse;/*文本排成列的方向*/f......
  • 以前功能正常的代码突然出现布局问题
    我的网站使用相同的CSS文件已超过十年,从未出现过任何问题,但大约24小时前,我的网站布局出现了乱码,尽管我只是为我试图用于大写字母的新图片添加了一个单独的类,迄今为止我只在一个页面上进行了测试,但整个网站(每个页面)都出现了乱码,即使我恢复了原始CSS文件且未做任何新的修改,情......
  • css布局方式汇总
    css布局解决方案文章目录css布局解决方案水平居中布局1.text-algin:center使用场景原理优点与缺点2.margin:0auto原理优点和缺点3.inline-block+text-align属性配合使用原理优点和缺点4.table配合margin属性使用原理优点和缺点5.absolute+transform属性的tran......
  • 响应式布局mediaquery使用,鸿蒙NEXT星河版
    一、导入方法,定义响应式接口//组件的封装importmediaqueryfrom'@ohos.mediaquery'exportinterfaceLandType{isLandScape:boolean}二、监听当前是否是横屏状态//监听当前是否是横屏状态@StatelandRes:LandType={isLandScape:false}liste......
  • div+css布局实现个人网页设计(HTML期末作业)
    ......