QT 学习笔记(六)

简介: QT 学习笔记(六)

文章目录

一、设计器的使用

二、常用控件

1. Containers 容器类

2. Input Widgets 输出控件

3. Display Widgets 显示类控件

三、代码和运行结果

1. 主窗口头文件 mainwindow.h

2. 主窗口头文件 mainwindow.cpp

3. 运行结果


由于每次代码都是在原有程序上修改,因此除了新建项目,不然一般会在学完后统一展示代码。

提示:具体项目创建流程和注意事项见QT 学习笔记(一)

提示:具体项目准备工作和细节讲解见QT 学习笔记(二)


一、设计器的使用

  • 生成一个新的项目,具体步骤过程见提示。
  • 此处注意要勾选上创建界面,其他步骤相同。


ec0670195b3444b6a94e26982a188442.png


  • 会多如下一个界面:
  • 在我们的控件属性当中,继承于关系依次是从下到上,即 QObject 是 QWidget 的父类,QWidget 是 QAbastractButton 的父类,依此递推。

16481ac3c779410688a3224db0b8c9ee.png


  • 也可以直接在信号和槽的工作区当中进行信号和槽的相关操作,但其中只能进行标准函数,不可以使用自定义函数,因此,一般情况下我们不会使用。


baf8f752013c4006ab59a3ee08594829.png


那么,在代码当中对 ui 界面的功能进行也是可以的。下图画框的位置就是我们对 ui 界面调用的代码。因此,如果我们想对 ui 界面进行代码修改的话,要在该代码后进行程序编写。

ee6bd2d604db4acfaacfadeb1ecb406f.png

对界面当中任何东西修改都要通过 ui-> ,然后就是正常的操作步骤,大家都不陌生

640512e15c7a478a8345f15f98a1fdbb.png


二、常用控件

  • 每当我们对控件重命名之后,都需要进行编译,不然变量名无法被调用。
  • 在常用控件当中,包含以下类别:
类别 作用
Layouts 布局
Spacers 间距
Buttons 按钮类


Item Views(Model-Based) 项目视图组:决定数据以哪种形式展现出来
Item Widgets(Item-Based) 项目控件组:类似于文件管理器,使得文件信息以树的形式展开


Containers 容器类:容纳别的控件
Input Widgets 输出控件
Display Widgets 显示类:标签,图片,文字

他们每一类都包含有自己的子类,用法都很类似,帮助文档的说明也很清楚,在此步过多叙述。

83cfd188fef04f079d4a27c985d0aea3.png


  • 可以通过这种方式快速对槽函数进行编写,不需要写 connect 函数,头文件和源文件当中会自动生成,只需要在下图位置编写槽函数需要实现的功能即可。


48841122f94d4b408546675eb91bc5dd.png

1. Containers 容器类

  • Tool Box 是抽屉式的容器。
  • Tab Widget 是标签式的容器。
  • Stacked Widget ,他的功能是切换页,在此简要对其进行实现,将其扩充为 4 页,页面的标识与数组的下标类似:0,1,2,3 。每页放置两个不同的按钮进行区分,如下图所示:

ce9144e08fde4fd5a15e339966699e33.png


Line Edit 是 QT 提供的单行文本编辑框。

获取编辑框内容使用 text() ,函数声明如下: QString text() const 。

设置编辑框内容 void setText(const QString &) 。

使用 QLineEdit 类的 setEchoMode() 函数设置文本的显示说明,函数声明: void setEchoMode(EchoMode mode) 。

EchoMode 是一个枚举类型,一共定义了四种显示模式:

(1) QLineEdit :: Normal 模式显示方式,按照输入内容显示。

(2) QLineEdit :: NoEcho 不显示任何内容,此模式下无法看到用户的输入。

(3) QLineEdit :: Password 密码输入,输入的字符会根据平台转换为特殊字符。

(4) QLineEdit :: PasswordEchoOnEdit 编辑时显示字符否则显示字符作为密码。

代码和运行效果如下:


//QLineEdit
    QString str = ui->line1->text();//获取内容
    qDebug()<<str;
    //设置内容
    ui->line1->setText("123455");
    //设置内容显示间隙
    ui->line1->setTextMargins(15,0,0,0);
    //设置内容显示方式
    //ui->line1->setEchoMode(QLineEdit::Password);  //密码方式显示
    QStringList list;
    list<<"hello"<<"HOW are you"<<"hehe";
    QCompleter *com=new QCompleter(list,this);
    com->setCaseSensitivity(Qt::CaseInsensitive);  //不忽略大小写
    ui->line1->setCompleter(com);


9ad601d085754b4bb77bdaad62c23180.png


  • Text Edit 文本编辑区,可以显示多行文本,图片,网格相关的内容都是可以的。
  • Plain Text Edit 只可以显示文字。
  • Spin Box 用于微调一些整型数据。

c519105a873141c98ace75ca8e39c01e.png

Double Spin Box 用于微调一些浮点型数据。

Time Edit 用于调整时间。

Date Edit 用于调整日期。

Date/Time Edit 用于调整日期和时间。

Dial 工业控制一些特定的模型。

Horizontal Scroll Bar 水平滚动条。

Vertical Scroll Bar 垂直滚动条。

Horizontal Slider 水平滑块。

Vertical Slider 垂直滑块。

Key Sequence Edit 设置一些快捷方式


3. Display Widgets 显示类控件

  • Label 可以显示文字,图片,动画,网址。
  • Label 标签显示图片,可以选择代码编写或者如下图所示方法。

7bf5ebfd7fe543e2969ffd3ccde859ba.png


  • Label 标签显示图片和动画,如果上传资源的话需要先将资源拷贝进去,然后添加新文件,如图步骤。
  • 如果想打开我新建的资源文件,只需要右键,然后 **Open in Editor**即可。

27dba488f65a4faf88eaae003cc3a325.png


8b0dc5d09fec4e9baddae79db0ce795c.png


  • Label 标签显示动画的格式一般只能时 gif
  • Label 标签可以显示 HTML 格式的字符串,比如显示一个链接,代码如下(在此当中,有 HTML 格式的内容,应该建议直接复制粘贴):
    //设置html内容
    ui->lablewangzhi->setText("<h1><a href=\" https ://www. baidu. com\">百度一下</a</h1>");
     //打开外部链接
    ui->lablewangzhi->setOpenExternalLinks(true);


其中 setOpenExternalLinks() 函数是用来设置用户点击链接之后是否自动打开链接。

如果参数指定为 true 则会自动打开。

如果设置为 false ,想要汉开链接只能通过捕捉 linkActivated() 信号,在自定义的槽函数中使用 QDesktopServices: : openUrl() 打开链接。

该函数参数默认值为 false 。

Label 显示结果如下图所示:

c050639c79844bb7ad8aa0264fdee7cb.png


  • Text Browser 文本浏览器,主要是显示文本。
  • Calendar Wigdet 显示日历。
  • LCD Number 数码管,可以显示整数,字符,也可以显示字符串,但是字符串只能显示十六进制。

d4faff4df55c4aa68b86b0128d3c1d3a.png


Progress Bar 进度条,下载东西,拷贝东西那种进度条,只需要显示最小值,最大值和当前位置,就可以自动计算出比例。


4c7f6faecd3149d58260c357ca3c7bdd.png


Horizontal Line 水平线,起分割作用。

Vertical Line 垂直线,起分割作用。

OpenGL Widget 关于 OpenGL 方面的内容。

ODeclarative View 主要在 QML 当中使用。

OOuickWidget 主要在 QML 当中使用。

QWebView 通过一个链接,可以简单将该网址的内容展示在这里。(本人 Qt Creator 当中没有这个显示类控件,因此无法演示)


三、代码和运行结果

1. 主窗口头文件 mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private slots:
    void on_change_clicked();
private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H


2. 主窗口头文件 mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QCompleter>
#include <QStringList>
#include <QMovie>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->change->setText("123");
    //connect(ui->button,&QPushButton::clicked,this,&MainWindow::close);
    //QLineEdit
    QString str = ui->line1->text();//获取内容
    qDebug()<<str;
    //设置内容
    ui->line1->setText("123455");
    //设置内容显示间隙
    ui->line1->setTextMargins(15,0,0,0);
    //设置内容显示方式
    //ui->line1->setEchoMode(QLineEdit::Password);  //密码方式显示
    QStringList list;
    list<<"hello"<<"HOW are you"<<"hehe";
    QCompleter *com=new QCompleter(list,this);
    com->setCaseSensitivity(Qt::CaseInsensitive);  //忽略大小写
    ui->line1->setCompleter(com);
    //QLabei
    //设置文字内容
    ui->labelwenzi->setText("123");
    //设置图片
    ui->labeltuxiang->setPixmap(QPixmap("://tuoian/2.png"));
    //让图片自动适应label大小
    ui->labeltuxiang->setScaledContents(true);
    //创建动画
    QMovie *mymovie = new QMovie("://tuoian/src=http___img.zcool.cn_community_010ddd6034cd9e11013ef90fe189f7.gif&refer=http___img.zcool.gif");
    //设置动画
    ui->labledonghua->setMovie(mymovie);
    //启动动画
    mymovie->start();
    //让动画自动适应label大小
    ui->labledonghua->setScaledContents(true);
    //设置html内容
    ui->lablewangzhi->setText("<h1><a href=\" https ://www. baidu. com\">百度一下</a</h1>");
    //打开外部链接
    ui->lablewangzhi->setOpenExternalLinks(true);
    //数码管
    ui->lcdNumber->display("123");
    //进度条
    ui->progressBar->setMinimum(0);  //设定最小值
    ui->progressBar->setMaximum(200);  //设定最大值
    ui->progressBar->setValue(100);  //设定当前值
}
MainWindow::~MainWindow()
{
    delete ui;
}
void MainWindow::on_change_clicked()
{
    static int i=0;
    ui->stackedWidget->setCurrentIndex(++i%4);
}


3. 运行结果

36d642f519d14cb9b440882a8226dd01.png




















相关文章
|
1月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
206 4
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
|
1月前
|
开发者
【Qt 学习笔记】Qt系统相关 | Qt事件 | 事件的介绍及基本概念
【Qt 学习笔记】Qt系统相关 | Qt事件 | 事件的介绍及基本概念
120 4
|
1月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 文件对话框QFileDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 文件对话框QFileDialog
268 4
|
1月前
|
数据安全/隐私保护
【Qt 学习笔记】Qt窗口 | 对话框 | 模态与非模态对话框的创建
【Qt 学习笔记】Qt窗口 | 对话框 | 模态与非模态对话框的创建
159 4
|
1月前
|
搜索推荐 C++
【Qt 学习笔记】Qt窗口 | 对话框 | 创建自定义对话框
【Qt 学习笔记】Qt窗口 | 对话框 | 创建自定义对话框
32 4
|
1月前
|
API UED
【Qt 学习笔记】Qt窗口 | 状态栏 | QStatusBar的使用及说明
【Qt 学习笔记】Qt窗口 | 状态栏 | QStatusBar的使用及说明
127 4
|
1月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 输入对话框QInputDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 输入对话框QInputDialog
72 3
|
1月前
|
数据可视化
【Qt 学习笔记】Qt窗口 | 标准对话框 | 字体对话框QFontDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 字体对话框QFontDialog
40 3
|
1月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 颜色对话框QColorDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 颜色对话框QColorDialog
169 3
|
1月前
【Qt 学习笔记】Qt窗口 | 对话框 | Qt对话框的分类及介绍
【Qt 学习笔记】Qt窗口 | 对话框 | Qt对话框的分类及介绍
69 3