Qt学习-4 ＜ui布局＆系统控件＞

Gnar_w

已于 2023-08-11 10:23:42 修改

阅读量618

点赞数

分类专栏： Qt 文章标签：学习

于 2023-07-19 18:55:48 首次发布

本文链接：https://blog.csdn.net/Gnar_w/article/details/131804537

版权

Qt 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

本文介绍了在使用msvc编译器时解决中文乱码的方法，并详细讲解了Qt界面设计中的布局管理，包括推荐使用的布局方式、控件的调整与设置，如Label、LineEdit、PushButton等，以及登录窗口的布局示例。此外，还涵盖了RadioButton、CheckBox、TreeWidget、TableWidget等控件的使用方法和代码实现。

摘要由CSDN通过智能技术生成

—— 均为自学笔记，如有错误请指正

注：用msvc编译器时的中文乱码问题：

//当用msvc编译器的时候，在.pro文件中加上如下代码：
msvc {
    QMAKE_CFLAGS += /utf-8
    QMAKE_CXXFLAGS += /utf-8
}

第一节登录窗口布局

1. 常用控件

Display Widgets → Label 控件 < 设置用户名/密码 >
Input Widgets → Line Edit < 输入信息 >
Buttons → Push Button < 按钮 >

2. 界面布局

① 不推荐使用：

水平对齐：Layouts→Horizontal Layout < 用户名＆输入框 >
垂直对齐：Layouts→Vertical Layout

② 推荐使用：

Containers → Widget →放置控件→顶部菜单栏：水平or垂直布局（进行水平/垂直布局）
Spacers → Horizontal Spacer （放置弹簧，弹簧默认随窗口撑开）
<弹簧默认属性：Expanding> 若要固定间距，可设置属性→sizeType→Fixed

③（栅格布局）几行几列网格状布局 （将账号密码放置一起布局）

Containers → Widget →放置控件→选中Widget 进行栅格布局即可

④ 修改边框大小与控件大小一致（修改账号密码的整体框大小）

选中边框→属性→sizePolicy→垂直/水平策略→Fixed

修改前：修改后：

⑤ 修改控件

窗口标题：选中MainWindow →属性windowTitle 进行修改
设置窗口固定大小（拖拽无变化）：选中MainWindow →属性中将min＆maxmumSize的大小设置与成geometry一致即可
框＆弹簧＆控件之间间隙调整：选中框→属性LayoutXXXMargin进行修改
密码框设置：选中密码框→属性echoMode 进行修改 NoEcho(外界看不到输入) Password（看不见内容可看见输入） PasswordEchoOnEdit（输入时明文，光标移走为密码模式）

第二节常用控件介绍

1. PushButton

资源文件的添加：选中Widget→属性icon→选择资源（通常PushButton不添加图片）

2. ToolButton <类似QQ头像>（群聊系统案例）

① ToolButton 主要用来显示图片：

② 显示设置头像+名字+图标突起：

属性text → 添加名字or文本
QToolButton →toolButtonStyle →ToolButtonTextBesideIcon
autoRaise 勾选设置突起效果

选中前选中后

3. Radio Button （单选框）

① 效果展示

② 分组选择

Containers→Group Box →放置控件

③ 设置默认值（代码设置）

第一步：在属性找到QObject→objectName 即为此控件名称

第二步：在.cpp→ui下进行设置代码

//单选框

ui->setupUi(this);
//设置单选按钮  男默认选中
ui->rBtnMan->setChecked(true);

//选中女后  打印信息
connect(ui->rBtnWoman,&QRadioButton::clicked,[=](){
    
    qDebug() << "选中了女！ ";

    });

4. Check Button（复选框）

① 效果展示

② 代码设置

（属性tristate 选中半选效果）实现选中后打印，代码如下：

（2 选中 1 半选 0 未选）

//复选框

    //选中老板娘  打印消息
    //2 是选中  0  是未选中  
    //属性中tristate 选中时打印 1 ，当复选框中有未选时出现半选状态，全部选中才出现 √
    connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){
        qDebug() << state;
    });

效果展示：

未全部选中全部选中

5. Item Views（Model-Based）

涉及模型，按照数据库，按照数据库模型处理之后使用 <基于数据库使用>

6. Item Widgets（Item-Based）

< 基于Item的一个项目使用>

// listWidget控件


//法一（一行）： 利用listWidget写诗
QListWidgetItem * item = new QListWidgetItem(" first ");
//将一行诗放入到listWidget空间中
ui->listWidget->addItem(item);
//设置对齐方式
item->setTextAlignment(Qt::AlignHCenter);



//法二（一组）：无法设置对齐方式，但是可以将所有诗句放进去
//QStringList                QList<QString> Qt风格下的一个列表
QStringList List;
List << " 锄禾日当午e" << " 汗滴禾下土e" << " 谁知盘中餐e" << " 粒粒皆辛苦e" ;
ui->listWidget->addItems(List);

7. Tree Widget 树控件

设置头
创建根节点
添加根节点到树控件上
添加子节点

//treeWidget树控件的使用
    //设置水平头
    //QStringList() 创建匿名对象，省略起名的操作
    ui->treeWidget->setHeaderLabels(QStringList()<<"英雄"<<"英雄介绍");


    //创建根节点
    QTreeWidgetItem * liitem = new  QTreeWidgetItem(QStringList()<<"力量");
    QTreeWidgetItem * minitem = new  QTreeWidgetItem(QStringList()<<"敏捷");
    QTreeWidgetItem * zhiitem = new  QTreeWidgetItem(QStringList()<<"智力");


    //加载顶层的节点（根节点）
    ui->treeWidget->addTopLevelItem(liitem);
    ui->treeWidget->addTopLevelItem(minitem);
    ui->treeWidget->addTopLevelItem(zhiitem);


    //追加子节点
    //力量
    QStringList heroL1;
    heroL1<<  "刚被猪e"  <<  "前排坦克，能在吸收伤害的同时造成可观的范围输出e" ;
    QTreeWidgetItem * l1 = new  QTreeWidgetItem(heroL1);
    liitem->addChild(l1);
    QStringList heroL2 ;
    heroL2<<  "船长e"  <<  "前排坦克，能肉能输出能控场的全能英雄e" ;
    QTreeWidgetItem * l2 = new  QTreeWidgetItem(heroL2);
    liitem->addChild(l2);
    //敏捷
    QStringList heroM1 ;
    heroM1<<  "月骑e"  <<  "中排物理输出，可以使用分裂利刃攻击多个目标e" ;
    QTreeWidgetItem * m1 = new  QTreeWidgetItem(heroM1);
    minitem->addChild(m1);
    QStringList heroM2;
    heroM2 <<  "小鱼人e"  <<  "前排战士，擅长偷取敌人的属性来增强自身战力e" ;
    QTreeWidgetItem * m2 = new  QTreeWidgetItem(heroM2);
    minitem->addChild(m2);
    //智力
    QStringList heroZ1;
    heroZ1 <<  "死灵法师e"  <<  "前排法师坦克，魔法抗性较高，拥有治疗技能e" ;
    QTreeWidgetItem * z1 = new  QTreeWidgetItem(heroZ1);
    zhiitem->addChild(z1);
    QStringList heroZ2;
    heroZ2 <<  "巫医e"  <<  "后排辅助法师，可以使用奇特的巫术诅咒敌人与治疗队友e" ;
    QTreeWidgetItem * z2 = new  QTreeWidgetItem(heroZ2);
    zhiitem->addChild(z2);

8. Table Widget 树控件

设置列数
设置水平表头
设置行数
设置内容（单行or列表）

ui->setupUi(this);
//Tablewidget控件

//设置列数
ui->tableWidget->setColumnCount(3);

//设置水平表头
ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性别"<<"年龄");

//设置行数
ui->tableWidget->setRowCount(5);

//设置正文
//单个设置
ui->tableWidget->setItem(0,0,new QTableWidgetItem("亚瑟")); 
//列表设置
QStringList nameList;
nameList<<"亚瑟"<<"赵云"<<"张飞"<<"关羽"<<"花木兰";
QList<QString> sexList;
sexList<<"男"<<"男"<<"男"<<"男"<<"女" ;
for(int i = 0 ; i < 5 ; i ++)
    {
        int col = 0 ;
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(nameList[i]));
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(sexList.at(i)));
        //int 转为QString
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(QString::number(i+18)));
    }

9. 其他控件

<1> Scroll Area：

<2> Tool Box：

currentItemText：修改Page 1文字：选中控件→属性QToolBox→currentItemText
currentIndex：页数
追加一页：点击对象→ 插入页

<3> Tab Widget：

currentTableText：修改文字：选中控件→currentTableText
追加一页：点击对象→ 插入页

<4> Stacked Widget：

联动按钮进行多个页面切换

//栈控件的使用

//设置默认定位到scrollArea
ui->stackedWidget->setCurrentIndex(1);
//scrollArea按钮
connect(ui->btn_scrollArea,&QPushButton::clicked,[=](){
    ui->stackedWidget->setCurrentIndex(1);
});
//toolBox按钮
connect(ui->btn_ToolBox,&QPushButton::clicked,[=](){
    ui->stackedWidget->setCurrentIndex(2);
});
//TabWidget按钮
connect(ui->btn_TabWidget,&QPushButton::clicked,[=](){
    ui->stackedWidget->setCurrentIndex(0);
});

<5> Dock Widget ：

浮动窗口。

<6> 不常用： MDI Area、QAxWidget

<7> Combo Box 下拉框：

    //下拉框
    ui->comboBox->addItem("奔驰");
    ui->comboBox->addItem("宝马");
    ui->comboBox->addItem("拖拉机");

放置一个按钮，按下按钮选中拖拉机：

//按钮名称：btn_select   
 connect(ui->btn_select,&QPushButton::clicked,[=](){
        法一：ui->comboBox->setCurrentIndex(2);
        法二：ui->comboBox->setCurrentText("拖拉机");
    });

<8> Font Combo Box 字体下拉框

<9> Line Edit 单行输入框

echoMode可以修改输入模式

<10> Text Edit 编辑多行文档

支持颜色，字体倾斜加粗等

<10> Plain Text Edit 编辑多行文档

纯文本格式

<11> Spin Box

微调框

<12> Double Spin Box

双精度数字调节框

<13> Time Edit 时间

<14> Date Edit 日期

<15> Date/Time Edit 时间＆日期

<16> Horizontal Scroll Bar 水平滑动条

<16> Vertical Scroll Bar 水平滑动条

<17> Horizontal Slider 水平滚动条

可以配合Spin使用

<18> Vertical Slider 垂直滚动条

<19> Label 标签

可以显示文字、图片。

//利用QLabel显示图片

    ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"));

//在Qt中的图片应为 setPixmap()  而非  setPicture()；

显示动图

//利用QLabel 显示动态图片
    QMovie * movie = new QMovie(":/Image/mario.gif");
    ui->lbl_movie->setMovie(movie);
//播放动图
    movie->start();

<20> Progress Bar 进度条