QLineEdit+QSS - 技术栈

QLineEdit

多了一些新的花样：

selection-color

文本选中的颜色

selection-background-color

文本选中的背景颜色

lineedit-password-character

密码显示的字符

lineedit-password-mask-delay

输入密码后延迟多久显示密码字符

样式一简约派

cpp 复制代码

QLineEdit {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    padding: 5px;
    font-size: 22px;
    color: #333333;
}
QLineEdit:hover,
QLineEdit:focus {
    border-bottom-color: #4d90fe;
}

稍微改改的话，

通常适用于大多数场景。

样式二全边框

cpp 复制代码

QLineEdit {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 5px;
    font-size: 22px;
    color: #606266;
    selection-color: white;           /* 选中文本字体颜色 */
    selection-background-color: #4d90fe; /* 选中文本背景颜色 */
}
QLineEdit:hover{
border-color: #c0c4cc;
}
QLineEdit:focus {
    border-color: #4d90fe;
    background-color: #f8f8f8;
}

selection-color

selection-background-color

设置选中字体和字体背景颜色，

只是用到配色和系统默认差别不大

placeholdertext

占位字符的颜色

qt6.5才能支持呢

所以前面的版本就需要通过QPalette控制啦

cpp 复制代码

QPalette palette = ui->lineEdit->palette();
    // 设置占位文本颜色为浅灰色
    palette.setColor(
        QPalette::PlaceholderText, 
        QColor(210, 210, 210)
    );
    ui->lineEdit->setPalette(palette);

样式三它来了

cpp 复制代码

QLineEdit {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 5px;
    font-size: 22px;
    color: #606266;
    selection-color: white;           
    selection-background-color: #4d90fe;
    padding: 0 34 0 34;
    lineedit-password-character: 42;
    lineedit-password-mask-delay: 800;
}
QLineEdit:hover{
    border-color: #c0c4cc;
}
QLineEdit:focus {
    border-color: #4d90fe;
    background-color: #f8f8f8;
}
QLineEdit QToolButton#eye{
border-image: url(:/images/4.png);
}
QLineEdit QToolButton#eye:hover,
QLineEdit QToolButton#eye:checked{
border-image: url(:/images/5.png);
}
QLineEdit QToolButton#search{
border-image: url(:/images/6.png);
}

感觉一下多了好多，一个个得来：

padding: 0 34 0 34

为按钮腾出空间，左边34 右边34
lineedit-password-character: 42

密码符号用✳
lineedit-password-mask-delay: 800

延迟800毫秒明文变✳

接下来就是关键的关键，

怎么把小图标放进入呢！！

虽然QLineEdit提供了addAction，

但是它添加容易，操作难呐。

不如我们自己弄个按钮"嵌"进去。

以下是代码实现

cpp 复制代码

//按钮图标
    QToolButton* btnSearch = new QToolButton(0);
    connect(btnSearch, &QToolButton::clicked, this, []{
        QMessageBox::information(0, "提示", "已自动匹配到你的银行账号！");
    });
    btnSearch->setObjectName("search");
    btnSearch->setCursor(Qt::PointingHandCursor);
    btnSearch->setFixedSize(16,16);
    QToolButton* btnEye = new QToolButton(0);
    connect(btnEye, &QToolButton::toggled, this, [this](bool checked){
        if(checked)
            ui->lineEdit_3->setEchoMode(QLineEdit::Normal);
        else
            ui->lineEdit_3->setEchoMode(QLineEdit::Password);
    });
    btnEye->setCheckable(true);
    btnEye->setObjectName("eye");
    btnEye->setCursor(Qt::PointingHandCursor);
    btnEye->setFixedSize(16,16);
    QHBoxLayout* layout = new QHBoxLayout(ui->lineEdit_3);
    layout->addWidget(btnSearch);
    layout->addSpacerItem(new QSpacerItem(20,20,QSizePolicy::Expanding));
    layout->addWidget(btnEye);
    layout->setContentsMargins(16, 0, 16, 0);
    layout->setSpacing(0);

从上面的代码，我们看到，

两个按钮是通过水平布局的方式，

作为QLineEdit的子控件放进去的。

有个关键点在于:

setObjectName

给按钮设置个ID，

以便QSS能区分按钮谁是谁。

cpp 复制代码

QLineEdit QToolButton#eye{
border-image: url(:/images/4.png);
}
QLineEdit QToolButton#eye:hover,
QLineEdit QToolButton#eye:checked{
border-image: url(:/images/5.png);
}
QLineEdit QToolButton#search{
border-image: url(:/images/6.png);
}