javafx布局之gridpane

本文介绍如何使用 JavaFX 的 GridPane 实现自动扩展功能。通过设置 RowConstraints 和 ColumnConstraints 的 grow priority,可以使 GridPane 的行或列随窗口大小变化而自动扩展。在 FXML 中实现这一功能的方法也一并给出。

刚刚测试了gridpane这个布局管理器,因为它和xaml的grid布局控件很相似,xaml布局中我用的最多的就是grid了,所以首先搞懂javafx的gridpane

主要关注的就是girdpane的自动拓展尺寸的功能,我需要的是一个可以自动扩展尺寸的gridpane,就像grid那样,但是默认情况下,gridpane并不支持拓展空间,不信可以试试

API上查找了一下,发现了这样一段话

By default the gridpane will resize rows/columns to their preferred sizes (either computed from content or fixed), even if the gridpane is resized larger than its preferred size. If an application needs a particular row or column to grow if there is extra space, it may set its grow priority on the RowConstraints or ColumnConstraints object.

翻译过来

默认gridpane将调整行/列首选大小(根据内容计算或固定尺寸),即使gridpane大小大于它的首选大小(它也不会自动调整大小,我加上的)。如果一个应用程序需要一个特定的行或列成长如果有多余的空间,它可以设置优先增长RowConstraints或ColumnConstraints对象。例如:

 

GridPane gridpane = new GridPane();

ColumnConstraints column1 = new ColumnConstraints(100,100,Double.MAX_VALUE);

column1.setHgrow(Priority.ALWAYS);

好吧,说到这里应该很到位了,但是在javafx的fxml中如何设定呢?下面就是解决方法,其实很简单

<GridPane vgap="1" hgap="1"     id="AnchorPane" prefHeight="2000" prefWidth="500" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Frame2XML.Frame2Controller">
    <stylesheets>
        <URL value="@frame2.css"/>
    </stylesheets>
       
        <TableView GridPane.hgrow="ALWAYS" >
            <columns>
                <TableColumn text="路径" />
                <TableColumn text="路径" />
                <TableColumn text="路径" />
            </columns>
        </TableView>
</GridPane>

这样,tableview就可以随着界面尺寸变化而变化了,怎么样,是不是很强大。

### 动态改变GridPane中的单元格颜色 在JavaFX中,`GridPane` 是一个布局容器,允许开发者将节点放置在基于行和列的网格中。要动态改变 `GridPane` 中单元格的颜色,可以通过以下方式实现: 1. 创建一个包含背景颜色的 `Region` 或 `Pane` 节点,并将其添加到 `GridPane` 的特定单元格中。 2. 使用 `setStyle()` 方法或绑定样式属性来动态更改这些节点的背景颜色。 以下是具体实现代码示例: ```java import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.GridPane; import javafx.scene.layout.Region; import javafx.scene.paint.Color; import javafx.stage.Stage; public class DynamicGridPaneColor extends Application { @Override public void start(Stage primaryStage) { GridPane gridPane = new GridPane(); // 添加带有背景颜色的区域到 GridPane for (int row = 0; row < 5; row++) { for (int col = 0; col < 5; col++) { Region cell = new Region(); cell.setPrefSize(50, 50); // 设置单元格大小 cell.setStyle("-fx-background-color: lightgray;"); // 初始颜色 gridPane.add(cell, col, row); // 绑定鼠标点击事件以动态改变颜色 cell.setOnMouseClicked(event -> { if (cell.getStyle().equals("-fx-background-color: lightgray;")) { cell.setStyle("-fx-background-color: red;"); } else { cell.setStyle("-fx-background-color: lightgray;"); } }); } } Scene scene = new Scene(gridPane, 300, 300); primaryStage.setTitle("Dynamic GridPane Color"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` #### 说明 - 上述代码创建了一个 5x5 的 `GridPane`,每个单元格是一个 `Region` 节点[^2]。 - 每个 `Region` 节点的背景颜色初始为浅灰色 (`lightgray`)。 - 当用户单击某个单元格时,该单元格的背景颜色会在浅灰色和红色之间切换[^3]。 #### 注意事项 - 如果需要更复杂的颜色变化逻辑,可以使用 `-fx-background` 属性结合渐变色或其他 CSS 样式[^4]。 - 在实际应用中,可能需要根据业务需求调整颜色变化规则,例如通过绑定数据模型或定时器触发颜色变化[^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值