微信网站对接,云平台网站开发,上海企业管理咨询,优秀个人网站设计QT常用控件使用及布局 文章目录 QT常用控件使用及布局1、创建带Ui的工程2、ui界面介绍1、界面设计区2、对象监视区3、对象监属性编辑区4、信号与槽5、布局器6、控件1、Layouts1、布局管理器2、布局的dome 2、Spacers3、Buttons4、项目视图组(Item Views)5、项目控件组(Item Wid…QT常用控件使用及布局 文章目录 QT常用控件使用及布局1、创建带Ui的工程2、ui界面介绍1、界面设计区2、对象监视区3、对象监属性编辑区4、信号与槽5、布局器6、控件1、Layouts1、布局管理器2、布局的dome 2、Spacers3、Buttons4、项目视图组(Item Views)5、项目控件组(Item Widgets)6、Containers(容器7、Input widgets1、QLineEdit 举例 8、Display widgets1、怎么添加资源文件2、QLable标签实现标签文本图片链接 3、布局练习4、自定义控件5、样式表1、Qt样式表介绍2、Qt样式表简单举例 6、总结 1、创建带Ui的工程 项目里会生成带.ui的文件双击就可以进行ui设计。
2、ui界面介绍
双击 .ui文件会弹出UI设计器其布局大概为
1、界面设计区
可以把控件直接拖进来进行布局。
2、对象监视区
所以在界面设计区的控件都能在这看到。
3、对象监属性编辑区
可以对界面设计区选中的控件进行属性设置。比如在界面设计区加入一个按钮。
4、信号与槽
另外也可以在界面设计区选择按钮然后右键 - 转到槽…去添加自定义槽函数。 然后在窗口的类声明中的自动生成如下槽函数。然后去实现槽函数即可。这种方式就不需要自己去定义槽函数。
5、布局器 6、控件 1、Layouts 1、布局管理器
所谓 GUI 界面归根结底就是一堆控件的叠加。我们创建一个窗口把按钮放上面把图标放上面这样就成了一个界面。在放置时控件的位置尤其重要。我们必须要指定控件放在哪里以便窗口能够按照我们需要的方式进行渲染。这就涉及到控件定位的机制。 Qt 提供的布局中以下三种是我们最常用的 QHBoxLayout按照水平方向从左到右布局 QVBoxLayout按照竖直方向从上到下布局 QGridLayout在一个网格中进行布局类似于 HTML 的 table(网格布局可以任意布局
2、布局的dome
#include mywidget.h
#include ui_mywidget.h
#include QSpinBox
#include QSlider
#include QHBoxLayoutMyWidget::MyWidget(QWidget *parent): QWidget(parent), ui(new Ui::MyWidget)
{ui-setupUi(this);QSpinBox *spinBox new QSpinBox(this);QSlider *slider new QSlider(Qt::Horizontal, this);connect(slider, QSlider::valueChanged,spinBox, QSpinBox::setValue);void (QSpinBox:: *spinBoxSignal)(int) QSpinBox::valueChanged;/* 因为valueChanged信号重载了所以用函数指针来区分调用带参的信号 */connect(spinBox, spinBoxSignal,slider, QSlider::setValue);spinBox-setValue(35); /* 设置spinBox值 *//* 给控件设置布局 指定布局的父对象(this) 相当把控件放到窗口 */QHBoxLayout *layout new QHBoxLayout(this);layout-addWidget(spinBox);layout-addWidget(slider);
}进行水平布局运行如下 当窗口的大小改变时窗口布局里的控件也会自动发生变化。
2、Spacers 3、Buttons 4、项目视图组(Item Views) 5、项目控件组(Item Widgets) 6、Containers(容器 7、Input widgets 1、QLineEdit 举例
#include mywidget.h
#include ui_mywidget.h
#include QLineEdit
#include QCompleter
#include QStringListMyWidget::MyWidget(QWidget *parent): QWidget(parent), ui(new Ui::MyWidget)
{ui-setupUi(this);QLineEdit *edit new QLineEdit(this);//设置内容edit-setText(12345678);/* 移动行编辑的位置 */edit-move(200,300);//设置内容显示间隙edit-setTextMargins(15, 0, 0, 0);//设置内容显示方式//ui-lineEdit-setEchoMode(QLineEdit::Password);QStringList list;list hello How are you hehe;QCompleter *com new QCompleter(list, this);/* 设置是否区分大小写 */com-setCaseSensitivity(Qt::CaseInsensitive);/* 将QCompleter对象设置到QLineEdit中 */edit-setCompleter(com);
}按’H’会有提示
8、Display widgets 1、怎么添加资源文件 在资源里生成image.qrc文件 添加前缀可以设置前缀 添加文件可以添加文件 右键—复制资源路径到剪贴板 。就可以复制选中的资源路径。比如复制如下 //image/LuffyQ.png 根据这路经就可以加载资源。
2、QLable标签实现标签文本图片链接
#include mywidget.h
#include ui_mywidget.h
#include QLabel
#includeQMovie /* 动画头文件 */
#include QDesktopServicesMyWidget::MyWidget(QWidget *parent): QWidget(parent), ui(new Ui::MyWidget)
{ui-setupUi(this);/* 1. 设置文本 */QLabel *lable_1 new QLabel(this);lable_1-move(200,100);lable_1-setText(标签);/* 2. 设置图片 */QLabel *lable_2 new QLabel(this);lable_2-move(200,200);lable_2-setPixmap(QPixmap(://image/LuffyQ.png));/* 让图片自适应标签的大小 */lable_2-setScaledContents(true);/* 3. 设置动画 */QLabel *lable_3 new QLabel(this);lable_3-move(400,200);/* 创建动画 */QMovie *movie new QMovie(://image/mario.gif); /* 资源要是动态的图片 *//* movie指定父对象 */movie-setParent(this);/* 标签里设置动画 */lable_3-setMovie(movie);/* 启动动画 */movie-start();/* 让动画自适应标签的大小 */lable_3-setScaledContents(true);/* 4. 显示HTML链接 */QLabel *lable_4 new QLabel(this);lable_4-move(500,400);lable_4 -setText(h1a href\https://www.baidu.com\百度一下/a/h1);/* 设置打开外部链接方法1 */lable_4 -setOpenExternalLinks(true);/* 设置打开外部链接方法2 *///connect(lable_4, QLabel::linkActivated, this, MyWidget::slotOpenUrl);
}MyWidget::~MyWidget()
{delete ui;
}void MyWidget::slotOpenUrl(const QString link)
{QDesktopServices::openUrl(QUrl(link.toLocal8Bit()));
}3、布局练习
原则先局部在整体布局。 总结布局需要多练习。对象属性里熟悉合理设置。
4、自定义控件
不是在已有的控件拖到界面设计区。 怎么添加类文件 生成Smallwidget.h Smallwidget.cpp 在Smallwidget.cpp里添加如下代码
#include smallwidget.h
#include QSpinBox
#include QSlider
#include QHBoxLayoutSmallwidget::Smallwidget(QWidget *parent): QWidget{parent}
{QSpinBox *spin new QSpinBox(this);QSlider *slider new QSlider(Qt::Horizontal, this);//把控件添加到布局中QHBoxLayout *hLayout new QHBoxLayout(this);hLayout-addWidget(spin);hLayout-addWidget(slider);connect(spin, static_castvoid (QSpinBox::*)(int)(QSpinBox::valueChanged),slider, QSlider::setValue);connect(slider, QSlider::valueChanged, spin, QSpinBox::setValue);
}在界面设计区添加空容器。 最终运行如下 提升的Smallwidget类在容器里显示出来。
5、样式表
1、Qt样式表介绍
Qt样式表是一个可以自定义部件外观的十分强大的机制﹐控件的都可以使用Qt样式表来美化。Qt样式表的概念,术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CSS)的启发,不过与CSS不同的是,Qt样式表应用于部件。 样式表可以使用QApplication: : setStyleSheet()函数将其设置到整个应用程序上,也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件(还有它的子部件)上。如果在不同的级别都设置了样式表,那么Qt会使用所有有效的样式表这被称为样式表的层叠。
2、Qt样式表简单举例
#include mywidget.h
#include ui_mywidget.h
#include QLabel
#include QPushButton
MyWidget::MyWidget(QWidget *parent): QWidget(parent), ui(new Ui::MyWidget)
{ui-setupUi(this);QLabel *pLable new QLabel(this);QLabel *pLable1 new QLabel(this);QPushButton *button new QPushButton(this);pLable-move(100,100);pLable-resize(200,200);pLable1-resize(100,100);button-move(300,300);button-resize(300,300);this-setStyleSheet(QLabel{color:rgb(0, 255, 255);background-color:red;}); /* 设置整个窗口的标签 */pLable-setStyleSheet(QLabel{color:rgb(0, 255, 255);background-color:blue;border-image:url(://image/down.png);});button-setStyleSheet(QPushButton{border-image:url(:/image/Sunny.jpg); /* 填充边框的图像 */}QPushButton:hover{border-image:url(:/image/up.png); /* 鼠标悬空在按钮的图像 */}QPushButton:pressed{border-image:url(:/image/Luffy.png); /* 按钮按下图像 */});
}其它QT样式表博客
6、总结
主要介绍QT的UI界面及控件的简单使用与布局。及自定义控件。控件的渲染样式表的简单介绍。
