网站建设运营公司推荐,可以看网站的手机浏览器,做个人网站的步骤,微信制作企业网站一、序言
gnome-builder构建器是gnome程序开发的集成环境#xff0c;支持主力语言C, C, Vala, jscript, python等#xff0c;界面以最新的 gtk 4.12 为主力#xff0c;将其下版本的gtk直接压入了depreciated#xff0c;但gtk4.12与普遍使用的gtk3有很大区别#xff0c;原…一、序言
gnome-builder构建器是gnome程序开发的集成环境支持主力语言C, C, Vala, jscript, python等界面以最新的 gtk 4.12 为主力将其下版本的gtk直接压入了depreciated但gtk4.12与普遍使用的gtk3有很大区别原来的glade设计器不能支持原有的gtk3界面ui要用gtk-builder-tool转换但转换时会提示许多不能转换的不兼容项要自己修改。cambalache正在快速进步中已经能够支持gtk4的界面开发是glade的后继者它能够import签入gnome-builder程序中的ui文件加工处理后必须export出gnome-builder可用的gtk4界面ui它们之间尚不能自动签入签出但已经可以支持gnome-builder做界面设计使用了。如果习惯了gtk界面ui的xml大部份界面可以在gnome-builder上直接修改xml或是不用ui文件而直接通过语句书写在这方面 gtk4 提供了许多灵活性。
二、创建gnome应用程序 工程名自己起比如CSDN这个名字会在程序中和ui中加上window后使用后面会看到它的具体使用。创建新项目后一个完整的框架就生成了默认是meson build直接构建后即可试运行点开CSDN构建栏可在构建后直接导出 flatpak 安装包。 构建后运行程序自带一个menu有快捷方式和关于界面上是一个 label显示Helloworld! 三、换新界面
界面一增加一个color选择项三个button一个label和控制信号 界面二增加菜单项和控制信号 界面三通过菜单项和主界面button点击通过语句生成新的子窗口 界面四通过ui文件生成新的子窗体 上述窗体的ui设计会简单说一下cambalache的使用。
四、主界面设计
设计思路去掉原来的label加上一个grid在grid中加入三个button和一个label这样grid需要六行四列 6x4 的格子如果在excel上画出来的话就是下面的样子。 spaceer1和spacer2是空的labelcolumn span是跨4个格子 button和label跨2个格子。下面是ui文件的内容(我实际习练的程序名称是withcambla不是CSDN因此后面ui文件和程序中就直接使用withcambla了。CSDN只是创建主程序的示例)
?xml version1.0 encodingUTF-8?
!-- Created with Cambalache 0.16.0 --
interface!-- interface-name newui.ui --requires libgio version2.0/requires libgtk version4.12/template classWithcamblaWindow parentGtkApplicationWindowproperty namedefault-height900/propertyproperty namedefault-width1300/propertychild typetitlebarobject classGtkHeaderBar idheader_barchild typestartobject classGtkColorButtonproperty namergbargb(28,113,216)/propertyproperty nameshow-editorTrue/property/object/childchild typeendobject classGtkMenuButtonproperty nameicon-nameopen-menu-symbolic/propertyproperty namemenu-modelprimary_menu/property/object/child/object/childchildobject classGtkGrid idgrid1property namecolumn-homogeneousTrue/propertyproperty namecolumn-spacing10/propertyproperty namehexpandTrue/propertyproperty namehexpand-setTrue/propertyproperty namemargin-bottom30/propertyproperty namemargin-end30/propertyproperty namemargin-start30/propertyproperty namemargin-top30/propertyproperty namerow-homogeneousTrue/propertyproperty namerow-spacing10/propertyproperty namevexpandTrue/propertyproperty namevexpand-setTrue/propertychildobject classGtkLabel idtopspacerlayoutproperty namecolumn0/propertyproperty namecolumn-span4/propertyproperty namerow0/propertyproperty namerow-span1/property/layout/object/childchildobject classGtkLabel idbottomspacerlayoutproperty namecolumn0/propertyproperty namecolumn-span4/propertyproperty namerow5/propertyproperty namerow-span1/property/layout/object/childchildobject classGtkButton idbutton1property namelabelButton1/propertyproperty namemargin-bottom10/propertyproperty namemargin-top10/propertylayoutproperty namecolumn1/propertyproperty namecolumn-span2/propertyproperty namerow1/propertyproperty namerow-span1/property/layout/object/childchildobject classGtkButton idbutton2property namelabelButton2/propertyproperty namemargin-bottom10/propertyproperty namemargin-top10/propertylayoutproperty namecolumn1/propertyproperty namecolumn-span2/propertyproperty namerow2/propertyproperty namerow-span1/property/layout/object/childchildobject classGtkButton idbutton3property namelabelButton3/propertyproperty namemargin-bottom10/propertyproperty namemargin-top10/propertylayoutproperty namecolumn1/propertyproperty namecolumn-span2/propertyproperty namerow4/propertyproperty namerow-span1/property/layout/object/childchildobject classGtkLabel idlabel1property namelabelLabel as display/propertyproperty namemargin-bottom10/propertyproperty namemargin-top10/propertylayoutproperty namecolumn1/propertyproperty namecolumn-span2/propertyproperty namerow3/propertyproperty namerow-span1/property/layout/object/child/object/child/templatemenu idprimary_menusectionitemattribute nameactionapp.preferences/attributeattribute namelabel translatableyes_Preferences/attribute/itemitemattribute nameactionwin.show-help-overlay/attributeattribute namelabel translatableyes_Keyboard Shortcuts/attribute/itemitemattribute nameactionapp.about/attributeattribute namelabel translatableyes_About gnomeapp/attribute/itemitemattribute nameactionapp.ghello/attributeattribute namelabel translatableyes_gPrint Hello/attribute/itemitemattribute nameactionapp.popwin/attributeattribute namelabel translatableyes_popup window/attribute/itemitemattribute nameactionapp.popwin1/attributeattribute namelabel translatableyes_popup window 1/attribute/itemitemattribute nameactionapp.popwin2/attributeattribute namelabel translatableyes_popup window 2/attribute/item/section/menu
/interface这个文件可以在 cambalache 中import后修改修改后export回去。
五、cambalache使用 建个工程起任何合规则的名字进入后删除掉import 进来 gnome-builder构建器中的ui文件ui文件在gnome-builder工程目录的src下。 这个地方有几处要注意的一是窗体的template开关要打开这样生成的ui文件是带template标签的在gnome-builder中要用到它二是窗口名不要改它是创建工程时的工程名后面加上window合成的程序代码中用到的窗体名和ui的窗体名要求是一致的。界面修改好后点Export写回原来import的ui此时在 gnome-builder中点显工程树中的 ui 文件时会提示已经被修改点重新载入即可。
六、主界面创建 - 代码实现
有了上面的主界面ui要通过程序代码读入ui创建 structure、绑定template、class初始化和窗口初始化完成这与gtk3程序的方式是不同的下一篇笔记定代码实现部分。
