Qt自定义SearchLine控件--实现按钮及相应功能

最近迷上了自定义一些简单的控件，今天看一个搜索框的自定义。实现的功能是：

• 在 QLineEdit 的末尾添加一个 button ，这个button 就是我们常见的搜索按钮
• 点击按钮后可模拟发送 QLineEdit 的 textEdited 信号
• 这个搜索框可以存储一些数据

效果如下：

我们选择继承 QLineEdit 类来实现，这样是最简单最快的方式。

class SearchLine : public QLineEdit
{
	Q_OBJECT

public:
	explicit SearchLine(QWidget* parent = nullptr);

	~SearchLine();

	void setData(const QVariant& data)
	{
		m_data = data;
	}

	QVariant data() const
	{
		return m_data;
	}

private:
	void initPage();

private:
	QVariant m_data{ QVariant() };
};

看上面的类的定义，基本上是只有一个函数的。

void SearchLine::initPage()
{
	this->setProperty("type", "search");
	
	auto* btn = new QPushButton();
	auto* layout = new QHBoxLayout();
	layout->addStretch();
	layout->addWidget(btn);
	layout->setContentsMargins(0, 5, 0, 0);
	this->setLayout(layout);
	btn->setProperty("type", "search");
	connect(btn, &QPushButton::clicked, this, [this]()
	{
		emit textEdited(this->text());
	});
}

函数的功能是很简单的，在构造的时候调用，在QLineEdit 上new 一个 QPushbutton，并且将QPushbutton移到 QLineEdit 的末尾。使得该按钮被点击的时候发送 textEdit 信号即可。

下面是对该控件的样式表，当然样式表的设计肯定是自己来搞，毕竟每个工程都大同小异，但还是会有一些稍微的差别。

QLineEdit[type="search"]
{
	border: 1px solid #CCCCCC;
	border-radius:4px;
	font-size:14px;
	color:#262626;
	width:280px;
	height:30px;
}

QLineEdit[type="search"]:hover
{
	border: 1px solid #a1a0a0;
}

QLineEdit:selected
{
	border:1px solid #4691EE;
	border-radius:4px;
}

QPushButton[type="search"]
{
	border-image: url(:/searchline/search.png);
	qproperty-minimumSize: 24px 24px;
	qproperty-maximumSize: 24px 24px;
}
QPushButton[type="search"]:hover
{
	border-image: url(:/searchline/search_hover.png);
}
QPushButton[type="search"]:pressed
{
	border-image: url(:/searchline/search_pressed.png);
}

使用也是简单，新建 QLineEdit ,并将一个 QLineEdit 提升为 SearchLine 即可。

测试代码