QT入门

[擎天殿]

7.2 利用 widget 做布局

第二种布局方式是利用控件里的widget来做布局，在Containers中



在widget中的控件可以进行水平、垂直、栅格布局等操作，比较灵活。

再布局的同时我们需要灵活运用弹簧的特性让我们的布局更加的美观，下面是一个登陆窗口，利用widget可以搭建出如下登陆界面：

[擎天殿]

八、常用控件

Qt为我们应用程序界面开发提供的一系列的控件，下面我们介绍两种最常用一些控件，所有控件的使用方法我们都可以通过帮助文档获取。

8.1 QLabel 控件使用

QLabel是我们最常用的控件之一，其功能很强大，我们可以用来显示文本，图片和动画等。

[擎天殿]

8.1.1 显示文字（普通文本、html）

通过QLabel类的setText函数设置显示的内容:

Code: Select all

void     setText(const QString &)

1.可以显示普通文本字符串

Code: Select all

    QLable *label = new QLable;
    label->setText(“Hello, World!”);

2.可以显示HTML格式的字符串

比如显示一个链接:

Code: Select all

    QLabel * label = new QLabel(this);
    label ->setText("Hello, World");
    label ->setText("<h1><a href=\"https://www.baidu.com\">百度一下</a></h1>");
    label ->setOpenExternalLinks(true);

其中setOpenExternalLinks()函数是用来设置用户点击链接之后是否自动打开链接，如果参数指定为true则会自动打开。

[擎天殿]

8.1.2 显示图片

可以使用QLabel的成员函数setPixmap设置图片

Code: Select all

    void     setPixmap(const QPixmap &)

首先定义QPixmap对象

Code: Select all

    QPixmap pixmap;

然后加载图片

Code: Select all

    pixmap.load(":/Image/boat.jpg");

最后将图片设置到QLabel中

Code: Select all

    QLabel *label = new QLabel;

    label.setPixmap(pixmap);

[擎天殿]

8.1.3 显示动画

可以使用QLabel 的成员函数setMovie加载动画，可以播放gif格式的文件

Code: Select all

    void     setMovie(QMovie * movie)

首先定义QMovied对象，并初始化:

Code: Select all

    QMovie *movie = new QMovie(":/Mario.gif");

播放加载的动画：

Code: Select all

    movie->start();

将动画设置到QLabel中：

Code: Select all

    QLabel *label = new QLabel；

    label->setMovie(movie);

[擎天殿]

8.2 QLineEdit

Qt提供的单行文本编辑框。

1.获取编辑框内容使用text（），函数声明如下：

Code: Select all

    QString     text() const

2.设置编辑框内容

Code: Select all

    void	setText(const QString &)

[擎天殿]

8.2.2 设置显示模式

使用QLineEdit类的setEchoMode () 函数设置文本的显示模式,函数声明:

Code: Select all

void     setEchoMode(EchoMode mode)

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

1.QLineEdit::Normal 模式显示方式，按照输入的内容显示。

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

3.QLineEdit::Password 密码模式，输入的字符会根据平台转换为特殊字符。

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

另外，我们再使用QLineEdit显示文本的时候，希望在左侧留出一段空白的区域，那么，就可以使用QLineEdit给我们提供的setTextMargins函数：

Code: Select all

void setTextMargins(int left, int top, int right, int bottom)

用此函数可以指定显示的文本与输入框上下左右边界的间隔的像素数。

[擎天殿]

8.3 其他控件

Qt中控件的使用方法可参考Qt提供的帮助文档。

8.4 自定义控件

在搭建Qt窗口界面的时候，在一个项目中很多窗口，或者是窗口中的某个模块会被经常性的重复使用。一般遇到这种情况我们都会将这个窗口或者模块拿出来做成一个独立的窗口类，以备以后重复使用。

在使用Qt的ui文件搭建界面的时候，工具栏栏中只为我们提供了标准的窗口控件，如果我们想使用自定义控件怎么办？

例如：我们从QWidget派生出一个类SmallWidget，实现了一个自定窗口，

Code: Select all

    // smallwidget.h
    class SmallWidget : public QWidget
    {
        Q_OBJECT
    public:
        explicit SmallWidget(QWidget *parent = 0);
        
    signals:
        
    public slots:
    private:
        QSpinBox* spin;
        QSlider* slider;
    };
     
    // smallwidget.cpp
    SmallWidget::SmallWidget(QWidget *parent) : QWidget(parent)
    {
        spin = new QSpinBox(this);
        slider = new QSlider(Qt::Horizontal, this);
        
        // 创建布局对象
        QHBoxLayout* layout = new QHBoxLayout;
        // 将控件添加到布局中
        layout->addWidget(spin);
        layout->addWidget(slider);
        // 将布局设置到窗口中
        setLayout(layout);
        
        // 添加消息响应
        connect(spin, 
                static_cast<void (QSpinBox::*)(int)>(&QSpinBox::valueChanged),
                slider, &QSlider::setValue);
        connect(slider, &QSlider::valueChanged, 
                spin, &QSpinBox::setValue);
    }

那么这个SmallWidget可以作为独立的窗口显示,也可以作为一个控件来使用：

打开Qt的.ui文件,因为SmallWidget是派生自Qwidget类,所以需要在ui文件中先放入一个QWidget控件, 然后再上边鼠标右键



弹出提升窗口部件对话框



添加要提升的类的名字,然后选择 添加



添加之后,类名会显示到上边的列表框中,然后单击提升按钮,完成操作.

我们可以看到, 这个窗口对应的类从原来的QWidget变成了SmallWidget



再次运行程序,这个widget_3中就能显示出我们自定义的窗口了.

[擎天殿]

九、Qt消息事件机制
9.1 事件

事件（event）是由系统或者 Qt 应用程序本身在不同的时刻发出的。当用户按下鼠标、敲下键盘，或者是窗口需要重新绘制的时候，都会发出一个相应的事件。一些事件在对用户操作做出响应时发出，如键盘事件等；另一些事件则是由系统自动发出，如计时器事件。

[擎天殿]

9.2 事件处理函数

在所有组件的父类QWidget中，定义了很多事件处理的函数，如

1.keyPressEvent()：键盘按键按下事件

2.keyReleaseEvent()：键盘按键松开事件

3.mouseDoubleClickEvent()：鼠标双击事件

4.mouseMoveEvent()：鼠标移动事件

5.mousePressEvent()：鼠标按键按下事件

6.mouseReleaseEvent() ：鼠标按键松开事件

7.等等

这些函数都是 protected virtual 的，也就是说，我们可以在子类中重新实现这些函数。下面来看一个例子：

Code: Select all

    class EventLabel : public QLabel
    {
    protected:
        void mouseMoveEvent(QMouseEvent *event);
        void mousePressEvent(QMouseEvent *event);
        void mouseReleaseEvent(QMouseEvent *event);
    };
     
    void EventLabel::mouseMoveEvent(QMouseEvent *event)
    {
        this->setText(QString("<center><h1>Move: (%1, %2)</h1></center>").arg(QString::number(event->x()),
                              QString::number(event->y())));
    }
     
    void EventLabel::mousePressEvent(QMouseEvent *event)
    {
        this->setText(QString("<center><h1>Press:(%1, %2)</h1></center>").arg(QString::number(event->x()),
                              QString::number(event->y())));
    }
     
    void EventLabel::mouseReleaseEvent(QMouseEvent *event)
    {
        QString msg;
        msg.sprintf("<center><h1>Release: (%d, %d)</h1></center>",
                    event->x(), event->y());
        this->setText(msg);
    }
     
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        
        EventLabel *label = new EventLabel;
        label->setWindowTitle("MouseEvent Demo");
        label->resize(300, 200);
        label->show();
        
        return a.exec();
    }

1.EventLabel继承了QLabel，覆盖了mousePressEvent()、mouseMoveEvent()和MouseReleaseEvent()三个函数。我们并没有添加什么功能，只是在鼠标按下（press）、鼠标移动（move）和鼠标释放（release）的时候，把当前鼠标的坐标值显示在这个Label上面。由于QLabel是支持 HTML 代码的，因此我们直接使用了 HTML 代码来格式化文字。

2.QString的arg()函数可以自动替换掉QString中出现的占位符。其占位符以 % 开始，后面是占位符的位置，例如 %1，%2 这种。

Code: Select all

    QString("[%1, %2]").arg(x).arg(y);

语句将会使用x替换 %1，y替换 %2，因此，生成的QString为[x, y]。

3.在mouseReleaseEvent()函数中，我们使用了另外一种QString的构造方法。我们使用类似 C 风格的格式化函数sprintf()来构造QString。

运行上面的代码，当我们点击了一下鼠标之后，label 上将显示鼠标当前坐标值。



为什么要点击鼠标之后才能在mouseMoveEvent()函数中显示鼠标坐标值？

这是因为QWidget中有一个mouseTracking属性，该属性用于设置是否追踪鼠标。只有鼠标被追踪时，mouseMoveEvent()才会发出。如果mouseTracking是 false（默认即是），组件在至少一次鼠标点击之后，才能够被追踪，也就是能够发出mouseMoveEvent()事件。如果mouseTracking为 true，则mouseMoveEvent()直接可以被发出。

知道了这一点，我们就可以在main()函数中添加如下代码：

Code: Select all

label->setMouseTracking(true);

在运行程序就没有这个问题了。