Windows图形界面(GUI)-QT-C/C++ - Qt控件与布局系统详解

• 公开视频 -> 链接点击跳转公开课程
• 博客首页 -> ​​​链接点击跳转博客主页

目录

Qt布局系统(Layouts)

布局管理器基础

高级布局技巧

嵌套布局

设置间距和边距

常用控件详解

按钮类控件

QPushButton (标准按钮)

QRadioButton (单选按钮)

QCheckBox (复选框)

输入类控件

QLineEdit (单行输入)

QTextEdit (多行输入)

QSpinBox (数值输入)

显示类控件

QLabel (标签)

QProgressBar (进度条)

高级视图控件

Model-Based Views

QListView

QTreeView

Item-Based Widgets

QListWidget

QTableWidget

容器控件

QGroupBox

QTabWidget

QScrollArea

样式和外观

样式表

属性设置

Qt布局系统(Layouts)

布局管理器基础

Qt提供了强大的布局管理系统，用于自动管理控件的大小和位置。主要布局管理器包括：

1. QHBoxLayout (水平布局)

    QHBoxLayout* hLayout = new QHBoxLayout;
    hLayout->addWidget(new QPushButton("按钮1"));
    hLayout->addWidget(new QPushButton("按钮2"));
    hLayout->addWidget(new QPushButton("按钮3"));
    this->setLayout(hLayout);

1. QVBoxLayout (垂直布局)

    QVBoxLayout* vLayout = new QVBoxLayout;
    vLayout->addWidget(new QLabel("标签1"));
    vLayout->addWidget(new QLabel("标签2"));
    vLayout->addWidget(new QLabel("标签3"));
    this->setLayout(vLayout);

1. QGridLayout (网格布局)

    QGridLayout* gridLayout = new QGridLayout;
    gridLayout->addWidget(new QPushButton("1"), 0, 0);
    gridLayout->addWidget(new QPushButton("2"), 0, 1);
    gridLayout->addWidget(new QPushButton("3"), 1, 0, 1, 2); // 跨列
    this->setLayout(gridLayout);

1. QFormLayout (表单布局)

QFormLayout* formLayout = new QFormLayout;
    formLayout->addRow("姓名:", new QLineEdit);
    formLayout->addRow("年龄:", new QSpinBox);
    formLayout->addRow("简介:", new QTextEdit);
    this->setLayout(formLayout);

高级布局技巧

嵌套布局

    QVBoxLayout* mainLayout = new QVBoxLayout;
    QHBoxLayout* topLayout = new QHBoxLayout;

    topLayout->addWidget(new QPushButton("左"));
    topLayout->addWidget(new QPushButton("中"));
    topLayout->addWidget(new QPushButton("右"));

    mainLayout->addLayout(topLayout);
    mainLayout->addWidget(new QTextEdit);

    this->setLayout(mainLayout);

设置间距和边距

layout->setSpacing(10);              // 控件间距  
layout->setContentsMargins(10,10,10,10); // 边距

常用控件详解

按钮类控件

QPushButton (标准按钮)

QPushButton* btn = new QPushButton("点击我");  
btn->setIcon(QIcon(":/icons/click.png"));  

QRadioButton (单选按钮)

  // 创建按钮组
    QButtonGroup* group = new QButtonGroup(this);

    // 创建单选按钮
    QRadioButton* radio1 = new QRadioButton("选项1", this);
    QRadioButton* radio2 = new QRadioButton("选项2", this);

    // 将按钮添加到按钮组
    group->addButton(radio1);
    group->addButton(radio2);

    // 创建垂直布局
    QVBoxLayout* layout = new QVBoxLayout;

    // 将单选按钮添加到布局中
    layout->addWidget(radio1);
    layout->addWidget(radio2);

    // 设置布局
    setLayout(layout);

QCheckBox (复选框)

    QCheckBox* check = new QCheckBox("同意条款", this);
    connect(check, &QCheckBox::stateChanged, this, [](int state){
        qDebug() << "状态变更:" << state;
    });

输入类控件

QLineEdit (单行输入)

    QLineEdit* lineEdit = new QLineEdit(this);
    lineEdit->setPlaceholderText("请输入用户名");
    lineEdit->setMaxLength(20);

QTextEdit (多行输入)

    QTextEdit* textEdit = new QTextEdit(this);
    textEdit->setPlaceholderText("请输入描述");
    textEdit->setAcceptRichText(true);

QSpinBox (数值输入)

    QSpinBox* spinBox = new QSpinBox(this);
    spinBox->setRange(0, 100);
    spinBox->setSingleStep(5);
    spinBox->setValue(50);

显示类控件

QLabel (标签)

    QLabel* label = new QLabel(this);
    label->setText("Hello <b>Qt</b>");
    label->setTextFormat(Qt::RichText);

QProgressBar (进度条)

    QProgressBar* progressBar = new QProgressBar(this);
    progressBar->setRange(0, 100);
    progressBar->setValue(75);
    progressBar->setTextVisible(true);

高级视图控件

Model-Based Views

QListView

    QStringListModel* model = new QStringListModel;
    model->setStringList(QStringList() << "项目1" << "项目2" << "项目3");

    QListView* listView = new QListView(this);
    listView->setModel(model);
    listView->setEditTriggers(QAbstractItemView::NoEditTriggers);

QTreeView

    QStandardItemModel* model = new QStandardItemModel;
    QStandardItem* parentItem = model->invisibleRootItem();
    parentItem->appendRow(new QStandardItem("父节点1"));
    parentItem->child(0)->appendRow(new QStandardItem("子节点1"));

    QTreeView* treeView = new QTreeView(this);
    treeView->setModel(model);

Item-Based Widgets

QListWidget

    QListWidget* listWidget = new QListWidget(this);
    listWidget->addItem("项目1");
    listWidget->addItem("项目2");
    listWidget->addItem("项目3");

    connect(listWidget, &QListWidget::itemClicked, this, [](QListWidgetItem* item){
        qDebug() << "选中:" << item->text();
    });

QTableWidget

    QTableWidget* tableWidget = new QTableWidget(3, 3, this);
    tableWidget->setHorizontalHeaderLabels({"列1", "列2", "列3"});
    tableWidget->setItem(0, 0, new QTableWidgetItem("单元格(0,0)"));

容器控件

QGroupBox

    QGroupBox* groupBox = new QGroupBox("选项组",this);
    QVBoxLayout* layout = new QVBoxLayout;
    layout->addWidget(new QRadioButton("选项1"));
    layout->addWidget(new QRadioButton("选项2"));
    groupBox->setLayout(layout);

QTabWidget

    QTabWidget* tabWidget = new QTabWidget(this);
    tabWidget->addTab(new QWidget, "标签1");
    tabWidget->addTab(new QWidget, "标签2");
    tabWidget->setTabPosition(QTabWidget::North);

样式和外观

样式表

// 按钮样式  
QString buttonStyle = R"(  
    QPushButton {  
        background-color: #4CAF50;  
        border: none;  
        color: white;  
        padding: 8px 16px;  
        border-radius: 4px;  
    }  
    QPushButton:hover {  
        background-color: #45a049;  
    }  
    QPushButton:pressed {  
        background-color: #3d8b40;  
    }  
)";  
button->setStyleSheet(buttonStyle);

属性设置

widget->setProperty("class", "primary");  
widget->setMinimumSize(100, 30);  
widget->setFont(QFont("Arial", 12));