• 公開視頻 ->?鏈接點擊跳轉公開課程
• 博客首頁 ->????鏈接點擊跳轉博客主頁

目錄

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));