2 UI 设计师工具

2 UI 设计师工具2.1 按键 QPushButton1.按键插入将左侧buttons中的pushbutton拖拽到右侧即插入一个按键。2.按键命名可在objectName处直接更改按键名字。3.按键重命名单调的命名可能会存在如下图问题用户没有办法直接从按键名上区分按键的功能所以需要变量名重命名。重命名过程右侧选中需要重命名按键左侧双击按键输入便于用户区分功能的名字。2.2 水平布局 QHBoxLayout经过2.1的处理我们可以得到如下结果很明显我们需要将按键对齐来保证美观在QT中可以手动对齐也可以使用layout-布局工具。1.水平布局将需要布局的模块全部选中点击水平布局即可完成。2.引入弹簧我们会发现当改变整体布局大小时按键也会随之改变但我们可能并不想按键改变这时就需要引入弹簧。使用时将horizontal拖拽到蓝色区域就可以得到如下结果。3.改变颜色在containers中添加一个widget观察好右侧从属关系。右击widget点击改变样式表点击添加颜色便可以得到有颜色的widget。之后拖拽layoutbutton到widget中然后再观察右侧从属关系至此改变颜色完成。2.3 文本编辑器 TextEdit将input widgets中的tixt edit拖拽到右侧完善布局得到初步的记事本布局2.4 垂直布局 QVBoxLayout同2.2水平布局将初步的记事本布局三个部分全选后点击垂直布局得到如下构图。可以看出顶部和底部的模块被遮挡这里需要调整构图可在右侧改变高度等参数得到想要的布局效果可运行程序。2.5 主窗体元素设计运行程序结果如图可以看到界面不会随对话框大小的改变而变动为了解决这一问题我们引入以下办法。在widget.cpp中更改代码可以解决该问题#includewidget.h#includeui_widget.hWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);//虽然上一行代码进行 widget 和 ui 的窗口关联但是如果发生窗口大小变化的时候里面的布局不会随之变化//通过下面这行代码进行显示说明让窗口变化时布局及其子控件随之调整this-setLayout(ui-verticalLayout);}Widget::~Widget(){deleteui;}2.6 记事本UI美化stylesheet在帮助中搜索stylesheet掌握基本用法可以查到很多常用语句。如下图代码可以直接改变按键颜色和背景颜色。1.插入图形有时我们希望UI图标更美观所以需要导入外部图片步骤如下。首先如图创建资源文件。然后如图导入文件并保存。最后可以在项目中引入外部图片以widget为例如下在windowicon中导入可用图片在windowtitle中改写名字。更改后运行结果如下2.按键美化如图步骤可以将打开变为某个图标来代表图标大小及其他特征可在右侧filter修改。将样式表更改如下即可实现打开按键的图标化且光标附着和点击有各自形态。最终结果如下