javaFx 学习--之组件篇1(边框与布局管理1)

最新推荐文章于 2025-06-01 00:01:42 发布

原创最新推荐文章于 2025-06-01 00:01:42 发布 · 7.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javafx #button #border #swing #manager #action

本文介绍了JavaFX中的组件，重点讲解了边框与布局管理。通过示例展示了如何创建一个带有边框的GridPanel，包括设置边距，并在其中添加了一个响应点击事件的按钮和一个显示点击次数的标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写了前面几小程序,大家对javaFx程序以有初步认识,下面我们一起来学习javaFx的组件, 这些组件包括,1.边框与布局管理;2.菜单;3.标签;4.面板组,简单标签,文本框,5.按钮;6.列表框;7.分割面板;8.单选按钮,单选按钮组,触发按钮,按钮组;9.多选按钮;10.树形;11.表;12文本框;13.微调与滑动组件.

这次我们学习第一个组件,边框与布局管理,(暂不上传代码)

布局管理:

JavaFX Widget	Layout Manager
`GridPanel`	GridLayout
`GridBagPanel`	GridBagLayout
`FlowPanel`	FlowLayout
`BorderPanel`	BorderLayout
`Box`	BoxLayout
`StackPanel`	Romain Guy's StackLayout
`CardPanel`	CardLayout
`GroupPanel`	org.jdesktop.layout.GroupLayout

边框:

JavaFX Border	Swing Border
`EmptyBorder`	EmptyBorder
`LineBorder`	LineBorder
`BevelBorder`	BevelBorder
`SoftBevelBorder`	SoftBevelBorder
`MatteBorder`	MatteBorder
`TitledBorder`	TitledBorder

代码如下:

class ButtonClickModel {//定义类
attribute numClicks: Number;//定义属性numClicks,数字类型
}

var model = new ButtonClickModel();//创建一个类

        var win = Frame {//建一个图形框
            width: 200 //宽
            height:100 //高
            content: GridPanel {//容器网格布局
                border: EmptyBorder {//空边框
                   top: 30    //顶边距
                   left: 30   //左边距
                   bottom: 30 //中边距
                   right: 30 //右边距
                }
                rows: 2//二行
                columns: 1//一列
                vgap: 10 //垂直间隙10像素
                cells://单玩格
                [Button {//按钮
                     text: "I'm a button!"//文本内容I'm a button
                     mnemonic: I //I记忆属性 I
                     action: operation() {//动作或操作
                         model.numClicks++;//每单击一次自加
                    }
                },
                Label {//标签
                    text: bind "Number of button clicks: {model.numClicks}"
                     //文本是{model.numClicks}的值
                }]
            }
            visible: true//可见
        };

运行后效果: