QT常用控件篇（3）（下）

一、多元素控件1.介绍和要点前面两个是列表中间两个是表格后面两个是树形要点View 仅负责“视图”V在MVCModel-View-Controller 架构中View 只承担数据的可视化呈现不包含数据本身Model也不处理用户交互逻辑ControllerWidget 是更高层的封装Widget 不仅包含 View 的显示能力还内嵌了 Model数据管理 和Controller交互逻辑、事件响应、业务流程形成一个自包含的 UI 组件1.1 List Widget列表1.属性2.方法QListWidgetItem相当于QListWidget的元素3.信号4.代码//添加元素 ui-listWidget-addItem(C); ui-listWidget-addItem(Java); ui-listWidget-addItem(Python); void MainWindow::on_pushButton_clicked() { QString str ui-lineEdit-text();//获取文本 ui-listWidget-addItem(str); } void MainWindow::on_pushButton_2_clicked() { //获取当前被选中的元素 int row ui-listWidget-currentRow(); //删除这一行 ui-listWidget-takeItem(row); } //选中不同元素会触发如果你选的不是第一个元素那么之前选中默认为第一个元素如果你选的是第一个元素就不会有反应 void MainWindow::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous) { if(current ! NULL previous ! NULL) { qDebug()当前选中 current-text(); qDebug()之前选中 previous-text(); } }1.2 Table Widget表格1.方法重点倒数两个的类型错了应该是QTableWidgetItem类型QTable Widget Item方法信号2.代码//创建3行 ui-tableWidget-insertRow(0); ui-tableWidget-insertRow(1); ui-tableWidget-insertRow(2); //创建3列 ui-tableWidget-insertColumn(0); ui-tableWidget-insertColumn(1); ui-tableWidget-insertColumn(2); //给3行去行名 ui-tableWidget-setVerticalHeaderItem(0,new QTableWidgetItem(第一行)); ui-tableWidget-setVerticalHeaderItem(1,new QTableWidgetItem(第二行)); ui-tableWidget-setVerticalHeaderItem(2,new QTableWidgetItem(第三行)); //给3列去列名 ui-tableWidget-setHorizontalHeaderItem(0,new QTableWidgetItem(学号)); ui-tableWidget-setHorizontalHeaderItem(1,new QTableWidgetItem(姓名)); ui-tableWidget-setHorizontalHeaderItem(2,new QTableWidgetItem(年龄)); //设置初始数据 ui-tableWidget-setItem(0,0,new QTableWidgetItem(1001)); ui-tableWidget-setItem(0,1,new QTableWidgetItem(张三)); ui-tableWidget-setItem(0,2,new QTableWidgetItem(18)); ui-tableWidget-setItem(1,0,new QTableWidgetItem(1002)); ui-tableWidget-setItem(1,1,new QTableWidgetItem(李四)); ui-tableWidget-setItem(1,2,new QTableWidgetItem(19)); ui-tableWidget-setItem(2,0,new QTableWidgetItem(1003)); ui-tableWidget-setItem(2,1,new QTableWidgetItem(王五)); ui-tableWidget-setItem(2,2,new QTableWidgetItem(18)); //新增一行 void MainWindow::on_pushButton_clicked() { int row ui-tableWidget-rowCount();//获取行数 ui-tableWidget-insertRow(row); } //新增一列 void MainWindow::on_pushButton_2_clicked() { int col ui-tableWidget-columnCount();//获取列数 ui-tableWidget-insertColumn(col); } //删除一行 void MainWindow::on_pushButton_3_clicked() { int row ui-tableWidget-currentRow();//获取行号 ui-tableWidget-removeRow(row); } //删除一列 void MainWindow::on_pushButton_4_clicked() { int col ui-tableWidget-currentColumn();//获取行数 ui-tableWidget-removeColumn(col); }1.3 Tree Widget树形1.介绍和要点介绍“Tree Widget”相关的功能主要用于以树形结构展示层次化数据用户可展开或折叠节点并通过选择节点来管理数据。它的要点Tree Widget这个树形结构是没有根节点的所谓的顶层节点其实就是第一层节点。2.方法3.信号TreeWidgetItem属性方法4.代码//设置根目录的名字虽然这个树形不存在根目录但是可以给它取名 ui-treeWidget-setHeaderLabel(动物); QTreeWidgetItem* item1 new QTreeWidgetItem(); item1-setText(0,猫);//0是下表 ui-treeWidget-addTopLevelItem(item1); QTreeWidgetItem* item2 new QTreeWidgetItem(); item2-setText(0,狗); ui-treeWidget-addTopLevelItem(item2); QTreeWidgetItem* item3 new QTreeWidgetItem(); item3-setText(0,鸟); ui-treeWidget-addTopLevelItem(item3); //添加到顶层 void MainWindow::on_pushButton_clicked() { //获取输入框内容 const QString text ui-lineEdit-text(); if(text.isEmpty()) { return; } QTreeWidgetItem* item new QTreeWidgetItem(); item-setText(0,text); ui-treeWidget-addTopLevelItem(item); } //添加到指定节点下面 void MainWindow::on_pushButton_2_clicked() { //获取输入框内容 const QString text ui-lineEdit-text(); if(text.isEmpty()) { return; } //获取当前选中的节点 QTreeWidgetItem* item ui-treeWidget-currentItem(); if(item NULL) { return; } //构造新的item QTreeWidgetItem* newItem new QTreeWidgetItem(); newItem-setText(0,text); item-addChild(newItem);//添加到当前选中节点 } void MainWindow::on_pushButton_3_clicked() { //获取当前选中的节点 QTreeWidgetItem* item ui-treeWidget-currentItem(); if(item NULL) { return; } //获取当前选中节点的父节点 QTreeWidgetItem* parent item-parent(); if(parent NULL) { //顶层节点 int index ui-treeWidget-indexOfTopLevelItem(item); ui-treeWidget-takeTopLevelItem(index); } else { //非顶层节点 parent-removeChild(item); } }二、容器类2.1 Group Box1.介绍和要点介绍“Group Box”相关的功能主要用于将一组相关的控件进行逻辑和视觉上的分组提供带标题的框架容器。容器类和多元素控件的区别多元素控件它包含的内容是一个个自定义好的Item 对象。容器类控件包含的是各种控件被容器类包含的控件其父元素就不再是this窗口而是容器。2.属性重点如果checked为false没有选中那么容器里的控件无法使用2.2 Tab Widget1.介绍介绍“Tab Widget”相关的功能主要用于提供一个多页面的切换容器每个页面标签页可承载不同的界面内容用户通过点击标签标题在不同页面间切换。要点每一个标签页都是一个QWidgetui-Tab1;//就可以访问到这个标签了2.属性3.信号4.方法addTabint addTab(QWidget *page, const QString label) // 功能向 QTabWidget 中添加一个新标签页并返回该页的索引 // 参数说明 // • page 要添加为新标签页的 QWidget 指针 // • label 标签页上方显示的文本标题removeTabvoid QTabWidget::removeTab(int index); // 功能从 QTabWidget 中移除指定索引的标签页 // 参数说明 // • index 要移除的标签页的索引从 0 开始5.代码void MainWindow::on_pushButton_clicked() { //使用addTab方法创建新的标签页 int count ui-tabWidget-count();//获取标签页数量 QWidget* w new QWidget(); ui-tabWidget-addTab(w,QString(Tab) QString::number(count 1)); //设置新标签被选中 ui-tabWidget-setCurrentIndex(count); } void MainWindow::on_pushButton_2_clicked() { //使用removeTab删除标签 int index ui-tabWidget-currentIndex();//获取选中的标签下表 ui-tabWidget-removeTab(index); }三、布局管理器3.1 VBoxLayout垂直布局1.属性2.方法addWidgetvoid QLayout::addWidget(QWidget *widget); // 功能将一个 QWidget 添加到布局QLayout中由布局自动管理其几何位置和大小setLayoutvoid QWidget::setLayout(QLayout *layout); // 功能将一个布局QLayout应用到当前 QWidget 上使布局管理该 widget 的子控件排列3.代码//创建三个按钮使用垂直布局管理起来 QPushButton* button1 new QPushButton(按钮1); QPushButton* button2 new QPushButton(按钮2); QPushButton* button3 new QPushButton(按钮3); //创建布局管理器 QVBoxLayout* layout new QVBoxLayout(); layout-addWidget(button1); layout-addWidget(button2); layout-addWidget(button3); //把布局管理器添加到窗口中 this-setLayout(layout);4.要点如果对象没有绑定父对象然后被添加到布局管理器中当该布局被设置给某个窗口或容器控件时该窗口或容器控件会自动成为这些控件的父对象。一个 widget只能设置一个顶层布局管理器3.2 HBoxLayout水平布局1.属性2.代码QPushButton* button1 new QPushButton(按钮1); QPushButton* button2 new QPushButton(按钮2); QPushButton* button3 new QPushButton(按钮3); QHBoxLayout* layout new QHBoxLayout();//创建水平布局 layout-addWidget(button1); layout-addWidget(button2); layout-addWidget(button3); this-setLayout(layout);3.布局间嵌套QPushButton* button1 new QPushButton(按钮1); QPushButton* button2 new QPushButton(按钮2); QPushButton* button3 new QPushButton(按钮3); QPushButton* button4 new QPushButton(按钮4); //两个水平布局 QHBoxLayout* layout1 new QHBoxLayout(); QHBoxLayout* layout2 new QHBoxLayout(); //一个垂直布局 QVBoxLayout* layout3 new QVBoxLayout(); layout1-addWidget(button1); layout1-addWidget(button2); layout2-addWidget(button3); layout2-addWidget(button4); //垂直布局把水平布局嵌套了 layout3-addLayout(layout1); layout3-addLayout(layout2); this-setLayout(layout3);重点布局嵌套并不违背“一个 QWidget 只能有一个顶层布局管理器”的规则因为嵌套的子布局属于父布局的内容而非直接设置在 QWidget 上。3.3 GridLayout网格布局1.属性重点在布局管理器中若要使控件尺寸不均等需通过设置拉伸比例来控制各控件或子布局所占空间的相对大小。2.代码//创建4个按钮采用2*2的方式进行布局 QPushButton* button1 new QPushButton(按钮1); QPushButton* button2 new QPushButton(按钮2); QPushButton* button3 new QPushButton(按钮3); QPushButton* button4 new QPushButton(按钮4); //创建网络布局管理器将这些控件添加进去 QGridLayout* layout new QGridLayout(); layout-addWidget(button1,0,0);//阵营1的第一个 layout-addWidget(button2,0,1);//阵营1的第二个 layout-addWidget(button3,2,0);//阵营2的第一个 layout-addWidget(button4,2,1);//阵营2的第二个 this-setLayout(layout); //设置水平拉伸系数(1:2) layout-setColumnStretch(0,1); layout-setColumnStretch(1,2);3.要点x和y并不表示网格中的行号和列号而是用于标识所属类别或阵营例如用 1 表示白棋、2 表示黑球等而“第几行”“第几列”通常由声明顺序决定而非x、y的数值本身。设置拉伸系数时参数分别对应具体的行号和列号基于声明顺序的索引而非之前提到的阵营标识值。在布局管理器中按钮垂直方向默认不会自动拉伸填充保持最小高度因此即使设置了行拉伸系数按钮本身也不会随行高增加而变高而水平方向则可以。//把水平/垂直拉伸都打开 button1-setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);3.4 FormLayout表单布局1.介绍介绍“Form Layout”相关的功能主要用于以表单形式组织“标签-控件”成对出现的布局常用于设置界面或数据录入界面。2.方法addRowvoid QFormLayout::addRow(QWidget *label, QWidget *field); //参数一标签控件用来表示后面是干嘛的可以为nullptr代表不要标签 //参数二交互控件用来输出数据的3.代码//创建3个label作为第一列 QLabel* label1 new QLabel(姓名); QLabel* label2 new QLabel(年龄); QLabel* label3 new QLabel(电话); //创建3个lineEdit作为第二列 QLineEdit* edit1 new QLineEdit(); QLineEdit* edit2 new QLineEdit(); QLineEdit* edit3 new QLineEdit(); //创建表单 QFormLayout* layout new QFormLayout(); this-setLayout(layout); //把上述控件添加到表单布局中 layout-addRow(label1,edit1); layout-addRow(label2,edit2); layout-addRow(label3,edit3); //创建一个提交按钮 QPushButton* button new QPushButton(提交); layout-addRow(nullptr,button);3.5 Spacer空白1.属性2.代码QPushButton* button1 new QPushButton(按钮1); QPushButton* button2 new QPushButton(按钮2); //创建空白 QSpacerItem* spacer new QSpacerItem(200,300);//传入空白的大小 //创建水平布局 QHBoxLayout* layout new QHBoxLayout(); layout-addWidget(button1); layout-addSpacerItem(spacer);//插入空白 layout-addWidget(button2); this-setLayout(layout);