QT每周技巧（2）~~~~~~~~~界面按钮

前言

思前想后，如果做成每周技巧的话，写那么长感觉有点狗尾续貂了，直接上步骤就行，也不用介绍这个介绍那个了，该上图就上图，该上代码就上代码，这样看着也好看，简单又方便。

第一节：内容

1.添加图库；

2.添加toolbar；

3.添加action；

4.变换图标。

第二节：步骤

（1）添加图库：在界面左侧的文件夹部分右键，添加新文件，选择resource，添加图片。具体步骤可以网上搜搜，挺多的。

添加后，可以显示自己的加的图片，最好是png图片，其他图片格式没有试验过，感兴趣的小伙伴可以试试。

 （2）添加toolbar，这个很关键，以后ui界面添加的按钮都是toolbar，具体怎么在不是mainwindow的地方添加，后面会介绍。右边的窗口，右键，添加toolbar选项。在ui中会出现一个小条条，这个就是toolbar。

 （3）添加action，这个实际上就是按钮，只不过做的很好看，小伙伴可以试试效果。在中间有个一页纸按键的地方，第二个是复制，第四个是删除，看着添加就好。文本中起个名字，对象名字会自动出现action+名字。

 添加之后点下面图标选项右边的省略号，会弹出图片选项，也就是刚才添加的图片库。

 添加后，下面会出现添加的action。

 再双击下面已经添加好的action，再次弹出刚才的界面，修改文本，可以修改为汉字，而对象名称不会变化。

 用鼠标拉着下面的action到刚才出现的小条条上，会自动出现一个竖杠杠，松开鼠标，那么添加完图标的action就会出现在toolbar中。

运行程序，会出现以下界面：这是基本框架就做好了，然后添加程序。

（4）代码添加：在mainwindow.c里，ui->setupUi(this);下面。

    connect(ui->actionred,    &QAction::triggered, this,&MainWindow::redout);
    connect(ui->actionvol,    &QAction::triggered, this,&MainWindow::volout);
    connect(ui->actionblue,   &QAction::triggered, this,&MainWindow::bluout);
    connect(ui->actionorange, &QAction::triggered, this,&MainWindow::oraout);
    connect(ui->actionplay,   &QAction::triggered, this,&MainWindow::plaout);

解释：前面是action，刚才添加的名字，后面是函数。

在mainwindow.h中添加执行函数，类似声明函数。

    void redout();
    void volout();
    void bluout();
    void oraout();
    void plaout();

然后函数主体，在mainwindow.c里。

void MainWindow::redout()
{
    ui->SHOW->setText("红色");
}
void MainWindow::volout()
{
    ui->SHOW->setText("紫色");
}
void MainWindow::bluout()
{
    ui->SHOW->setText("蓝色");
}
void MainWindow::oraout()
{
    ui->SHOW->setText("橙色");
}

解释：为了显示自己点了哪个按钮，加个显示框，为了好看，怎么添加，直接在ui里面拉就行，起个名字SHOW，最好大写，为了区分不同的东西，这个按照自己的习惯就好。运行代码。

 点击紫色的action后，会出现显示的紫色，就是执行那段代码了。

为了省空间，并且看着好看，有时候将一个按钮制作成两个图片，效果如下：

 

点完之后，运行会变成停止，这种只要加入以下代码就好。

void MainWindow::plaout()
{
    beginflag = !beginflag;
    if(beginflag == true)
    {
        ui->actionplay->setIcon(QIcon(":/image/stop.png"));
        ui->actionplay->setIconText("停止");
        ui->SHOW->setText("运行");
    }
    else
    {
        ui->actionplay->setIcon(QIcon(":/image/play.png"));
        ui->actionplay->setIconText("运行");
        ui->SHOW->setText("停止");
    }

}

解释：一个标志位，点下变成1，再点下变成0。并且将不同的图片加入到action中，这个只能代码完成。也可以是三个状态的按钮，自己直接添加就行。

（5）action大小变化：感觉action按钮太小，加入以下程序，将图标变大，并且将刚才设定的action的汉字标在图标的下方：

    ui->toolBar->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    QSize size(35, 35);
    ui->toolBar->setIconSize(size);

 展示效果如图：

 第三节：结语

加入前面文章的怎么制作制作运行图标，加上这节的action制作，出来的东西也有那么点意思了，看着也舒服点。

    关注的小伙伴直接在历史消息的百度网盘中能找到源码，之前的串口和can传输的源码也在历史消息中，没办法，公众号能不能放大的东西，也不能传输大的东西，所以只能给个百度连接让小伙伴自己下载。需要这个源码的小伙伴可以关注公众号。这个程序的源码随后也将放入公众号中。因为工作的关系放的可能比较晚，请小伙伴见谅。