Qt之按钮左边图标右边文字

一.前言
软件开发过程中，会遇到这样的需求，一个按钮要携带图标和文字，且图标在左，文字在右，以此来增强这个按钮的功能指向，这个样式在移动端还是蛮常见的，最典型就是搜索栏。
二、在Qt中有两种方式可以实现需求
方式一：代码方式
1.核心代码

 ui->pushButton->setIcon(QIcon(":/buttonIcon.png"));
 ui->pushButton->setLayoutDirection(Qt::LeftToRight);
 ui->pushButton->setText("左边图标，右边文字");

2.效果

3.关于setLayoutDirection
官方文档是这样的：
This property holds the layout direction for this widget
By default, this property is set to Qt::LeftToRight.
When the layout direction is set on a widget, it will propagate to the widget’s children, but not to a child that is a window and not to a child for which setLayoutDirection() has been explicitly called. Also, child widgets added after setLayoutDirection() has been called for the parent do not inherit the parent’s layout direction.
大概的意思，就是这个函数是设置控件的布局方向，默认是设置从左到右的（因此在代码中，其实我们也可以不用设置，也可以实现效果），当控件设置了这个布局方向之后，他是传递到没有显示调用setLayoutDirection的子控件的，但是不会传递到作为窗口的控件，有点像向下传递而不向上传递；还有一个就是如果父控件先调用setLayoutDirection，后面再添加其他子控件，子控件是不会继承父控件的布局方向的，所以为了严谨，建议还是把setLayoutDirection加在需要设置左图标右文字的控件属性上，免得受其他控件的影响
方式二：样式表
1.核心代码以及备注
核心是样式文件的编写，这里为了简单直接在代码里面写

    // 方式2
    ui->pushButton->setText("左边图标，右边文字");
    QStringList qssList;
    
    // 根据需要配置
    qssList.append("height: 35px;");
    qssList.append("font-size: 14pt");
    
    // 图标路径
    qssList.append("background-image: url(:/buttonIcon.png);");
    
    // 固定编写
    qssList.append("background-repeat: no-repeat;");
    qssList.append("background-origin: padding;");
    qssList.append("background-position: left;");
    qssList.append("text-align:left;");
    
    // 这里根据实际去调整参数，因为涉及到图标的大小，这里经过测试合适的为22%，可以用百分比或者像素px实现
    qssList.append("padding-left:22%;");
 
    ui->pushButton->setStyleSheet(qssList.join(";"));

2.效果

三、例子源码