Qt-窗口布局&按钮&输入类

岚月~白虎

于 2024-10-09 19:10:57 发布

阅读量731

点赞数 8

文章标签： qt 开发语言 c++

本文链接：https://blog.csdn.net/m0_74380601/article/details/142793615

版权

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_OBJECT

public:
    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;
}

岚月~白虎

关注

8
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫