Search bar - layout

[sousadaniel7]

Hello
Someone can tell me how I can do a search bar that looks like this -> barraPesquisa.png

Regards,
Daniel Sousa

[davidovv]

it the designer, right click on widget, change stylesheet,
one example for rounded border

#frame
{
border: 5px solid gray;
border-radius: 10px;
}

for the rest...
experiment with stylesheets

[sousadaniel7]

it the designer, right click on widget, change stylesheet,
one example for rounded border

#frame
{
border: 5px solid gray;
border-radius: 10px;
}

for the rest...
experiment with stylesheets

But how do I put a QLineEdit with so round?

[davidovv]

read this one for better explanation, and better idea what can you do
http://doc.qt.io/qt-4.8/stylesheet-examples

You can also look at demos and examples

[Spitfire]

Like davidovv said, setStyleSheet() and border-radius is a way of creating rounded corners.

But if you want to have the search bar exacly as the one on the picture, you will need more complex widget than simple line edit.

[tferreira]

Quickly, you can create a custom widget that inherits QLineEdit.
Then have a QHBoxLayout inside with all those components, something like this:

QLabel magnifierIcon = new QLabel(this);
magnifierIcon->setFocusPolicy(Qt::NoFocus);
magnifierIcon->setObjectName("searchMagnifierIcon");
magnifierIcon->setPixmap("qrc:/images/magnifier.png");
 
QLabel voiceInput = new QLabel(this);
voiceInput->setObjectName("voiceInputIcon");
voiceInput->setPixmap("qrc:/images/voiceinput.png");
 
QHBoxLayout *lineEditLayout = new QHBoxLayout;
lineEditLayout->setMargin(0);
lineEditLayout->addWidget(magnifierIcon, 0, Qt::AlignLeft|Qt::AlignVCenter);
lineEditLayout->addStretch();
lineEditLayout->addWidget(voiceInput, 0, Qt::AlignRight|Qt::AlignVCenter);
// Set the QLineEdit layout
setLayout(lineEditLayout);

QLabel magnifierIcon = new QLabel(this);
magnifierIcon->setFocusPolicy(Qt::NoFocus);
magnifierIcon->setObjectName("searchMagnifierIcon");
magnifierIcon->setPixmap("qrc:/images/magnifier.png");

QLabel voiceInput = new QLabel(this);
voiceInput->setObjectName("voiceInputIcon");
voiceInput->setPixmap("qrc:/images/voiceinput.png");

QHBoxLayout *lineEditLayout = new QHBoxLayout;
lineEditLayout->setMargin(0);
lineEditLayout->addWidget(magnifierIcon, 0, Qt::AlignLeft|Qt::AlignVCenter);
lineEditLayout->addStretch();
lineEditLayout->addWidget(voiceInput, 0, Qt::AlignRight|Qt::AlignVCenter);
// Set the QLineEdit layout
setLayout(lineEditLayout);

To copy to clipboard, switch view to plain text mode 

Ofcourse the magnifierIcon could be a QComboBox or a QToolButton.

Then your stylesheet would be something like this:

QLineEdit
{
    border: 1px solid #D2D2D2;
    padding-left: 15px; /* must have padding on the left, so it gives some space for the magnifier icon */
    padding-right: 15px; /* must have padding on the right, so it gives some space for the voice input icon */
    border-radius: 8px;
}
QLineEdit #searchMagnifierIcon
{
	border: 0px;
	padding: 0px;
	width: 13px; /* width of the magnifier icon */
	height: 12px; /* height of the magnifier icon */
	margin-left: 5px;
}

QLineEdit
{
    border: 1px solid #D2D2D2;
    padding-left: 15px; /* must have padding on the left, so it gives some space for the magnifier icon */
    padding-right: 15px; /* must have padding on the right, so it gives some space for the voice input icon */
    border-radius: 8px;
}
QLineEdit #searchMagnifierIcon
{
	border: 0px;
	padding: 0px;
	width: 13px; /* width of the magnifier icon */
	height: 12px; /* height of the magnifier icon */
	margin-left: 5px;
}

To copy to clipboard, switch view to plain text mode 

I hope this helps.