【零基础学QT】【027】Qt常用控件和布局

Qt本质上只是一个对C++进行了全面封装的界面库和功能库
我们只需了解其常用功能和核心原理即可，细节之处不必逐一死记

下面基本汇总了Qt自带的所有控件，入手慢的给出了一些基本的使用代码

QWidget：所有Qt控件的基类

QFrame：加强版的QWidget
增加了边框功能，可以为控件设置边框样式和阴影，比QWidget支持更多的stylesheet

    //设置QFrame边框形状和阴影
    QFrame *frame = new QFrame();
    frame->setWindowTitle("QFrame");
    frame->setGeometry(100, 100, 1280, 720);
    frame->setFrameShape(QFrame::WinPanel);
    frame->setFrameShadow(QFrame::Plain);
    frame->setFrameStyle(QFrame::WinPanel | QFrame::Plain);
    frame->show();

QLabel：文本标签

    //窗口
    QMainWindow window;
    window.setGeometry(100, 100, 800, 450);
    window.show();

    //窗口主内容区域
    QWidget *centralWidget = new QWidget(&window);
    window.setCentralWidget(centralWidget);

    //添加QLabel控件
    QLabel *label = new QLabel(centralWidget);
    label->setGeometry(50, 50, 200, 50);
    label->setText("QLabel");

QLineEdit ：单行文本编辑框

    //添加QLineEdit控件
    QLineEdit *edit = new QLineEdit(centralWidget);
    edit->setGeometry(50, 50, 200, 50);
    edit->setText("QLineEdit2");

QTextEdit ：多行文本编辑框

    //添加QTextEdit控件
    QTextEdit *edit = new QTextEdit(centralWidget);
    edit->setGeometry(50, 50, 200, 50);
    edit->setText("QTextEdit");
    edit->setHtml("<h1>Header Level 1</h1>");

QPlainTextEdit ：处理大型文本的编辑框
QPlainTextEdit由QTextEdit优化而来，使其更适合处理大型文本
QPlainTextEdit文本处理效率的提升，是以牺牲细节为代价的，因此在界面展现上会逊色于QTextEdit

    //添加QPlainTextEdit控件
    QPlainTextEdit *edit = new QPlainTextEdit(centralWidget);
    edit->setGeometry(50, 50, 200, 600);
    edit->setPlainText("QPlainTextEdit");                 //设置文本
    edit->insertPlainText("Insert Text\n");               //头部插入文本
    edit->appendPlainText("Append Text");                 //尾部添加文本
    edit->appendHtml("<h1 style='color:red;'>HTML</h1>"); //添加HTML文本
    QString plainText = edit->toPlainText();              //获取普通文本，HTML代码也将只保留字面文字
    cout << plainText.toStdString() << endl;

QTextBrowser：文本浏览器
用于显示复杂格式的文本，不能编辑

QPushButton：按钮

    //窗口
    QMainWindow window;
    window.setGeometry(100, 100, 800, 450);
    window.show();

    //窗口主内容区域
    QWidget *centralWidget = new QWidget(&window);
    window.setCentralWidget(centralWidget);

    //添加QPushButton控件
    QPushButton *button = new QPushButton(centralWidget);
    button->setGeometry(50, 50, 200, 50);
    button->setText("QPushButton");

QToolButton：工具按钮
一般摆放在QToolBar中，不但可以显示文字，还可以显示图标

QRadioButton：单选框
一般摆放在QButtonGroup中，一组只能选中一个

QCommandLinkButton：选项按钮
用于选项对话框中，从多个选项中选择一个选项

QDialogButtonBox：对话框按钮组
提供了对话框中常用的按钮，可以任意组合

QCheckBox：复选框

QComboBox：下拉框

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

	//设置下拉选项
    QComboBox *comboBox = w.ui->comboBox;
    comboBox->insertItem(comboBox->count(), "item-1");
    comboBox->insertItem(comboBox->count(), "item-2");
    comboBox->insertItem(comboBox->count(), "item-3");
    comboBox->insertItem(comboBox->count(), "item-4");
    comboBox->insertItem(comboBox->count(), "item-5");
    
    //设置选中项
    comboBox->setCurrentIndex(2);

QFontComboBox：字体选择框
可选择所有已安装的系统字体

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

    //设置初始项
    QFontComboBox *fontComboBox = w.ui->fontComboBox;
    fontComboBox->setCurrentIndex(20);

    //获取字体名称
    QFont font = fontComboBox->currentFont();
    std::cout << fontComboBox->itemText(20).toStdString() << std::endl;
    std::cout << font.family().toStdString() << std::endl;

    //设置选中字体和控件自身字体
    fontComboBox->setCurrentFont(font);
    fontComboBox->setFont(font);

QSpinBox：数字微调框
可以通过微调按钮来增加或减小编辑框里面的数值

QDoubleSpinBox：小数微调框

QDateEdit：日期编辑框
以编辑框加微调按钮的形式编辑日期

QTimeEdit：时间编辑框

QDateTimeEdit：日期时间编辑框

QCalendarWidget：日历控件

QKeySequenceEdit：按键监听器
可以监听和显示按键组合

QProgressBar：进度条

QSlider：滑块

QScrollBar：滚动条

QDial：表盘控件
可以通过拖拽或上下左右按键来控制表盘刻度转动

Line：分割线
可以设置分割线的方向和宽度

QScrollArea：滚动面板
可以容纳一个子Widget，子Widget过大时，以滚动方式显示

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

    // 设置内容面板和布局
    // QScrollArea只能拥有一个子Widget
    QScrollArea *scrollArea = w.ui->scrollArea;
    QWidget *contentWidget = new QWidget();
    scrollArea->setWidget(contentWidget);
    QVBoxLayout *layout = new QVBoxLayout();
    contentWidget->setLayout(layout);

    // 调整内容面板大小
    // 如果resizable=false，内容面板会和ScrollArea一样大小
    // 对于QVBoxLayout来说，这也做的结果就是，没有滚动条，100个item平分ScrollArea的高度
    scrollArea->setWidgetResizable(true);
    for (int i = 0; i < 100; i++) layout->addWidget(new QLabel("Hello"));

QHBoxLayout：水平布局
所有子控件横向排列

    //创建主窗口
    MainWindow w;
    w.setWindowTitle("Qt Widgets");
    w.setGeometry(100, 100, 800, 450);
    w.show();

    //创建一个按钮
    QPushButton *button = new QPushButton();
    button->setGeometry(0, 0, 200, 50);
    button->setText("ABC");

    //为中央面板设置水平布局
    QHBoxLayout *hLayout = new QHBoxLayout();
    w.ui->centralWidget->setLayout(hLayout);

    //按钮居中，左右的弹性区域按照1:2的比例分配剩余空间
    hLayout->addStretch(1);
    hLayout->addWidget(button);
    hLayout->addStretch(2);

QVBoxLayout：竖直布局
所有子控件竖直排列

QGridLayout：网格布局
按行列将布局划分为若干区域，摆放子控件

    MainWindow w;
    w.show();

    Ui::MainWindow *ui = w.ui;
    QWidget *centralWidget = ui->centralWidget;

    //为中央面板设置网格布局
    QGridLayout *gridLayout = new QGridLayout();
    centralWidget->setLayout(gridLayout);

    //设置布局参数，这里以一个4*4等宽等高的网格为例
    //四行按1:1:1:1的比例关系占据布局空间
    gridLayout->setRowStretch(0, 1);
    gridLayout->setRowStretch(1, 1);
    gridLayout->setRowStretch(2, 1);
    gridLayout->setRowStretch(3, 1);
    //四列按1:1:1:1的比例关系占据布局空间
    gridLayout->setColumnStretch(0, 1);
    gridLayout->setColumnStretch(1, 1);
    gridLayout->setColumnStretch(2, 1);
    gridLayout->setColumnStretch(3, 1);
    //设置水平竖直间距
    gridLayout->setHorizontalSpacing(5);
    gridLayout->setVerticalSpacing(5);

    //创建若干按钮
    QPushButton *button1 = new QPushButton("1");
    QPushButton *button2 = new QPushButton("2");
    QPushButton *button3 = new QPushButton("3");
    QPushButton *button4 = new QPushButton("4");

    //从第一行第一列开始添加按钮，占据一行一列的空间
    gridLayout->addWidget(button1, 0, 0, 1, 1);
    //从第一行第二列开始添加按钮，占据一行三列的空间
    gridLayout->addWidget(button2, 0, 1, 1, 3);
    //从第二行第三列添加按钮，默认占据一行一列的空间
    gridLayout->addWidget(button3, 1, 2);
    //从尾行的末列之后，或新行的首列开始添加按钮
    gridLayout->addWidget(button4);

QFormLayout：表单布局
将若干组标签-编辑框，按左右或上下位置进行排列

    MainWindow w;
    w.show();

    Ui::MainWindow *ui = w.ui;
    QWidget *centralWidget = ui->centralWidget;

    //为中央面板设置表单布局
    QFormLayout *formLayout = new QFormLayout();
    centralWidget->setLayout(formLayout);

    //设置标签-编辑框布局方式
    //左右排列，上下排列，空间不足时上下排列
    formLayout->setRowWrapPolicy(QFormLayout::RowWrapPolicy::WrapLongRows);

    //创建若干组标签和编辑框
    QLabel *label1 = new QLabel("姓名");
    QLabel *label2 = new QLabel("姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名");
    QLabel *label3 = new QLabel("姓名姓名姓名");
    QLineEdit *edit1 = new QLineEdit();
    QLineEdit *edit2 = new QLineEdit();
    QLineEdit *edit3 = new QLineEdit();

    //添加控件到布局
    formLayout->addRow(label1, edit1);
    formLayout->addRow(label2, edit2);
    formLayout->addRow(label3, edit3);

QListView：列表控件

    // 创建主窗口
    MainWindow  w;
    w.setWindowTitle("Qt  Widgets");
    w.setGeometry(100,  100,  800,  450);
    w.show();

    // 创建数据模型
    // QStandardItem可以直接用string作为数据，也可以通过setData设置复杂数据
    QStandardItemModel  *model  =  new  QStandardItemModel();
    model->appendRow(new  QStandardItem("item1"));
    model->appendRow(new  QStandardItem("item2"));
    model->appendRow(new  QStandardItem("item3"));
    model->appendRow(new  QStandardItem("item4"));
    model->appendRow(new  QStandardItem("item5"));

    // 绑定数据模型
    QListView  *listView  =  w.ui->listView;
    listView->setModel(model);

    // 绑定ItemDelegate
    // ItemDelegate可以决定如何绘制一个复杂的Item，可用于显示复杂的Model数据
    listView->setItemDelegate(nullptr);

QTreeView：树状控件

    //为QTreeView绑定数据模型
    QTreeView *treeView = w.ui->treeView;
    QStandardItemModel *model = new QStandardItemModel();
    treeView->setModel(model);

    //设置横向标题
    QStringList hHeaderList = QStringList() << "A" << "B" << "C" << "D";
    model->setHorizontalHeaderLabels(hHeaderList);

    //设置三级树结构数据
    QStandardItem *item1 = new QStandardItem("Item 1");
    model->appendRow(item1);
    QStandardItem *item11 = new QStandardItem("Item 1-1");
    item1->appendRow(item11);
    item1->appendRow(new QStandardItem("Item 1-2"));
    item1->appendRow(new QStandardItem("Item 1-3"));
    item1->appendRow(new QStandardItem("Item 1-4"));
    item11->appendRow(new QStandardItem("Item 1-1-1"));
    item11->appendRow(new QStandardItem("Item 1-1-2"));
    item11->appendRow(new QStandardItem("Item 1-1-3"));

    //设置其它列数据
    model->setItem(0, 1, new QStandardItem("Hello"));
    model->setItem(0, 2, new QStandardItem("Hello"));
    model->setItem(0, 3, new QStandardItem("Hello"));
    model->setItem(0, 4, new QStandardItem("Hello"))

QTableView：表格控件

    MainWindow w;
    w.show();

    //获取QTableView
    QTableView *tableView = w.ui->tableView;

    //设置是否可编辑
    tableView->setEditTriggers(QAbstractItemView::DoubleClicked);
    //设置整行选中
    tableView->setSelectionBehavior(QAbstractItemView::SelectRows);
    //设置只能选中单条记录
    tableView->setSelectionMode(QAbstractItemView::SingleSelection);
    //显示表头
    tableView->horizontalHeader()->setVisible(true);
    tableView->verticalHeader()->setVisible(true);
    //显示网格线
    tableView->setShowGrid(true);
    //设置网格线风格
    tableView->setGridStyle(Qt::DotLine);

    //绑定数据模型
    QStandardItemModel *model = new QStandardItemModel();
    QStringList horizontalHeaderList = QStringList() << "A" << "B" << "C";
    QStringList verticalHeaderList = QStringList() << "1" << "2" << "3";
    model->setHorizontalHeaderLabels(horizontalHeaderList);
    model->setVerticalHeaderLabels(verticalHeaderList);
    tableView->setModel(model);

    //添加数据
    model->setItem(0, 0, new QStandardItem("A1"));
    model->setItem(0, 1, new QStandardItem("A2"));
    model->setItem(0, 2, new QStandardItem("A3"));
    model->setItem(1, 0, new QStandardItem("B1"));
    model->setItem(1, 1, new QStandardItem("B2"));
    model->setItem(1, 2, new QStandardItem("B3"));

    //设置表格样式
    tableView->setStyleSheet(
        "QTableView {"
        "	color: rgba(0,0,0,0.8);"
        "	selection-background-color: deepskyblue;"
        "}"
	);

QListWidget：列表控件
简化版的QListView，跳过Model直接使用Item设置内容

    //获取QListWidget
    QListWidget *listWidget = w.ui->listWidget;

    //直接添加Item
    QListWidgetItem *item1 = new QListWidgetItem("item-1");
    QListWidgetItem *item2 = new QListWidgetItem("item-2");
    QListWidgetItem *item3 = new QListWidgetItem("item-3");
    listWidget->addItem(item1);
    listWidget->addItem(item2);
    listWidget->addItem(item3);

QTreeWidget：树状控件
简化版的QTreeView，跳过Model直接使用Item设置内容

    //创建主窗口
    MainWindow w;
    w.setWindowTitle("Qt Widgets");
    w.setGeometry(100, 100, 800, 450);
    w.show();

    //设置列标题
    QTreeWidget *treeWidget = w.ui->treeWidget;
    treeWidget->setColumnCount(3);
    treeWidget->setHeaderLabels(QStringList() << "A" << "B" << "C");

    //设置顶层数据
    QTreeWidgetItem *item1 = new QTreeWidgetItem(QStringList() << "item-1" << "B" << "C");
    QTreeWidgetItem *item2 = new QTreeWidgetItem(QStringList() << "item-2" << "B" << "C");
    treeWidget->insertTopLevelItem(0, item1);
    treeWidget->insertTopLevelItem(1, item2);

    //设置下级数据
    item1->addChild(new QTreeWidgetItem(QStringList() << "item-1-1" << "B" << "C"));
    item1->addChild(new QTreeWidgetItem(QStringList() << "item-1-2" << "B" << "C"));
    item1->addChild(new QTreeWidgetItem(QStringList() << "item-1-3" << "B" << "C"));

QTableWidget：表格控件
简化版的QTableView，跳过Model直接使用Item设置内容

    //创建主窗口
    MainWindow w;
    w.setWindowTitle("Qt Widgets");
    w.setGeometry(100, 100, 800, 450);
    w.show();

    //设置表格标题
    QTableWidget *tableWidget = w.ui->tableWidget;
    tableWidget->setColumnCount(3);
    tableWidget->setRowCount(10);
    tableWidget->setHorizontalHeaderLabels(QStringList() << "A" << "B" << "C");
    tableWidget->setVerticalHeaderLabels(QStringList() << "R1" << "R2" << "R3");

    //设置表格数据
    tableWidget->setItem(0, 0, new QTableWidgetItem("A1"));
    tableWidget->setItem(0, 1, new QTableWidgetItem("B1"));
    tableWidget->setItem(0, 2, new QTableWidgetItem("C1"));
    tableWidget->setItem(1, 0, new QTableWidgetItem("A2"));
    tableWidget->setItem(1, 1, new QTableWidgetItem("B2"));
    tableWidget->setItem(1, 2, new QTableWidgetItem("C2"));

QUndoView：命令撤销重做控件
与QUndoStack，QUndoCommand一起使用
可以记录并显示一组命令，还可以对这些命令进行撤销重做操作
具体用法可以在Qt Creator首页的示例代码中查看

QColumnView：列视图控件
一列展开后，可以显示子列内容

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

    //绑定数据模型
    QColumnView *columnView = w.ui->columnView;
    QStandardItemModel *model = new QStandardItemModel();
    columnView->setModel(model);

    //添加多层列数据
    QStandardItem *item1 = new QStandardItem("record-1");
    QStandardItem *item2 = new QStandardItem("record-2");
    QStandardItem *item3 = new QStandardItem("record-3");
    model->appendRow(item1);
    model->appendRow(item2);
    model->appendRow(item3);
    QStandardItem *item11 = new QStandardItem("record-1-1");
    QStandardItem *item12 = new QStandardItem("record-1-2");
    QStandardItem *item13 = new QStandardItem("record-1-3");
    item1->appendRow(item11);
    item1->appendRow(item12);
    item1->appendRow(item13);
    QStandardItem *item131 = new QStandardItem("record-1-3-1");
    item13->appendRow(item131);

QGroupBox：分组框
用一个带标题的框形容器，包裹一组控件

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

    //设置布局
    QGroupBox *groupBox = w.ui->groupBox;
    QHBoxLayout *layout = new QHBoxLayout();
    groupBox->setLayout(layout);

    //添加控件
    layout->addStretch(1);
    QPushButton *button1 = new QPushButton("Button1");
    layout->addWidget(button1, 2);
    QPushButton *button2 = new QPushButton("Button2");
    layout->addWidget(button2, 2);
    layout->addStretch(1);

QToolBox：竖向选项卡控件
命名不是很准确，相当于QVerticalQTabWidget
拥有多个竖向排列的选项卡，每个选项卡控制一个面板内容的显示隐藏

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

	//移除QtDesigner默认生成的选项卡
    QToolBox *toolBox = w.ui->toolBox;
    toolBox->removeItem(0);
    
    //添加新的选项卡
    toolBox->addItem(new QLabel("Hello"), "Page-1");
    toolBox->addItem(new QLabel("Hello"), "Page-2");
    toolBox->addItem(new QLabel("Hello"), "Page-3");
    toolBox->addItem(new QLabel("Hello"), "Page-4");
    toolBox->addItem(new QLabel("Hello"), "Page-5");

QTabWidget：选项卡控件
通过选项卡以分页的方式显示若干组内容

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

	//移除QtDesigner默认生成的标签页
    QTabWidget *tabWidget = w.ui->tabWidget;
    tabWidget->removeTab(0);
    tabWidget->removeTab(0);

	//插入标签页
    tabWidget->insertTab(tabWidget->count(), new QLabel("Hello"), "Page-1");
    tabWidget->insertTab(tabWidget->count(), new QLabel("Hello"), "Page-2");
    tabWidget->insertTab(tabWidget->count(), new QLabel("Hello"), "Page-3");
    tabWidget->insertTab(tabWidget->count(), new QLabel("Hello"), "Page-4");
    tabWidget->insertTab(tabWidget->count(), new QLabel("Hello"), "Page-5");

QStackWidget：堆栈窗体
以堆栈形式存储多个界面内容，动态显示其中一个界面
一般配合QComboBox或其它切换控件使用

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

	//设置每个面板的界面
    QStackedWidget *stackWidget = w.ui->stackedWidget;
    stackWidget->insertWidget(stackWidget->count(), new QLabel("Hello-1"));
    stackWidget->insertWidget(stackWidget->count(), new QLabel("Hello-2"));
    stackWidget->insertWidget(stackWidget->count(), new QLabel("Hello-3"));
    stackWidget->insertWidget(stackWidget->count(), new QLabel("Hello-4"));
    stackWidget->insertWidget(stackWidget->count(), new QLabel("Hello-5"));

	//设置显示的界面
    stackWidget->setCurrentIndex(3);

QDockWidget：悬停窗口
以悬停面板的方式停靠在主窗口的侧边，可以拖拽，合并，浮动，停靠

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

    //允许Dock窗口间的联动行为
    w.setDockNestingEnabled(true);

    //添加Dock
    QDockWidget *dock1 = new QDockWidget("D1");
    w.addDockWidget(Qt::DockWidgetArea::RightDockWidgetArea, dock1, Qt::Orientation::Vertical);
    QDockWidget *dock2 = new QDockWidget("D2");
    w.addDockWidget(Qt::DockWidgetArea::RightDockWidgetArea, dock2, Qt::Orientation::Vertical);
    QDockWidget *dock3 = new QDockWidget("D3");
    w.addDockWidget(Qt::DockWidgetArea::RightDockWidgetArea, dock3, Qt::Orientation::Vertical);

    //合并成标签显示
    w.tabifyDockWidget(dock1, dock2);
    w.tabifyDockWidget(dock1, dock3);

    //分开并列显示
    w.splitDockWidget(dock1, dock2, Qt::Orientation::Horizontal);
    w.splitDockWidget(dock2, dock3, Qt::Orientation::Horizontal);

    //设置拐角区域属于哪一侧
    w.setCorner(Qt::Corner::BottomLeftCorner, Qt::DockWidgetArea::BottomDockWidgetArea);

    //限制Dock只能显示在固定区域
    dock1->setAllowedAreas(Qt::DockWidgetArea::RightDockWidgetArea);

    //设置Dock不可拖动，不可关闭，不可浮动
    dock1->setFeatures(QDockWidget::NoDockWidgetFeatures);

    //设置Dock可拖动，可关闭，可浮动
    dock1->setFeatures(
        QDockWidget::DockWidgetMovable |
        QDockWidget::DockWidgetClosable |
        QDockWidget::DockWidgetFloatable
    );

QMdiArea：多文档窗体
MDI全称Multi-Document-Interface，即多文档用户界面
用于容纳多个文档窗口，配合QMdiSubWindow使用

    MainWindow w;
    w.setGeometry(100, 100, 1280, 720);
    w.show();

    QMdiArea *mdiArea = w.ui->mdiArea;

    // 添加子窗口
    QMdiSubWindow *w1 = new QMdiSubWindow();
    mdiArea->addSubWindow(w1);
    w1->show();
    w1->resize(200, 100);

    // 添加子窗口
    QMdiSubWindow *w2 = new QMdiSubWindow();
    mdiArea->addSubWindow(w2);
    w2->show();
    w2->resize(500, 100);

    // 添加QWidget作为子窗口
    // Qt会自动创建一个QMdiSubWindow来包装QWidget
    QWidget *w3 = new QPushButton("Hello");
    mdiArea->addSubWindow(w3);
    w3->setWindowFlags(Qt::SubWindow);
    w3->show();
    mdiArea->activeSubWindow()->resize(500, 100);

    //子窗口并列排序
    mdiArea->tileSubWindows();

    //子窗口层叠排序
    mdiArea->cascadeSubWindows();

QAxWidget：ActiveX控件
可以调用ActiveX组件来处理任务

    MainWindow w;
    w.setWindowTitle("Qt Widget");
    w.setGeometry(100, 100, 1280, 720);
    w.show();

    QAxWidget *ax = w.ui->axWidget;

    //打开Excel
    ax->setControl("C:/abc.xlsx");

    //打卡网页
    ax->setControl("{8856F961-340A-11D0-A96B-00C04FD705A2}");
    ax->dynamicCall("Navigate(string)", "https://www.baidu.com");
    ax->setProperty("DisplayAlerts", false);

QQuickWidget和QQuickView：QtQuick控件
后面会专门介绍

QGraphicsView和QOpenGLWidget：绘图控件
高级知识，感兴趣请自学