Qt QLineEdit 输入内容后字数在右侧动态展示

前言

QLineEdit 设置可输入最大长度可以使用

cpp 复制代码
lineEdit->setMaxLength(10);

怎么实时的把当前输入字数显示出来呢,像饿了么的 input 组件那样

javascript 复制代码
<el-input
  type="text"
  placeholder="请输入内容"
  v-model="text"
  maxlength="10"
  show-word-limit
>
</el-input>

Qt 中 QLineEdit 配合 QLabel 也可以很方便的实现这个效果。

效果图

代码实现

cpp 复制代码
#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_QLineEditDemo.h"
#include <QLineEdit>
#include <QLabel>

class QLineEditDemo : public QMainWindow
{
	Q_OBJECT

public:
	QLineEditDemo(QWidget *parent = Q_NULLPTR);

private:
	Ui::QLineEditDemoClass ui;
	QLineEdit	*lineEdit;
	QLabel		*labelMax;

private slots:
	void onEdit(const QString& text);
};
cpp 复制代码
#include "QLineEditDemo.h"

QLineEditDemo::QLineEditDemo(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);

	// 创建输入框
	lineEdit = new QLineEdit(this);
	lineEdit->setPlaceholderText(QString::fromLocal8Bit("请输入文本"));
	lineEdit->setFixedSize(326,32);
	connect(lineEdit, &QLineEdit::textEdited, this, &QLineEditDemo::onEdit);
	
	//lineEdit 增加字数label
	lineEdit->setStyleSheet(QString::fromLocal8Bit("QLineEdit{\
		padding:6px 55px 6px 12px;\
		border-radius: 2px;\
		border: 1px solid #408cff;\
		background: #FFF;\
		font: 10pt \"微软雅黑\";\
		}"));
	labelMax = new QLabel("0/10", lineEdit);
	labelMax->setObjectName("labelMax"); // 设置子控件的对象名
	labelMax->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
	labelMax->setFixedSize(45, 26); // 设置固定高,lineEditReason 32
	labelMax->setStyleSheet(QString::fromLocal8Bit("border:none;color: #cccccc;font: 10pt \"微软雅黑\";"));
	labelMax->move(326 - 45 - 10, (32 - 26) / 2); // 将label移动到lineEdit右侧 

	ui.verticalLayout->addWidget(lineEdit);

}

void QLineEditDemo::onEdit(const QString& text)
{
	int len = text.length();
	labelMax->setText(QString("%1/10").arg(len));
	if (len <= 10)
	{
		labelMax->setStyleSheet(QString::fromLocal8Bit("color: #cccccc;font: 10pt \"微软雅黑\";"));
	}
	else
	{
		labelMax->setStyleSheet(QString::fromLocal8Bit("color: #FF5050;font: 10pt \"微软雅黑\";"));
	}
}

需要注意的是,QLabel 的尺寸和移动到 QLineEdit 的位置是相关的。

如变更QLabel的尺寸,相关位置也要做调整。

另外我这里没有限制最大可输入长度,而是当超过最大长度后,将字数红色展示。

实际应用中可以和提交按钮做个联动,超过就让其不可用就好。

相关推荐
重生之我是数学王子3 小时前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
----云烟----12 小时前
QT中QString类的各种使用
开发语言·qt
「QT(C++)开发工程师」18 小时前
【qt版本概述】
开发语言·qt
一路冰雨1 天前
Qt打开文件对话框选择文件之后弹出两次
开发语言·qt
老赵的博客1 天前
QT 自定义界面布局要诀
开发语言·qt
码码哈哈0.01 天前
VSCode 2022 离线安装插件QT VSTOOl报错此扩展不能安装在任何当前安装的产品上。
ide·vscode·qt
feiyangqingyun1 天前
Qt/C++离线地图的加载和交互/可以离线使用/百度和天地图离线/支持手机上运行
c++·qt·qt天地图·qt离线地图·qt地图导航
gz94562 天前
windows下,用CMake编译qt项目,出现错误By not providing “FindQt5.cmake“...
开发语言·qt
「QT(C++)开发工程师」2 天前
Ubuntu 26.04 LTS 大升级:Qt 6 成为未来新引擎
qt
兆。2 天前
python实战案例----使用 PyQt5 构建简单的 HTTP 接口测试工具
爬虫·python·qt