本文为作者原创，转载请注明出处：https://www.cnblogs.com/apocelipes/p/10367521.html
本文索引
方法1：setClearButtonEnabled显示清除按钮 方法2：使用QAction实现清除按钮 方法3：自定义QLineEdit为其添加按钮 最终的显示效果
方法1：setClearButtonEnabled显示清除按钮
方法2：使用QAction实现清除按钮
addAction方法。它负责把一个QAction添加到edit的指定位置。// 方案2auto clearAction = new QAction;clearAction->setIcon(QApplication::style()->standardIcon(QStyle::SP_DialogResetButton));auto edit2 = new QLineEdit;// QLineEdit::TrailingPosition表示将action放置在右边edit2->addAction(clearAction, QLineEdit::TrailingPosition);QObject::connect(clearAction,&QAction::triggered,edit2,[edit2]{ edit2->setText(""); });
clearAction->setIcon(QIcon(":/clear.png"));
方法3：自定义QLineEdit为其添加按钮
-
qt的widget和layout是可以堆叠的，之前在实现半透明遮罩中有提过 -
你可以为QLineEdit设置layout，如你所料layout会堆叠在edit的输入框上 -
edit的layout会只使用控件的最小尺寸，这样不会导致将整个输入框遮盖掉 -
edit的可输入区域是可以设置的，你可以合理的设置输入区的大小避免文字进入layout之下被遮盖
-
创建你需要的widget以及一个布局管理器 -
添加拉伸因子和widget至布局管理器，拉伸因子可以不添加，只要设置好布局管理器的排列方向即可 -
设置布局管理器里组件的排列方向并把布局管理器添加到QLineEdit -
获取你添加的widget的宽度，然后在加上合适的边框距离，将QLineEdit的输入区域限制在合理的大小
ButtonEdit是一个带有按钮的QLineEdit：class ButtonEdit: public QLineEdit {Q_OBJECTpublic:explicit ButtonEdit(const QString &btnText, QWidget *parent = nullptr);explicit ButtonEdit(const QIcon &icon, QWidget *parent = nullptr);~ButtonEdit() override = default;private:// 设置文本按钮或图标按钮的大小和外观void setTextButton();void setIconButton();// 将按钮添加到editvoid addButton();QPushButton *button;Q_SIGNALS:void buttonClicked(bool);};// 按钮和输入内容的边距constexpr int buttonMargin = 3;
buttonClicked信号。ButtonEdit::ButtonEdit(const QString &btnText, QWidget *parent): QLineEdit(parent){button = new QPushButton(btnText);setTextButton();addButton();}ButtonEdit::ButtonEdit(const QIcon &icon, QWidget *parent): QLineEdit(parent){button = new QPushButton;button->setIcon(icon);setIconButton();addButton();}
addButton，在这里我们先把button添加进layout，随后又设置了输入区域的大小避免输入内容被遮住：void ButtonEdit::addButton() {connect(button,&QPushButton::clicked,this,&ButtonEdit::buttonClicked);// 按钮已经是edit的一部分了，不应该再能被单独聚焦，否则可能导致误触button->setFocusPolicy(Qt::NoFocus);// 设置鼠标，否则点击按钮时仍然会显示输入内容时的鼠标图标button->setCursor(Qt::ArrowCursor);auto btnLayout = new QHBoxLayout;btnLayout->addStretch();btnLayout->addWidget(button);// 设置组件右对齐，按钮会显示在edit的右侧btnLayout->setAlignment(Qt::AlignRight);btnLayout->setContentsMargins(0, 0, 0, 0);setLayout(btnLayout);// 设置输入区域的范围，从edit的最左到按钮的最左(包含了按钮设置的buttonMargin)setTextMargins(0, 0, button->width(), 0);}
buttonMargin。buttonMargin宽度的框不太好看：// 帮助函数，设置按钮的width，大小策略为fixed，不可放大或缩小static void setButtonSize(QPushButton *button, int width) {auto policy = button->sizePolicy();policy.setHorizontalPolicy(QSizePolicy::Fixed);button->setSizePolicy(policy);// 固定宽度，加上边距button->setFixedWidth(width + buttonMargin*2);}void ButtonEdit::setTextButton() {if (!button) {return;}// 获得当前字体下文本内容的像素宽度auto width = QWidget::fontMetrics().width(button->text());setButtonSize(button, width);}void ButtonEdit::setIconButton() {if (!button) {return;}// 获取图标的width简单得多auto width = button->iconSize().width();setButtonSize(button, width);// 设置背景和边框在非点击时不可见button->setFlat(true);}
// 方案3// 使用文本按钮auto edit3_1 = new ButtonEdit("clear");QObject::connect(edit3_1,&ButtonEdit::buttonClicked,edit3_1,[edit3_1]{ edit3_1->setText(""); });// 使用图标按钮auto edit3_2 = new ButtonEdit(QApplication::style()->standardIcon(QStyle::SP_DialogResetButton));QObject::connect(edit3_2,&ButtonEdit::buttonClicked,edit3_2,[edit3_2]{ edit3_2->setText(""); });
buttonClicked信号我们可以定制按钮按下后的行为。所以我在上一节才说这是扩展性最好的方法。QWidget::hide和QAction::setVisible就能实现按钮的隐藏，这一功能的实现就当做练习吧。最终的显示效果
int main(int argc, char *argv[]) {QApplication app(argc, argv);// 方案1auto edit1 = new QLineEdit;edit1->setClearButtonEnabled(true);// 方案2auto clearAction = new QAction;clearAction->setIcon(QIcon(":/clear.png"));auto edit2 = new QLineEdit;edit2->addAction(clearAction, QLineEdit::TrailingPosition);QObject::connect(clearAction,&QAction::triggered,edit2,[edit2]{ edit2->setText(""); });// 方案3// 使用文本按钮auto edit3_1 = new ButtonEdit("clear");QObject::connect(edit3_1,&ButtonEdit::buttonClicked,edit3_1,[edit3_1]{ edit3_1->setText(""); });// 使用图标按钮auto edit3_2 = new ButtonEdit(QApplication::style()->standardIcon(QStyle::SP_DialogResetButton));QObject::connect(edit3_2,&ButtonEdit::buttonClicked,edit3_2,[edit3_2]{ edit3_2->setText(""); });auto win = new QWidget;auto layout = new QFormLayout;layout->addRow("方案1：", edit1);layout->addRow("方案2：", edit2);layout->addRow("方案3_1：", edit3_1);layout->addRow("方案3_2：", edit3_2);win->setLayout(layout);win->show();return app.exec();}
原文始发于微信公众号（汇编语言）：三种方法为QLineEdit添加清除内容按钮
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论