Shulou(Shulou.com)06/01 Report--

This article mainly introduces Qt how to achieve navigation button control, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

I. Preface

Navigation button controls, mainly used for a variety of beautiful and exquisite navigation bars, we often see in web navigation bars are very exquisite, are achieved by html+css+js, but also with excessive animation effects, Qt provides qss is actually invincible, support basically all the CSS2 attributes, with QPainter this invincible Dafa tool, nothing can not be drawn. This control summarizes most of the navigation bar styles, such as left + right + top + bottom, line indicator, inverted triangle indicator, etc. You can also add icons in front of the navigation bar to make it more distinctive. With this control, you no longer have to worry about not having fine navigation. In short, this control is used in many of my projects, and many friends in the QT world are also using it, and the response is very warm and good.

Main functions:

You can set the left + right + top + bottom interval of the text

Text alignment can be set

Can be set to display inverted triangle / length of inverted triangle / position of inverted triangle / color of inverted triangle

Can set display icon / icon interval / icon size / normal status icon / hover status icon / selected status icon

You can set the display border line / line width / line interval / line position / line color

Normal background color / hover background color / selected background color can be set

Can set normal text color / hover text color / selected text color

You can set the background color to the brush color

2. Code ideas void NavButton::paintEvent (QPaintEvent *) {/ / preparation for drawing, enable anti-aliasing QPainter painter (this); painter.setRenderHints (QPainter::Antialiasing | QPainter::TextAntialiasing); / / draw background drawBg (& painter); / / draw text drawText (& painter); / / draw icon drawIcon (& painter); / / draw border lines drawLine (& painter) / draw inverted triangle drawTriangle (& painter);} void NavButton::drawBg (QPainter * painter) {painter- > save (); painter- > setPen (Qt::NoPen); int width = this- > width (); int height = this- > height (); QRect bgRect; if (linePosition = = LinePosition_Left) {bgRect = QRect (lineSpace, 0, width-lineSpace, height) } else if (linePosition = = LinePosition_Right) {bgRect = QRect (0,0, width-lineSpace, height);} else if (linePosition = = LinePosition_Top) {bgRect = QRect (0, lineSpace, width, height-lineSpace);} else if (linePosition = = LinePosition_Bottom) {bgRect = QRect (0,0, width, height-lineSpace);} / / if the brush exists, paint QBrush bgBrush If (isChecked ()) {bgBrush = checkBgBrush;} else if (hover) {bgBrush = hoverBgBrush;} else {bgBrush = normalBgBrush;} if (bgBrush! = Qt::NoBrush) {painter- > setBrush (bgBrush);} else {/ / choose the corresponding color QColor bgColor; if (isChecked ()) {bgColor = checkBgColor according to the current state } else if (hover) {bgColor = hoverBgColor;} else {bgColor = normalBgColor;} painter- > setBrush (bgColor);} painter- > drawRect (bgRect); painter- > restore ();} void NavButton::drawText (QPainter * painter) {painter- > save (); painter- > setBrush (Qt::NoBrush); / / Select the corresponding color QColor textColor according to the current state If (isChecked ()) {textColor = checkTextColor;} else if (hover) {textColor = hoverTextColor;} else {textColor = normalTextColor;} QRect textRect = QRect (paddingLeft, paddingTop, width ()-paddingLeft-paddingRight, height ()-paddingTop-paddingBottom); painter- > setPen (textColor); painter- > drawText (textRect, textAlign | Qt::AlignVCenter, text ()); painter- > restore () } void NavButton::drawIcon (QPainter * painter) {if (! showIcon) {return;} painter- > save (); QPixmap pix; if (isChecked ()) {pix = iconCheck;} else if (hover) {pix = iconHover;} else {pix = iconNormal } if (! pix.isNull ()) {/ / proportional smooth zoom icon pix = pix.scaled (iconSize, Qt::KeepAspectRatio, Qt::SmoothTransformation); painter- > drawPixmap (iconSpace, (height ()-iconSize.height ()) / 2, pix);} painter- > restore ();} void NavButton::drawLine (QPainter * painter) {if (! showLine) {return } if (! isChecked ()) {return;} painter- > save (); QPen pen; pen.setWidth (lineWidth); pen.setColor (lineColor); painter- > setPen (pen); / / set line coordinates QPoint pointStart according to line position, pointEnd; if (linePosition = = LinePosition_Left) {pointStart = QPoint (0,0); pointEnd = QPoint (0, height ()) } else if (linePosition = = LinePosition_Right) {pointStart = QPoint (width (), 0); pointEnd = QPoint (width (), height ());} else if (linePosition = = LinePosition_Top) {pointStart = QPoint (0,0); pointEnd = QPoint (width (), 0);} else if (linePosition = LinePosition_Bottom) {pointStart = QPoint (0, height ()) PointEnd = QPoint (width (), height ());} painter- > drawLine (pointStart, pointEnd); painter- > restore ();} void NavButton::drawTriangle (QPainter * painter) {if (! showTriangle) {return;} / / Select or hover if (! hover & &! isChecked ()) {return;} painter- > save (); painter- > setPen (Qt::NoPen) Painter- > setBrush (triangleColor); / / draw in the middle on the right and set three point positions int width = this- > width (); int height = this- > height (); int midWidth = width / 2; int midHeight = height / 2; QPolygon pts; if (trianglePosition = TrianglePosition_Left) {pts.setPoints (3, triangleLen, midHeight, 0, midHeight-triangleLen, 0, midHeight + triangleLen) } else if (trianglePosition = = TrianglePosition_Right) {pts.setPoints (3, width-triangleLen, midHeight, width, midHeight-triangleLen, width, midHeight + triangleLen);} else if (trianglePosition = = TrianglePosition_Top) {pts.setPoints (3, midWidth, triangleLen, midWidth-triangleLen, 0, midWidth + triangleLen, 0);} else if (trianglePosition = = TrianglePosition_Bottom) {pts.setPoints (3, midWidth, height-triangleLen, midWidth-triangleLen, height, midWidth + triangleLen, height) } painter- > drawPolygon (pts); painter- > restore ();} III. Effect diagram

Thank you for reading this article carefully. I hope the article "how to implement Navigation Button Control in Qt" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.