Qt5 学习之路及嵌入式开发教程7：Button控件及基本对话框

Qt5 学习之路及嵌入式开发教程7：Button控件及基本对话框

第一部分：有界面设计

一、按钮组（Buttons）之ToolButton:工具按钮

1、工具按钮（QToolButton）区别于普通按钮（QPushButton）的一点是，工具按钮（QToolButton）可以带图标，他们两个有同一个父类（QAbstractButton）;
工具按钮（QToolButton）有两部分组成：文本text 和 图标icon。

2、编程示例

（1）、建立应用程序

​

选择后，命名、两个下一步后进入设置界面

 

下一步后点击完成。

⑵、进入设置界面，进行界面设计

①、拖曳ToolButton控件到面板

②、对控件进行属性设置

名称：OnChangeButton  这里可以自定义，一般以好记和理解为主要命名方式

点击“icon”的倒三角->“选择文件”

选择电脑当中的图片，并设置大小和文本（Open）

设置其他属性

整体设计完成

运行结果图：

（3）、添加代码，完成具体功能

①、右击“Open图标”，找到“转到槽”，进入编辑代码

②、运行结果

二、ToolButton与标准文件对话框例子：点击按钮，打开文件，并把文件的路径显示在左侧的文本框内

1、按上例过程建立程序文件和设置按钮

按钮属性如下：

2、在按钮左侧拖曳一个LineEdit控件，并设置大小

设置LineEdit属性

3、设置信号槽，并添加代码，完成控件功能。

①、右击“打开文件”，找到“转到槽”

②、按顺序添加代码 第三步代码也可以不用。

 

③、运行结果

三、Button与标准颜色对话框：一个ToolButton控件和一个TextEdit控件

1、设置ToolButton属性

控件名称：

鼠标提示：

文本、图标及大小

设置控件方式

2、设置TextEdit控件属性

 

3、设置信号槽，并添加代码，完成控件功能。

（1）、右击“设置颜色”，找到“转到槽”

（2）、添加代码，实现功能

在dialog.cpp中先添加头文件

#include <QPalette>     //调色板

#include <QColorDialog>

然后在刚建立的信号槽函数内添加代码

运行结果：

四、Button控件与标准字体对话框：一个ToolButton控件和原有TextEdit控件

1、设置ToolButton属性

控件名称：

文本、图标及大小

设置控件方式

2、设置信号槽，并添加代码，完成控件功能。

（1）、右击“设置字体”，找到“转到槽”

（2）、添加代码，实现功能

在dialog.cpp中先添加头文件

#include <QFont>

#include <QFontDialog>

然后在刚建立的信号槽函数内添加代码

运行结果：

 

第二部分：代码设计

前面是用UI设计，接下来用代码设计，同学们两种设计方式都要很熟悉，大部分代码意思是一样的 。

1、创建文件项目，把创建界面的“勾”去掉，点击下一步，直至完成。

2、完成“打开文件”功能模块

①、在dialog.h中，

添加头文件

#include <QLineEdit>

#include <QToolButton>

接着添加private成员变量如下：

接着添加槽函数：

②、在“dialog.cpp”文件的构造函数添加代码

导入头文件

在构造函数内添加如下代码：

设置窗体大小：

设置图标

//设置ToolButton文本，图标、大小，显示方式等

//设置LineEdit大小

//添加布局管理

//信号槽

③、完成信号槽函数功能

④、运行，查看结果

3、仿上述过程，完成设置字体及设置颜色，最后运行结果

4、源代码

//dialog.h
#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

#include <QLineEdit>
#include <QTextEdit>
#include <QToolButton>
#include <QGridLayout>
#include <QFileDialog>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    QLineEdit       *FileLineEdit;          //用来显示打开文件的路径
    QTextEdit       *ColorTextEdit;

    //打开文件按钮,设置颜色按钮，设置字体按钮
    QToolButton     *OpenFileButton,*ShowColorButton,*ShowFontButton;

    QGridLayout     *mainLayout;

private slots:
    void    ShowFile();
    void    ShowColor();
    void    ShowFont();


};

#endif // DIALOG_H


//dialog.cpp
#include "dialog.h"

#include <QToolButton>
#include <QGridLayout>
#include <QFileDialog>
#include <QString>
#include <QIcon>
#include <QColorDialog>
#include <QFontDialog>


Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{

    //设置窗体大小
    setMinimumSize( 500, 300 );/*设定QWidget 最小值*/
    setMaximumSize( 500, 300 );/*设定QWidget 最大值*/

    //设置图标
    QIcon   icon1,icon2,icon3;
    icon1.addFile(tr("D:/image/open.png"));
    icon2.addFile(tr("D:/image/Color.jpg"));
    icon3.addFile(tr("D:/image/Font.png"));

    //设置ToolButton文本，图标、大小，显示方式等
    OpenFileButton  = new QToolButton;
    ShowColorButton = new QToolButton;
    ShowFontButton  = new QToolButton;

    OpenFileButton->setText(tr("打开文件"));
    ShowColorButton->setText(tr("设置颜色"));
    ShowFontButton->setText(tr("设置字体"));

    OpenFileButton->setGeometry(100,100,150,150);
    ShowColorButton->setGeometry(100,100,150,150);
    ShowFontButton->setGeometry(100,100,150,150);


    OpenFileButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    ShowColorButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    ShowFontButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);


    OpenFileButton->setFixedSize(60,60);
    ShowColorButton->setFixedSize(60,60);
    ShowFontButton->setFixedSize(60,60);


    OpenFileButton->setCheckable(true);
    ShowColorButton->setCheckable(true);
    ShowFontButton->setCheckable(true);


    OpenFileButton->setIcon(icon1);
    ShowColorButton->setIcon(icon2);
    ShowFontButton->setIcon(icon3);


    OpenFileButton->setIconSize(QSize(32,32));
    ShowColorButton->setIconSize(QSize(32,32));
    ShowFontButton->setIconSize(QSize(32,32));


    //设置LineEdit大小
    FileLineEdit    = new QLineEdit;
    FileLineEdit->setGeometry(100,100,150,150);
    FileLineEdit->setFixedSize(300,60);

    ColorTextEdit   = new QTextEdit;
    ColorTextEdit->setGeometry(100,100,150,150);
    ColorTextEdit->setFixedSize(300,60);

    //添加布局管理
    mainLayout      = new QGridLayout(this);
    mainLayout->addWidget(FileLineEdit,0,0);
    mainLayout->addWidget(OpenFileButton,0,1);

    mainLayout->addWidget(ColorTextEdit,1,0);
    mainLayout->addWidget(ShowColorButton,1,1);
    mainLayout->addWidget(ShowFontButton,1,2);


    //信号槽
    connect(OpenFileButton,SIGNAL(clicked()),this,SLOT(ShowFile()));
    connect(ShowColorButton,SIGNAL(clicked()),this,SLOT(ShowColor()));
    connect(ShowFontButton,SIGNAL(clicked()),this,SLOT(ShowFont()));

}

Dialog::~Dialog()
{

}

void Dialog::ShowFile()
{
    QString s = QFileDialog::getOpenFileName(this,"打开文件","/",
                                             "C++ files(*.cpp);;all files(*.*)");

    FileLineEdit->setText(s);

}

void Dialog::ShowColor()
{
    QPalette pal = ColorTextEdit->palette();
    const QColor & color = QColorDialog::getColor(pal.color(QPalette::Base),this);

    if (color.isValid())
    {
        pal.setColor(QPalette::Text,color);
        ColorTextEdit->setPalette(pal);
    }
}

void Dialog::ShowFont()
{

    bool ok;
    QFont f = QFontDialog::getFont(&ok);

    if (ok)
    {
        ColorTextEdit->setFont(f);
    }
}


//main.cpp
#include "dialog.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;

    w.setWindowTitle(QString("Button控件及基本对话框"));


    w.show();

    return a.exec();
}