设计素材网站推荐pin适合工作室做的项目
1. 窗口布局
-  
Qt 提供了很多摆放控件的辅助工具(又称布局管理器或者布局控件),它们可以完成两件事:
-  
自动调整控件的位置,包括控件之间的间距、对齐等;
 -  
当用户调整窗口大小时,位于布局管理器内的控件也会随之调整大小,从而保持整个界面的美观。
 
 -  
 -  
Qt 共提供了4种布局管理器:
-  
QVBoxLayout(垂直布局)
 -  
QHBoxLayout(水平布局)
 -  
QGridLayout(网格布局、栅格布局、棋盘布局)
 -  
QFormLayout(表单布局)
 
 -  
 
1.1 垂直和水平布局
 
常用函数:
-  
layout -> addWidget(QWidget) : 向布局中添加部件
 -  
layout -> setSpacing(int) : 设置部件之间的距离
 -  
layout -> setDirection(QBoxLayout::LeftToRight) : 设置部件排列顺序
-  
QBoxLayout::LeftToRight
 -  
QBoxLayout::RightToLeft
 -  
QBoxLayout::TopToBottom
 -  
QBoxLayout::BottomToTop
 
 -  
 
QPushButton *btn1 = new QPushButton("btn1");
QPushButton *btn2 = new QPushButton("btn2");
QPushButton *btn3 = new QPushButton("btn3");ui->hl2->addWidget(btn1);
ui->hl2->addWidget(btn2);
ui->hl2->addWidget(btn3);
ui->hl2->setSpacing(30);
ui->hl2->setDirection(QBoxLayout::RightToLeft); 
1.2 网格布局
对整个窗体进行布局有: 水平布局、垂直布局、栅格布局 三种。

栅格布局的特点:
-  
随着窗口大小的改变,里面的部件也会随之改变
 -  
栅格布局中也能嵌套水平布局和垂直布局
 
动态调整部件的宽高


1.3 表单布局

2. 按钮类
2.1 QPushButton
-  
常用按钮:可以设置成文字按钮、图片按钮、带下拉菜单的按钮
 -  
设置成带下拉菜单按钮时需要配合 QMenu
 
// 一般按钮
ui->qBtn1->resize(80, 40);// 图片按钮
ui->qBtn2->resize(80, 40);
ui->qBtn2->setIcon(QIcon(":/images/ashe.jpg"));
ui->qBtn2->setIconSize(QSize(32, 32));// 图文按钮
ui->qBtn3->resize(80, 40);
ui->qBtn3->setText("狗头");// 下拉菜单按钮
ui->qBtn4->setText("选择学历");
ui->qBtn4->resize(80, 40);// 下拉菜单
QMenu *degree = new QMenu;
degree->addAction("博士");
degree->addAction("硕士");
degree->addAction("本科");
degree->addAction("大专");
degree->addAction("高中");// 将下拉菜单添加到按钮中
ui->qBtn4->setMenu(degree);
 
2.2 QToolButton
工具按钮:一般用于制作纯图按钮。 也可以设置成文字按钮 和 图片文字同时都有的按钮。如下图:


-  
toolButtonStyle:图片和文字排列方式
 -  
autoRaise:按钮透明
 
ui->toolBtn1->setText("一般按钮");
ui->toolBtn1->resize(80, 40);
ui->toolBtn1->move(30, 80);ui->toolBtn2->resize(80, 40);
ui->toolBtn2->move(130, 80);
ui->toolBtn2->setIconSize(QSize(60, 60));
ui->toolBtn2->setIcon(QIcon(":/images/jinx.jpg"));// 图文按钮
ui->toolBtn3->setText("狗头");
ui->toolBtn3->resize(80, 40);
ui->toolBtn3->move(230, 80);
ui->toolBtn3->setIcon(QIcon(":/images/goutou.jpg"));
// 设置图片和文字的排列方式
ui->toolBtn3->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
// 设置是否取消边框
ui->toolBtn3->setAutoRaise(true); 
2.3 Radio(单选框)
-  
QRadioButton: 单选框
 -  
若干个单选框需要设置为一个组才能实现单选效果
-  
QHBoxLayout 使用水平布局进行分组
 -  
QGroup
 
 -  
 
// 单选框 -- 性别
connect(ui->male, &QRadioButton::clicked, [=](){gender = 1;
});
connect(ui->female, &QRadioButton::clicked, [=](){gender = 0;
});
connect(ui->unknown, &QRadioButton::clicked, [=](){gender = 2;
}); 
// 单选框 -- 学位
void Widget::on_r1_clicked()
{degreeStr = ui->r1->text();qDebug() << degreeStr;
}void Widget::on_r2_clicked()
{degreeStr = ui->r2->text();qDebug() << degreeStr;
}void Widget::on_r3_clicked()
{degreeStr = ui->r3->text();qDebug() << degreeStr;
}void Widget::on_r4_clicked()
{degreeStr = ui->r4->text();qDebug() << degreeStr;
}
 
2.4 checkbox(复选框)
QCheckBox 类
-  
信号: stateChanged 当选择状态改变时触发
 -  
注意事项: 复选框也需要使用 水平|垂直布局 或者 QGroup 归为一组
 -  
复选框的半选状态
 
// 复选框
connect(ui->eatCheck, &QCheckBox::stateChanged, [=](){if(ui->eatCheck->isChecked()){hobbies.append("吃");}else{hobbies.removeAt(hobbies.indexOf("吃"));}qDebug() << hobbies;
});connect(ui->drinkCheck, &QCheckBox::stateChanged, [=](){if(ui->drinkCheck->isChecked()){hobbies.append("喝");}else{hobbies.removeAt(hobbies.indexOf("喝"));}qDebug() << hobbies;
});connect(ui->playCheck, &QCheckBox::stateChanged, [=](){if(ui->playCheck->isChecked()){hobbies.append("玩");}else{hobbies.removeAt(hobbies.indexOf("玩"));}qDebug() << hobbies;
});connect(ui->happyCheck, &QCheckBox::stateChanged, [=](){if(ui->happyCheck->isChecked()){hobbies.append("乐");}else{hobbies.removeAt(hobbies.indexOf("乐"));}qDebug() << hobbies;
}); 
复选框的半选状态:
QCheckBox *c = new QCheckBox("半选", this);
c->setCheckState(Qt::PartiallyChecked);
c->move(320, 300);
connect(c, &QCheckBox::stateChanged, [=](){qDebug() << c->checkState();
}); 
2.5 按钮组
QButtonGroup 用来创建一个按钮组,内部可以包含多个按钮。
方法:
-  
addButton(*btn, index) : 向按钮组中添加按钮。
-  
参数1 : 添加到按钮组中的按钮;
 -  
参数2 : 添加到组中的索引号
 
 -  
 
信号:
-  
buttonClicked(int index) : 点击按钮组中的按钮时触发,参数 int 保存点击的按钮的需要
 
class Widget : public QWidget
{Q_OBJECTpublic:explicit Widget(QWidget *parent = nullptr);~Widget();public slots:void btnGroupSlot(int index);private:Ui::Widget *ui;
}; 
// 创建按钮组
QButtonGroup *btnGroup = new QButtonGroup(this);// 向按钮组中添加按钮
btnGroup->addButton(ui->maleBtn, 0);
btnGroup->addButton(ui->femaleBtn, 1);
btnGroup->addButton(ui->unkownBtn, 2);// 链接按钮组的信号和槽函数
connect(btnGroup, SIGNAL(buttonClicked(int)), this, SLOT(btnGroupSlot(int))); 
void Widget::btnGroupSlot(int index)
{switch (index){case 0:qDebug() << "男";break;case 1:qDebug() << "女";break;case 2:qDebug() << "未知";break;}
} 
3. 输入类
3.1 QComboBox
QComboBox 用来设置下拉菜单
1.图形化设置

2)重要信号:
currentIndexChanged(int index) : 当选项发生改变时触发该信号,获取选中的索引号
void Widget::on_addrComBox_currentIndexChanged(int index)
{qDebug() << index;
} 
3)常用方法:
-  
addItem(QIcon, QString); 向下拉菜单中添加选项, QIcon 是可选参数
 -  
setCurrentIndex(index); 设置默认选中项
 
// 添加选项
ui->addrComBox->addItem("成都");
ui->addrComBox->addItem("重庆");// 设置默认选中项
ui->addrComBox->setCurrentIndex(1); 
案例: 批量向下拉菜单中添加数据,当选中某个选项时向控制台输出选中项数据
1) 头文件中声明数据类型 和 槽函数
// 头文件// 声明数据结构
struct HeroStruct
{int heroId;QString heroName;QString heroIcon;
};class Widget : public QWidget
{......private slots:// 槽函数void on_heroComboBox_currentIndexChanged(int index);private:Ui::Widget *ui;// 数据变量声明QList<HeroStruct> heroList;
}; 
heroList = {{1, "金克斯", ":/images/jinx.jpg"},{3, "琴女", ":/images/qinnv.jpeg"},{7, "亚索", ":/images/yasuo.jpeg"}
};// 循环添加
for(int i = 0; i < heroList.size(); i++)
{ui->heroComboBox->addItem(QIcon(heroList[i].heroIcon), heroList[i].heroName);
} 
void Widget::on_heroComboBox_currentIndexChanged(int index)
{qDebug() << index << heroList[index].heroId << heroList[index].heroName;
} 
3.2 QFontComboBox
QFontComboBox 是字体选择器,继承于 QComboBox

常用信号:
currentFontChanged(const QFont &font) : 选中字体发生改变时触发
void Widget::on_fontComboBox_currentFontChanged(const QFont &f)
{qDebug() << f.family();
} 
常用方法:
ui->fontComboBox->setCurrentFont(QFont("楷体")); 
3.3 数字框
-  
QSpinBox : 整型数字框
 -  
QDoubleSpinBox : 浮点型数字框
 
常用方法:
-  
setMinimum(int) : 设置最小值
 -  
setMaximum(int) :设置最大值
 -  
setValue(int) : 设置当前值
 -  
setPrefix(QString) : 设置前缀
 -  
setSuffix(QString) : 设置后缀
 -  
setSingleStep(int) : 设置步进值
 
信号: 当值发生改变时触发
-  
valueChanged(const QString &arg1)
 -  
valueChanged(int arg1)
 
图形化设置:

3.4 时间和日期
-  
QDateTimeEdit :日期时间
 -  
QTimeEdit : 时间框 (继承于 QDateTimeEdit)
 -  
QDateEdit : 日期框 (继承于 QDateTimeEdit)
 
常用方法:
QDateTimeEdit(QDateTime) : 构造函数
dateTimeEdit(QDateTime) : 设置日期时间
setDisplayFormat(format) :设置日期格式
setCalendarPopup(bool) : 弹出日期选择器
QDateTime d = QDateTime::currentDateTime();
ui->dateTimeEdit->setDateTime(d); 
// 利用构造函数
QDateTimeEdit *dt = new QDateTimeEdit(QDateTime(QDate(2023,10,10), QTime(9,10,20)), this);dt->setDisplayFormat("yyyy-MM-dd HH:mm:ss");
dt->move(242, 110); 
图形化设置:

3.5 QSlider
QSlider 滑动条
常用方法:
-  
QSlider(水平|垂直, this);
-  
Qt::Horizontal
 
 -  
 -  
setValue(int) : 设置当前值
 -  
setRange(min, max) : 设置值范围
 -  
setMinimum(int) / setMaximum(int) : 设置最小值和最大值
 -  
setTickPosition() : 设置是否是否有刻度
-  
QSlider::NoTicks //不显示刻度
 -  
QSlider::TicksBothSides //标尺两侧都显示刻度
 -  
QSlider::TicksAbove //标尺上方显示刻度
 -  
QSlider::TicksBelow //标尺下方显示刻度
 -  
QSlider::TicksLeft //标尺左侧显示刻度
 -  
QSlider::TicksRight //标尺右侧显示刻度
 
 -  
 -  
setTickInterval(int) : 刻度间隔
 
QSlider *hs = new QSlider(Qt::Horizontal, this);
hs->resize(200, 20);
hs->move(30, 170);
hs->setRange(0, 200);
hs->setTickPosition(QSlider::TicksBelow);
hs->setTickInterval(50); 
图形化

信号: 拖动滚动条时触发
valueChanged(int value)
void Widget::on_hSlider_valueChanged(int value)
{qDebug() << value;
} 
