[SOLUCIONADO] Qt: Personalizar QLineEdit

[jc_moj]

Hola

Quiero hacer un QLineEdit personalizado, estoy buscando algo de documentación, pero todo lo que encontré es para hacer widgets personalizados a partir de QWidget.

Pero yo lo que quiero es añadir una nueva propiedad (float) al QLineEdit y que muestre un pequeño texto en base al valor de esa propiedad junto a lo que escribe el usuario (pegado al lado derecho había pensado).

Así que si tenéis algún link por ahí me sería de mucha ayuda :)

Un saludo

[dehm]

Te comentaría que es tan fácil como crear una clase derivada a partir de QLineEdit y añadir o modificar los aspectos que quieras, pero como sabes 1000 veces más que yo de Qt asumo que no he entendido la pregunta

[xKuZz]

Yo lo haría así, seguramente haya más maneras de hacerlo.

Para asegurarte de que sea float puedes:

• Utilizar un QLineEdit y utilizar un validator.
• Utilizar un QDoubleSpinBox.

Para implementarlo podemos hacer lo siguiente:

1. Crea una clase nueva a partir de QWidget
2. Añade la Q_PROPERTY e implementa lo que necesites para ello.
3. En la clase nueva añade un QLabel(que tendrá el texto que necesites) y la opción superior que hayas tomado.
4. En la clase nueva crear un QHBoxLayout para asegurar que una cosa está a la derecha de otra insertando ambos widgets en el layout en orden.
5. Conecta la señal de cambio de la opción superior con un slot privado que modifique el valor de la propiedad.
6. Conecta la señal del Notify de la propiedad con un slot privado nuevo que crees en la clase.
7. La implementación del slot consistirá en modificar el valor del QLabel en función del valor que recibas de la propiedad.

Con spinbox sería algo así:

Código C++:

class A : public QWidget {
    Q_OBJECT
    Q_PROPERTY(double number READ getNumber WRITE setNumber NOTIFY numberChanged)
public:
    A() {
        lay = new QHBoxLayout(this);
        spin = new QDoubleSpinBox(this);
        spin->setMinimum(-100);
        label = new QLabel(this);
 
        lay->addWidget(spin);
        lay->addWidget(label);
        connect(spin, SIGNAL(valueChanged(double)), this, SLOT(setNumber(double)));
        connect(this, SIGNAL(numberChanged(double)), this, SLOT(setLabel(double)));
    }
 
    double getNumber() {
        return spin->text().toDouble();
    }
 
private:
    // UI
    QLabel* label;
    QDoubleSpinBox* spin;
    QHBoxLayout* lay;
 
    // Properties
    double m_number;
 
signals:
    void numberChanged(double);
 
private slots:
    void setNumber(double a) {
        qDebug() << "Cambiando propiedad a " << a;
        m_number = a;
        emit numberChanged(a);
    }
 
    void setLabel(double a) {
        qDebug() << "Cambiando label";
        if (a == 0)
            label->setText("PRUEBA 1");
        else if (a < 0)
            label->setText("ASBDAD");
        else
            label->setText("CCCCCCCC");
 
    }
};
 

[jc_moj]

Hola

Iniciado por dehm

Te comentaría que es tan fácil como crear una clase derivada a partir de QLineEdit y añadir o modificar los aspectos que quieras, pero como sabes 1000 veces más que yo de Qt asumo que no he entendido la pregunta

Ufff, ando prácticamente desconectado de la programación desde hace meses, lo único que he hecho en meses es un par de proyectos para Android (ahora estoy con uno), pero tengo que actualizar un programa que hice hace tiempo y sería una mejora muy "chula" ese QLineEdit personalizado.

Sí, eso es lo que quiero, hacer una clase derivada de QLineEdit, pero es un tema que nunca toqué y ando un poco perdido, estaba buscando algún ejemplo para orientarme.

Iniciado por xKuZz

Yo lo haría así, seguramente haya más maneras de hacerlo.
Para asegurarte de que sea float puedes:

• Utilizar un QLineEdit y utilizar un validator.
• Utilizar un QDoubleSpinBox.

Me perdí un poco con el QDoubleSpinBox, el valor float que necesito poder asignarle al QLineEdit no tengo que mostrarlo, si no el resultado de multiplicar ese valor por el número que introduzca el usuario.

Voy a revisar tu ejemplo :)

Un saludo

[xKuZz]

Se puede hacer con un QLineEdit perfectamente, hasta esta noche 23h-24h (hora de España )no podré volver a ponerme con el pc, ¿podrías cuál es la funcionalidad exacta (más o menos) que buscas del QLineEdit para poder ayudarte mejor?

Saludos.

[eferion]

Solo un detalle, xKuZz.

Q_PROPERTY únicamente es necesario usarlo si vas a acceder a la clase a través de metadatos, por ejemplo para hacerla accesible por scripting, o para que la propiedad sea visible desde QtCreator... aunque para esto último también habría que crear el plugin específico...

Lo comento porque esa parte es quizás la menos necesaria de todas... aunque sea una tontería su implementación :)

jc_moj, quizás sería más sencillo si hicieses un pequeño montaje con el paint o gimp añadiendo todo lujo de explicaciones al boceto para hacernos una idea de lo que quieres hacer.

Un saludo

[jc_moj]

Hola

Iniciado por eferion

jc_moj, quizás sería más sencillo si hicieses un pequeño montaje con el paint o gimp

Sí, creo que será mejor :



Lo que yo quiero añadirle por código serían esos números rojos, bueno, no tienen que ser tan grandes, los puse así para que se vean bien (y por que soy muy malo con gimp ) y la posición más o menos esa.

Ese número iría cambiando a medida que el usuario introduce un numero (solo aceptaría números enteros el QLineEdit) y sería el resultado de multiplicar el número que haya tecleado el usuario por el valor de la nueva propiedad de tipo float que debería tener el QlineEdit. Además tendría que implementar un getter que me de ese número sobreimpreso.

Hace tiempo creo recordar que vi algo parecido, solo que ahí iba mostrándose el número de caracteres que se iban tecleando, pero no encuentro ese ejemplo ahora :(

Un saludo

[xKuZz]

Ahora se ve bastante más claro:

1. La nueva clase herederá de QLineEdit, si queremos que utilice las mismas funciones que QLineEdit utilizaremos herencia pública, posteriormente si utilizas C++11 o superior, consideramos eliminar algunas de las funciones públicas que pueden modificar el comportamiento buscado.
2. En la parte privada de la clase añadimos un QHBoxLayout* (para la parte visual) y un QLabel* (para mostrar el número multiplicado).
   
3. Empezamos el constructor llamando al constructor de QLineEdit en la lista de inicialización pasado como argumento el Widget superior.
4. Para permitir sólo números enteros utilizamos la función setValidator de QLineEdit con un QIntValidator en el constructor.
   
5. En el constructor inicializamos el Label con el valor nulo y le damos el valor deseado
6. Para conseguir el efecto visual deseado haremos los siguiente. El Layout lo inicializamos tomando como padre al widget actual (this) y al layout le añadimos el label con alineación a la derecha.
7. Por último conectamos la señal de cambio del QLineEdit heredada con un slot que creamos para modificar el label.
8. Añade todo lo demás que te haga falta.

Código C++:

// Considera si quieres herencia o agregación para el uso que le vayas a dar
class myLineEdit : public QLineEdit {
    Q_OBJECT
public:
    myLineEdit(QWidget* parent) : QLineEdit(parent) {
        // Permitimos sólo números enteros
        QLineEdit::setValidator(new QIntValidator(this));
        // Creamos un QLabel para poner el número multiplicado
        label = new QLabel("0.00",this);
        // Usamos CSS para ponerlo en rojo
        label->setStyleSheet("color: DarkRed");
 
        // Creamos un Layout sobre el QLineEdit y añadimos el label en la derecha
        myLay = new QHBoxLayout(this);
        myLay->addWidget(label,0,Qt::AlignRight);
 
        // Conectamos la señal de cambio en el QLineEdit con el slot que está a continuación
        connect(this,SIGNAL(textChanged(QString)), this, SLOT(setLabel(QString)));
    }
    // Considera quitar el acceso público a algunas opciones si has determinado usar herencia
    void setValidator(const QValidator *) = delete;
    void setInputMask(const QString &inputMask) = delete;
 
private slots:
    // El siguiente slot modifica el valor del labe
    void setLabel(QString s) {
        double numero = s.toInt() * propiedad;
        label->setText(QString::number(numero));
    }
 
private:
    QLabel* label;
    QHBoxLayout* myLay;
    float propiedad = 5.02;
};
 

[eferion]

Veo que xKuZz se me adelantó por unos minutos... aun así te pongo mi propuesta para que no caiga en saco roto :)

Las dos versiones son bastante parecidas aunque cada una tiene sus ventajas.

Código C++:

#include <QLineEdit>
 
class QLabel;
 
class LineEdit2
    : public QLineEdit
{
    Q_OBJECT
 
public:
    LineEdit2(
            QWidget* parent = nullptr);
 
    ~LineEdit2();
 
    void SetLabelOffset(int offset);
 
    int GetLabelOffset() const;
 
    void SetMultiplier(double value);
 
    double GetMultiplier() const;
 
    double GetValue() const;
 
private:
 
    QLabel* _label;
    int _labelOffset;
 
    double _multiplier;
 
    void resizeEvent(QResizeEvent *event) override;
 
private slots:
 
    void UpdateValue();
    void UpdatePosition();
};
 
LineEdit2::LineEdit2(QWidget *parent)
    : QLineEdit(parent),
      _label(new QLabel(this)),
      _labelOffset(50),
      _multiplier(1.0)
{
  _label->setText("0.00");
  _label->setAlignment(Qt::AlignRight | Qt::AlignHCenter);
  _label->setStyleSheet("color: darkred");
 
  setValidator(new QIntValidator(this));
 
  connect(this,SIGNAL(editingFinished()),SLOT(UpdateValue()));
}
 
LineEdit2::~LineEdit2()
{
 
}
 
void LineEdit2::SetLabelOffset(int offset)
{
  if( _labelOffset != offset )
  {
    _labelOffset = offset;
    UpdatePosition();
  }
}
 
int LineEdit2::GetLabelOffset() const
{
  return _labelOffset;
}
 
void LineEdit2::SetMultiplier(double value)
{
  if( _multiplier != value )
  {
    _multiplier = value;
    UpdateValue();
  }
}
 
double LineEdit2::GetMultiplier() const
{
  return _multiplier;
}
 
double LineEdit2::GetValue() const
{
  return _label->text().toDouble();
}
 
void LineEdit2::resizeEvent(QResizeEvent *event)
{
  QLineEdit::resizeEvent(event);
  UpdatePosition();
}
 
void LineEdit2::UpdateValue()
{
  auto value = text().toDouble();
  auto text = QString::number(value*_multiplier,'f',2);
  auto pos = text.indexOf('.');
  if( pos < 0 )
    text += ".00";
  else
    text += QString(pos+3-text.length(),'0');
 
  _label->setText(text);
}
 
void LineEdit2::UpdatePosition()
{
  _label->move(width()-_labelOffset,1);
  _label->resize(_labelOffset-1,height()-2);
}
 

Lo de deshabilitar el acceso a los métodos no lo he puesto porque tirando de polimorfismo se pueden seguir llamando a las funciones, aunque no deja de ser una pequeña barrera para evitar accesos no deseados:

Código C++:

struct Base
{
    void func(){}
};
 
struct Derivada : public Base
{
    void func() = delete;
};
 
int main()
{
    Derivada* d = new Derivada;
    Base* b = d;
    
    d->func(); // Error de compilación
    b->func(); // OK
}
 

Un saludo.

[dehm]

Qué máquinas sois.
Yo me estaba peleando porque no se me veía el label con los valores actualizados (la cosa de perder la poca costumbre que tenía manejando los layouts a mano :( )

Pero creo que xKuZz ha acertado con la señal...de forma que cada vez que se actualiza cualquier dígito en el QLineEdit, se muestra el valor actualizado en el label :D (será porque yo también había usado esa señal ) Aunque yo ni siquiera había puesto un validador.


Por cierto, creo que es la primera vez que veo el uso de delete para evitar accesos a algunos métodos.(menos aún la forma de saltárse la restricción) Lo dicho, sois unos máquinas.

[jc_moj]

Hola

Iniciado por dehm

Qué máquinas sois.

Pues sí @dehm, unos auténticos máquinas :)

En cuanto pueda voy a ver las dos propuestas detenidamente.

Y yo que estaba "encabezonado" en que había que sobreescribir el método que se encarga de dibujar el control y en el dibujar el nuevo texto.

Un saludo

[eferion]

Iniciado por jc_moj

Y yo que estaba "encabezonado" en que había que sobreescribir el método que se encarga de dibujar el control y en el dibujar el nuevo texto.

Esa es la forma que menos rendimiento consume salvo que lo hagas desastrosamente mal... eso a costa de tener que reescribir un montón de código que ya está escrito en otros sitios... pero créeme que por poder, se puede.

Un saludo.

[jc_moj]

Hola

Iniciado por eferion

Esa es la forma que menos rendimiento consume salvo que lo hagas desastrosamente mal... eso a costa de tener que reescribir un montón de código que ya está escrito en otros sitios... pero créeme que por poder, se puede.

Seguro que en alguna parte vi algún ejemplo así, de ahí que estuviese empeñado en hacerlo así.

Solo he tenido tiempo de hacer copy & paste, pero aquí está el resultado de las dos propuestas, sin tocar nada:



En ambos casos la etiqueta sigue en su sitio cuando se redimensiona, la versión de @xKuZz no coloca correctamente el texto, o es muy grande, pero no he tenido tiempo de mirarlo :(

A ver si mañana tengo un rato. Me gustaron las dos propuestas.

Un saludo

[xKuZz]

Perdona, lo puse sobre el centralWidget de un proyecto de prueba y no pensé en eso. Lo que impide que lo veas completamente es el margen por defecto del layout. Para solucionarlo al crear el layout en el constructor de myLineEdit le quitas el margen utilizando la función setMargin(0) y para que no se quede muy pegado al final añade espacio con addSpacing(int), algo así:

Código C++:

// Creamos un Layout sobre el QLineEdit y añadimos el label en la derecha
        myLay = new QHBoxLayout(this);
        myLay->setMargin(0);
        myLay->addWidget(label,0,Qt::AlignRight);
        myLay->addSpacing(5);
 

[jc_moj]

Hola

Iniciado por xKuZz

Perdona, lo puse sobre el centralWidget de un proyecto de prueba y no pensé en eso. Lo que impide que lo veas completamente es el margen por defecto del layout. Para solucionarlo al crear el layout en el constructor de myLineEdit le quitas el margen utilizando la función setMargin(0) y para que no se quede muy pegado al final añade espacio con addSpacing(int), algo así:

Código C++:

// Creamos un Layout sobre el QLineEdit y añadimos el label en la derecha
        myLay = new QHBoxLayout(this);
        myLay->setMargin(0);
        myLay->addWidget(label,0,Qt::AlignRight);
        myLay->addSpacing(5);
 

Pues después de escribir mi anterior mensaje, ya en el coche, iba pensando que tenía que ser problema de márgenes.

Mañana lo pruebo y comento.

Un saludo

[jc_moj]

Hola

Pues sí, era problema con el margen:



Las dos soluciones, aunque muy parecidas, cada una dibuja la etiqueta de una forma, funcionan de forma idéntica y muy bien :)

Un saludo