测试环境是否搭建好:
#include#include #include int main(int argc , char **argv) { QApplication qa(argc , argv); //创建窗口 QWidget w; //显示窗口 w.show(); std::cout << "Hello, World!" << std::endl; return qa.exec(); }
三、 窗口和布局
1. 添加窗口
通常一个程序可能会有多个窗口,此时可以采用类的方式来定义窗口.
-
定义窗口
class MyWindow : public QWidget{ public: MyWindow(){ cout << "执行了窗口的构造" << endl; //创建按钮 QPushButton *btn = new QPushButton(); //设置它的父亲是 这个窗口,也就是表示,它是窗口的一份子。 btn->setParent(this); } ~MyWindow(){ cout << "执行了窗口的析构" << endl; } };
- 程序显示
int main(int argc , char **argv) { QApplication qa(argc , argv); //创建窗口 MyWindow w; //显示窗口 w.show(); std::cout << "Hello, World!" << std::endl; return qa.exec(); }
- 设置窗口图标、标题、大小
class MyWindow : public QWidget{ public: MyWindow(){ cout << "执行了窗口的构造" << endl; //创建按钮 QPushButton *btn = new QPushButton("button" ,this); //设置窗口图标 setWindowIcon(QIcon("../nlm_icon.jpg")); //设置窗口标题 setWindowTitle(QString::fromLocal8Bit("中文")); //设置大小 允许拖拽 resize(400,300); } ~MyWindow(){ cout << "执行了窗口的析构" << endl; } };
2. 基本UI
记住一个核心: 所有的空间应该都依附于窗口里面。不要直接独立显示。
-
按钮
QPushButton *btn = new QPushButton("button" ,this);
显示中文,需要转化。
//参数一: 内容, 参数二:表示父窗口是谁。 QLabel *q = new QLabel(QString::fromLocal8Bit("姓名: ") ,this );
- 输入框
QLineEdit *edit = new QLineEdit( this); edit->setPlaceholderText(QString::fromLocal8Bit("请输入姓名"));
- 大小和位置
//表示最大和最小的大小值,可以使用鼠标拖拽 setMaximumSize(600,500); setMinimumSize(400,300); //设置固定大小 : 禁止放大和拖拽 setFixedSize(100,50); //设置位置 从左往右: x坐标, y的坐标 宽度和高度 setGeometry(50 ,50 , 40,20);
3. 布局
在Qt里面布局分为四个大类 :QBoxLayout | QFormLayout | QGridLayout | QStackedLayout
QBoxLayout : 直译为:盒子布局,快速构建的话,一般使用它的两个子类QHBoxLayout 和 QVBoxLayout 负责水平和垂直布局
QGridLayout : 网格布局,有的人称之为九宫格布局
QFormLayout: 一般适用于提交数据form表单。比如: 登录,注册类似的场景
QStackedLayout : 提供了多页面切换的布局,一次只能看到一个界面。
1. QBoxLayout
-
示例
-
示例代码
下面的代码
MyWindow(){ cout << "执行了窗口的构造" << endl; //创建垂直布局 QVBoxLayout *layout = new QVBoxLayout; //第一组单选组 QGroupBox *box1 = new QGroupBox; //使用垂直布局包装 QVBoxLayout *layout1 = new QVBoxLayout; QRadioButton *btn1 = new QRadioButton(QString::fromLocal8Bit("抽烟")); QRadioButton *btn2 = new QRadioButton(QString::fromLocal8Bit("喝酒")); QRadioButton *btn3 = new QRadioButton(QString::fromLocal8Bit("烫头")); layout1->addWidget(btn1); layout1->addWidget(btn2); layout1->addWidget(btn3); //把包装好的选项,放到groupBox中。 box1->setLayout(layout1); //第二个单选组 QGroupBox *box2 = new QGroupBox(QString::fromLocal8Bit("性别: ")); QHBoxLayout *layout2 = new QHBoxLayout; QRadioButton *btn4 = new QRadioButton(QString::fromLocal8Bit("男")); QRadioButton *btn5 = new QRadioButton(QString::fromLocal8Bit("女")); layout2->addWidget(btn4); layout2->addWidget(btn5); //把包装好的选项,放到groupBox中。 box2->setLayout(layout2); //把两组放到整体布局中 layout->addWidget(box1); layout->addWidget(box2); //设置这个窗口的布局 setLayout(layout); }
class GridWnd : public QWidget{ public: GridWnd(){ QString strs{ "7", "8", "9", "+", "(", "4", "5", "6", "-", ")", "1", "2", "3", "*", "<-", "0", ".", "=", "/", "C" }; //整体垂直布局。 QVBoxLayout *layout = new QVBoxLayout; //输入框 QLineEdit *edit = new QLineEdit; layout->addWidget(edit); //网格布局 QGridLayout *layout1 = new QGridLayout; for (int i = 0; i < strs.length(); ++i) { //循环一次,有一个按钮。 QPushButton *btn = new QPushButton(strs[i]); //把这个按钮放置到某行某列去。 layout1->addWidget(btn,i/5,i%5); } //追加到主布局中。 layout->addLayout(layout1); //设置布局 setLayout(layout); } };
class QToolWnd : public QWidget{ public: QToolWnd(){ //负责总的布局 auto *layout = new QVBoxLayout; //负责做组切换 auto *toolbox = new QToolBox; //使用QGroupBox 来包装垂直布局。 QGroupBox *box1 = new QGroupBox; //用垂直布局,先包装三个同学。 QVBoxLayout *cz = new QVBoxLayout; QLabel * label1 = new QLabel(QString::fromLocal8Bit("张三")); QLabel * label2 = new QLabel(QString::fromLocal8Bit("李四")); QLabel * label3 = new QLabel(QString::fromLocal8Bit("王五")); cz->addWidget(label1); cz->addWidget(label2); cz->addWidget(label3); //使用box来包装垂直布局 box1->setLayout(cz); QGroupBox *box2 = new QGroupBox; QVBoxLayout *hs = new QVBoxLayout; QLabel * label4 = new QLabel(QString::fromLocal8Bit("刘备")); QLabel * label5 = new QLabel(QString::fromLocal8Bit("关羽")); QLabel * label6 = new QLabel(QString::fromLocal8Bit("张飞")); hs->addWidget(label4); hs->addWidget(label5); hs->addWidget(label6); //使用box来包装垂直布局 box2->setLayout(hs); //最后把这一块放到选项组里面。 toolbox->addItem( box1, QString::fromLocal8Bit("初中好友")); toolbox->addItem( box2, QString::fromLocal8Bit("高中好友")); //整体布局就一个工具盒 layout->addWidget(toolbox); setLayout(layout); } };
4. QTableWidget
QTableWidget是QT程序中常用的显示数据表格的空间
class QTableWnd : public QWidget{ public: QTableWnd(){ auto *table = new QTableWidget(4,4,this); QStringList list{ QString::fromLocal8Bit("姓名"), QString::fromLocal8Bit("年龄"), QString::fromLocal8Bit("成绩"), QString::fromLocal8Bit("性别"), }; table->setHorizontalHeaderLabels(list); table->setFixedSize(500,300); QTableWidgetItem *item = new QTableWidgetItem(QString::fromLocal8Bit("张三")); QTableWidgetItem *item2 = new QTableWidgetItem(QString::fromLocal8Bit("18")); table->setItem(0 ,0 , item); table->setItem(0 ,1 , item2); } };
4. 自定义UI
除了系统定义好的控件之外,我们还可以在控件中绘制文字、图片以及不规则的几何图形到控件中
可以在
paintEvent
方法中通过QPainter
进行绘制
-
绘制直线
class QLineWnd : public QWidget{ void paintEvent(QPaintEvent *event){ QPainter * painter = new QPainter(this); QPen *p = new QPen(QColor(Qt::GlobalColor::red)); painter->setPen(*p); painter->drawLine(100,100,200,200); } };
- 绘制文字
//绘制事件 void MainWindow::paintEvent(QPaintEvent *event){ //创建画家 QPainter *painter = new QPainter(this); //画笔 QPen *p = new QPen(QColor(Qt::GlobalColor::red)); //替换画笔 painter->setPen(*p); //绘制文字 painter->drawText(300,300,"中国"); }
- 绘制矩形
//绘制事件 void MainWindow::paintEvent(QPaintEvent *event){ //创建画家 QPainter *painter = new QPainter(this); //画笔 QPen *p = new QPen(QColor(Qt::GlobalColor::red)); //替换画笔 painter->setPen(*p); //绘制矩形 painter->drawRect(50,50,200,200) }
- 绘制扇形
//绘制事件 void MainWindow::paintEvent(QPaintEvent *event){ //创建画家 QPainter *painter = new QPainter(this); //画笔 QPen *p = new QPen(QColor(Qt::GlobalColor::red)); //替换画笔 painter->setPen(*p); //绘制扇形 /** * 参数1:矩形左上角x * 参数2:矩形左上角y * 参数3:矩形宽度 * 参数4:矩形高度 * 参数5:扇形开始角度 * 参数6:扇形扫过的角度 */ painter->drawArc(300,300,100,100,0,30*16); }
- 绘制圆形
//绘制事件 void MainWindow::paintEvent(QPaintEvent *event){ //创建画家 QPainter *painter = new QPainter(this); //画笔 QPen *p = new QPen(QColor(Qt::GlobalColor::red)); //替换画笔 painter->setPen(*p); //绘制圆形 painter->drawEllipse(200,200,100,100); }
- 绘制多边形
//绘制事件 void MainWindow::paintEvent(QPaintEvent *event){ //创建画家 QPainter *painter = new QPainter(this); //画笔 QPen *p = new QPen(QColor(Qt::GlobalColor::red)); //替换画笔 painter->setPen(*p); QPoint point1(100,100); QPoint point2(100,150); QPoint point3(150,100); QPoint point4(150,200); QPoint point5(100,100); QPoint arr[] = {point1,point2,point3,point4,point5}; //绘制多边形 painter->drawConvexPolygon(arr,4); }