首页 > 其他分享 >GridPane网格布局

GridPane网格布局

时间:2024-06-22 17:22:47浏览次数:17  
标签:Button 布局 网格 add import new gridPane GridPane

JavaFX 的 GridPane 是一种基于网格的布局方式,它允许你将子节点放置在网格的行和列中。GridPane 提供了高度的灵活性来创建复杂的用户界面布局。

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

  1. 添加节点到网格:使用 add 方法将子节点添加到特定的行和列。

  2. 行和列的索引:行和列的索引都是从0开始的。

  3. 列宽和行高:可以通过 setColumnWidthsetRowVvalue 方法来设置列宽和行高。

  4. 对齐方式:可以为每个子节点设置水平和垂直对齐方式。

  5. 填充和边距:可以为 GridPane 设置填充和边距,以控制子节点之间的空间。

  6. 网格线:可以通过 setGridLinesVisible 方法来显示或隐藏网格线。

  7. 权重:可以为列和行设置权重(setColumnFillWidthsetRowFillHeight),以控制它们在可用空间中的占比。

下面是一个 GridPane 的使用案例,演示了如何使用 GridPane 来创建一个简单的表单界面:

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

public class GridPaneDemo extends Application {

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

        // 设置网格线可见
        gridPane.setGridLinesVisible(true);

        // 设置填充和边距
        gridPane.setPadding(new Insets(10, 10, 10, 10));
        gridPane.setHgap(5);
        gridPane.setVgap(5);

        // 创建标签和按钮,并将它们添加到 GridPane
        gridPane.add(new Label("First Name:"), 0, 0);
        gridPane.add(new Button("First Name Button"), 1, 0);
        gridPane.add(new Label("Last Name:"), 0, 1);
        gridPane.add(new Button("Last Name Button"), 1, 1);
        gridPane.add(new Label("Email:"), 0, 2);
        gridPane.add(new Button("Email Button"), 1, 2);

        // 创建场景并设置 GridPane
        Scene scene = new Scene(gridPane, 300, 200);

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

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

在这个例子中,我们创建了一个 GridPane,并为它设置了网格线可见、填充和边距。然后,我们创建了几个 LabelButton 对象,并将它们添加到 GridPane 的特定行和列中。每个标签和按钮都位于一个单元格内,标签位于第一列,按钮位于第二列。

运行这个程序,你会看到一个窗口,其中包含一个简单的表单布局,标签和按钮被组织在一个3行2列的网格中。通过调整窗口的大小,你可以观察到 GridPane 如何自动调整子节点的大小以适应可用空间。

标签:Button,布局,网格,add,import,new,gridPane,GridPane
From: https://www.cnblogs.com/zllw946/p/18262519

相关文章

  • DialogPane对话框布局
    JavaFX的DialogPane是一个用于创建对话框的控件,它是Dialog类内容部分的根节点。DialogPane提供了一个灵活的方式来自定义对话框的内容和行为。以下是DialogPane的一些基本用法:构造函数:DialogPane可以通过多种构造函数创建,可以指定标题、头部、内容和扩展按钮。标......
  • FlowPane流式布局
    JavaFX的FlowPane是一种流式布局的面板,它能够自动将子节点排列成多行或多列,当一行或一列填满后,会自动换行或换列。FlowPane非常适合用来创建动态的、可适应不同窗口大小的布局。以下是FlowPane的一些基本用法和特性:排列方向:FlowPane默认的排列方向是水平的,子节点会从左......
  • AnchorPane锚点布局
    JavaFX的AnchorPane是一种布局方式,允许你通过指定锚点来定位子节点。锚点是相对于父节点边缘的位置,你可以使用这些锚点来控制子节点的位置和大小。AnchorPane非常适合用来创建复杂的布局,其中组件的位置需要相对于其他组件或父容器的边缘进行定位。以下是AnchorPane的一些基......
  • BorderPane边框布局
    JavaFX的BorderPane是一种布局方式,它将容器分为五个区域:顶部(top)、底部(bottom)、左侧(left)、右侧(right)和中心(center)。每个区域可以放置一个节点,中心区域可以放置任意类型的节点,而其他四个区域通常放置较小的控件或组件。以下是BorderPane的一些基本用法:区域设置:使用setTop......
  • 第二讲 常见布局及控件
    第二讲常见布局及控件一.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......