编程讲究的站在巨人的肩膀上而不是从头发明轮子。一个图形化界面上的内容不需要咱们全部去实现qt中已经提供了很多内置的控件可以直接使用enabled描述一个控件是否属于可用状态enabledAPI说明isEnabled()获取到控件的可用状态.setEnabled设置控件是否可使用.true表示可用,false表示禁用.所谓 禁用 指的是该控件不能接收任何用户的输入事件, 并且外观上往往是灰色的.如果一个 widget 被禁用, 则该 widget 的子元素也被禁用.#include widget.h #include ui_widget.h #includeQPushButton #includeQDebug Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); QPushButton* button new QPushButton(this); button-setText(按钮); //设置禁用状态 button-setEnabled(false); connect(button,QPushButton::clicked,this,Widget::handle); } Widget::~Widget() { delete ui; } void Widget::handle() { qDebug()handle; }setEnabled将按钮状态设置为false按钮呈灰色且不可点击在添加一个按钮实现禁用使用切换#include widget.h #include ui_widget.h #include QDebug Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { qDebug()执行了槽函数; } void Widget::on_pushButton_enable_clicked() { qDebug()切换第一个按钮的禁用状态; //1.获取第一个的可用状态 bool enable ui-pushButton-isEnabled(); //2.修改为true if(enable) { ui-pushButton-setEnabled(false); }else { ui-pushButton-setEnabled(true); } }Object 的 objectName 属性介绍:QObject 是 QWidget 的父类. 里面最主要的属性就是 objectName .在一个 Qt 程序中, objectName 相当于对象的身份标识, 彼此之间不能重复.在使用 Qt Designer 时, 尤其是界面上存在多个 widget 的时候, 可以通过 objectName 获取到指定的 widget 对象.Qt Designer 生成的 ui 文件, 本身是 xml 格式的. qmake 会把这个 xml 文件转换成 C 的 .h文件(这个文件生成在 build 目录中), 构成一个 ui_widget 类.每个 widget 的 objectName 最终就会成为 ui_widget 类的属性名字.最终这个类的实例, 就是 Ui::Widget *ui , 因此就可以通过形如 ui-pushButton 或者 ui-pushButton_2 这样的代码获取到界面上的 widget 对象了.注意在同一个控件中要求不同的控件的objectName 也必须不同的不能重复后续就可以通过ui-obejectName方式来获取到对应的控件对象了。如ui-pushButton //得到了第一个按钮的对象ui-pushButton //得到了第二个按钮的对象元编程技术QT会根据ui文件生成一个ui_widget.h的文件生成的过程就会感知到界面上有哪些控件每个控件的objectName当前自动生成的objectName有点规律这个名字就是根据控件的类型 _ 数字右边的框可以修改属性值geometry位置和尺寸. 其实是四个属性的统称:x 横坐标y 纵坐标width 宽度height 高度但是实际开发中, 我们并不会直接使用这几个属性, 而是通过一系列封装的方法来获取/修改.对于 Qt 的坐标系, 不要忘记是一个 左手坐标系. 其中坐标系的原点是当前元素的父元素的左上角.move只是修改位置setGeometry既可以修改位置又可以修改尺寸geometryAPI说明geometry()获取到控件的位置和尺寸. 返回结果是一个 QRect, 包含了 x, y, width, height. 其中 x, y 是左上角的坐标.setGeometry(QRect)setGeometry(int x, int y,int width, int height)设置控件的位置和尺寸. 可以直接设置一个 QRect, 也可以分四个属性单独设置.传入QRect调整左上角的位置调整按钮高度但改变的同时高度宽度也发生改变#include widget.h #include ui_widget.h #includeQDebug Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_up_clicked() { //获取到target本身的geometry QRect rect ui-pushButton_target-geometry(); qDebug()rect; rect.setY(rect.y()-5); ui-pushButton_target-setGeometry(rect); } void Widget::on_pushButton_down_clicked() { QRect rect ui-pushButton_target-geometry(); qDebug()rect; rect.setY(rect.y()5); ui-pushButton_target-setGeometry(rect); } void Widget::on_pushButton_right_clicked() { QRect rect ui-pushButton_target-geometry(); qDebug()rect; rect.setX(rect.x()5); ui-pushButton_target-setGeometry(rect); } void Widget::on_pushButton_left_clicked() { QRect rect ui-pushButton_target-geometry(); qDebug()rect; rect.setX(rect.x()-5); ui-pushButton_target-setGeometry(rect); }下面就是相对移动#include widget.h #include ui_widget.h #includeQDebug Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_up_clicked() { //获取到target本身的geometry QRect rect ui-pushButton_target-geometry(); qDebug()rect; // rect.setY(rect.y()-5); // ui-pushButton_target-setGeometry(rect); ui-pushButton_target-setGeometry(rect.x(),rect.y()-5,rect.width(),rect.height()); } void Widget::on_pushButton_down_clicked() { QRect rect ui-pushButton_target-geometry(); qDebug()rect; // rect.setY(rect.y()5); // ui-pushButton_target-setGeometry(rect); ui-pushButton_target-setGeometry(rect.x(),rect.y()5,rect.width(),rect.height()); } void Widget::on_pushButton_right_clicked() { QRect rect ui-pushButton_target-geometry(); qDebug()rect; // rect.setX(rect.x()5); // ui-pushButton_target-setGeometry(rect); ui-pushButton_target-setGeometry(rect.x()5,rect.y(),rect.width(),rect.height()); } void Widget::on_pushButton_left_clicked() { QRect rect ui-pushButton_target-geometry(); qDebug()rect; // rect.setX(rect.x()-5); // ui-pushButton_target-setGeometry(rect); ui-pushButton_target-setGeometry(rect.x()-5,rect.y(),rect.width(),rect.height()); }你好不好趣味小游戏用户只能点击好的好的点击不好不好则按钮挪走点击之后挪走#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //设置时间戳作为随机种子 srand(time(0)); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_accept_clicked() { ui-label-setText(好的好的); } void Widget::on_pushButton_reject_clicked() { //如果点击了这个就把按钮挪走 //通过随机数的方式来确定新按钮的位置 //获取当前程序窗口的尺寸 int width this-geometry().width(); int height this-geometry().height(); int x rand() % width; int y rand() % height; //移动按钮的位置 ui-pushButton_reject-move(x,y); } void Widget::on_pushButton_reject_pressed() { }在鼠标点击之前挪走#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //设置时间戳作为随机种子 srand(time(0)); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_accept_clicked() { ui-label-setText(好的好的); } void Widget::on_pushButton_reject_clicked() { } void Widget::on_pushButton_reject_pressed() { //如果点击了这个就把按钮挪走 //通过随机数的方式来确定新按钮的位置 //获取当前程序窗口的尺寸 int width this-geometry().width(); int height this-geometry().height(); int x rand() % width; int y rand() % height; //移动按钮的位置 ui-pushButton_reject-move(x,y); }window frame 的影响如果 widget 作为一个窗口 (带有标题栏, 最小化, 最大化, 关闭按钮), 那么在计算尺存和坐标的时候就有两种算法. 包含 window frame 和 不包含 window frame.其中 x(), y(), frameGeometry(), pos(), move() 都是按照包含 window frame 的方式来计算的.其中 geometry(), width(), height(), rect(), size() 则是按照不包含 window frame 的方式来计算的.当然, 如果一个不是作为窗口的 widget , 上述两类方式得到的结果是一致的.代码放到构造函数中此时这个Widget对象正在构造还没有加载到window frame 中此时看不到window frame的影响当给按钮添加点击事件后实例化后window face就用影响了一个是窗口的左上角一个是Widget的左上角windowTitlewindowTitleAPI说明windowTitle()获取到控件的窗口标题.setWindowTitle(const QString title)设置控件的窗口标题.注意! 上述设置操作针对不同的 widget 可能会有不同的行为.如果是顶层 widget (独立窗口), 这个操作才会有效.如果是子 widget, 这个操作无任何效果.windowIconwindowlconAPI说明windowIcon()获取到控件的窗口图标. 返回 QIcon 对象.setWindowIcon(const QIcon icon)设置控件的窗口图标.同 windowTitle, 上述操作仅针对顶层 widget 有效.但是通过绝对路径的方式是不科学的因为写的程序是要发布到用户的电脑上的无法保证开发机上图片的路径和用户电脑上的图片路径完全一致。qt中有一个qrc机制这个机制就是从根本上解决两个问题确保图片不会被用户搞没了确保图片所在的路径在目标用户机器上存在方法是给qt项目引入一个额外的xml文件后缀名用.qrc表示在这个xml中把要使用的图片资源给导入进来并且在xml中进行记录在编译项目的时候就会根据qrc中描述的图片信息找到图片内容并且提取出图片的二维数据把这些二进制数据转化成C代码最终编译到exe里qrc使用方式1.在项目中创建一个qrc文件文件名不要带中文和特殊符号2.更改虚拟目录名字3.导入图片添加完路径后第二个按钮会变成实体注意:导入的图片需要确保图片在改qrc的同级目录或者同级目录的子目录下否则会路径无效绑定成功就会有一个树状图路径是一开始建的虚拟路径图片名图片后缀就是上面树状图的路径qrc中导入的图片资源就会被转成这个qrc_a.cpp这个C代码通过二进制转存起来上述 qrc 这一套资源管理方案, 优点和缺点都很明显.优点:确保了图片, 字体, 声音等资源能够真正做到 目录无关, 无论如何都不会出现资源丢失的情况.缺点:不适合管理体积大的资源. 如果资源比较大 (比如是几个 MB 的文件), 或者资源特别多,生成的最终的 exe 体积就会比较大, 程序运行消耗的内存也会增大, 程序编译的时间也会显著增加.windowOpacity可以设置透明效果windowOpacityAPI说明windowOpacity()获取到控件的不透明数值. 返回 float, 取值为 0.0 - 1.0 其中 0.0 表示全透明, 1.0 表示完全不透明.setWindowOpacity(float n)设置控件的不透明数值.#include widget.h #include ui_widget.h #includeQDebug Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_2_clicked() { float opacity this-windowOpacity(); if(opacity 1.0) { return; } opacity0.1; qDebug()opacity; this-setWindowOpacity(opacity); } void Widget::on_pushButton_clicked() { float opacity this-windowOpacity(); if(opacity 0.0) { return; } opacity-0.1; qDebug()opacity; this-setWindowOpacity(opacity); }效果但是窗口的不透明度变化并不是精确的可是我代码里是精确的这是因为浮点数是用科学计数法来存储的float和double有效数字部分长度都是有限的无法精确到0.1cursorAPI说明cursor()获取到当前 widget 的 cursor 属性, 返回QCursor 对象.当鼠标悬停在该 widget 上时, 就会显示出对应的形状.setCursor(const QCursor cursor)设置该 widget 光标的形状. 仅在鼠标停留在该 widget 上时生效.QGuiApplication::setOverrideCursor(const QCursor cursor)设置全局光标的形状. 对整个程序中的所有 widget 都会生效. 覆盖上面的 setCursor 设置的内容.图形化界面可以直接设置代码方式创建#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); QCursor cursor(Qt::WaitCursor); ui-pushButton-setCursor(cursor); } Widget::~Widget() { delete ui; }qt内置的光标样式自定义光标Qt允许我们通过自定义的图片来设置光标先准备一个图片然后将该图片导入到项目中qrc管理然后在代码中访问到这个图片基于这个图片构造出光标对象并设置QPixmap通过这个对象表示一个图片#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //访问到图片文件 QPixmap pixmap(:/code.png); //缩放图片 pixmap.scaled(10,10); //构造光标对象 QCursor cursor(pixmap,10,10);//默认点击的位置是光标的左上角所以热点扩大范围以图片左上角(0,0)为原点偏移(10,10)作为点击位置 //设置光标 this-setCursor(cursor); } Widget::~Widget() { delete ui; }小图标的下载推荐去阿里巴巴矢量图标库去找免费的fontAPI说明font()获取当前 widget 的字体信息. 返回 QFont 对象.setFont(const QFont font)设置当前 widget 的字体信息.关于 QFont属性说明family字体家族. 比如 楷体, 宋体, 微软雅黑 等.pointSize字体大小weight字体粗细. 以数值方式表示粗细程度取值范围为 [0, 99], 数值越大, 越粗.bold是否加粗. 设置为 true, 相当于 weight 为 75. 设置为 false 相当于weight 为 50.italic是否倾斜underline是否带有下划线strikeOut是否带有删除线toolTipAPI说明setToolTip设置 toolTip.鼠标悬停在该 widget 上时会有提示说明.setToolTipDuring设置 toolTip 提示的时间. 单位 ms.QtCreator提供的时间到后 toolTip 自动消失.msec毫秒sec秒usec微妙 1s1000ms1ms1000us#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //设置这两个代码的toolTips ui-pushButton_yes-setToolTip(这是一个yes按钮); ui-pushButton_yes-setToolTipDuration(3000); ui-pushButton_no-setToolTip(这是一个no按钮); ui-pushButton_no-setToolTipDuration(7000); } Widget::~Widget() { delete ui; }focusPolicyAPI说明focusPolicy()获取该 widget 的 focusPolicy, 返回 Qt::FocusPolicysetFocusPolicy(Qt::FocusPolicy policy)设置 widget 的 focusPolicy.Qt::FocusPolicy 是一个枚举类型. 取值如下Qt::NoFocus 控件不会接收键盘焦点Qt::TabFocus 控件可以通过Tab键接收焦点Qt::ClickFocus 控件在鼠标点击时接收焦点Qt::StrongFocus 控件可以通过Tab键和鼠标点击接收焦点 (默认值)Qt::WheelFocus : 类似于 Qt::StrongFocus , 同时控件也通过鼠标滚轮获取到焦点 (新增的选项, 一般很少使用).styleSheet通过 CSS 设置 widget 的样式.Qt就把CSS参考过来了搞了一套QSS效果#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_light_clicked() { //设置窗口的样式 this-setStyleSheet(background-color:white;); //设置输入框的样式 ui-plainTextEdit-setStyleSheet(background-color: white;color:black;); //设置按钮的样式 ui-pushButton_light-setStyleSheet(color:black;); ui-pushButton_dark-setStyleSheet(color:black;); } void Widget::on_pushButton_dark_clicked() { //设置窗口的样式 this-setStyleSheet(background-color:black;); //设置输入框的样式 ui-plainTextEdit-setStyleSheet(background-color: black;color:white;); //设置按钮的样式 ui-pushButton_light-setStyleSheet(color:white;); ui-pushButton_dark-setStyleSheet(color:white;); }效果