Custom styles QMenu

Recent work needed to achieve a custom look of the menu, but in the online search found that there is little QMenu style custom-depth analysis relevant. Ask the company, a senior, he mentioned QMenu custom style is not convenient, so he himself is generally achieved a menu control. But this would be too much trouble, so after some exploration basically achieved their desired style.

QMenu subcomponents layouts

Used QSS (Qt Style Sheet) through complex custom controls, and other generally known as QSlider Qt to the control comprises a plurality of subcontrol (hereinafter translated child controls). Qt comes with the child controls contained controls can Qt stylesheet reference Read on. But the document does not give the relative relationship between the child controls.

By QMenu column to view the document, we can know QMenu include item, indicator, separator, right-arrow, scroller, tearoff, relatively speaking, belong to the child controls more control of where item, indicator, separator, right-arrowis more common for the child controls. To determine the relative positional relationship between the child control, we can set a different view of the background color and border controls by pairs. Results shown in FIG. According to the picture, we can see that, QMenu by a number of rows, each row may be a won . Notice and is located inside the borders, we can launch and two child controls contained within. Located on the left side of the center, located on the right side of the center. The picture of the text is and and overlap, so in order to avoid blocking, we need to set the appropriate and .

::item::separator::indicator::right-arrow::item::indicatorright-arrow::item::indicator::item::right-arrow::item::item::indicator::right-arrow::itempadding-leftpadding-right

Border shadow of QMenu

Border shadow QMenu we can be achieved by setting a background image. However, during the setup process, I found QMenu of border-widtha bug attributes.
The figure is provided in the following effects QSS

QMenu {
    background-color: #F00000;
 border-width: 10px 20px 30px 40px;
 border-style: solid;
 border-color: #00000F;
}

After several adjustments comparison, I found that both the four sides border-widthto set what kind of value, the width of the border are in fact the last value, set the border width section displays the border color for the part of the extra frame, then fill the background color. This leads me not a good indication of the border shadow, the shadow of the border there will always be some offset, the shadow width of the four sides are not exactly the same. After some attempts, still no solution had to consult with the designer, providing cutting plans to the widest width for the border shadow side, the other side filled with a suitable transparent part temporarily avoid this problem.

Another problem is that there is a default QMenu shadows, we need to remove the default shadow. We can add to QMenu Qt::NoDropShadowWindowHintsolve the problem of WindowFlag.

QMenu the size of the problem

QMenu default will dynamically adjust its display size based on the content of the entries, but when I adjusted the text QSS font size, QMenu not adjusted to the right size, in practice, result in text display incomplete. This problem has troubled me for a long time, then suddenly thought of another person when and to discuss this issue, whether the content may be determined in accordance with the size of QMenu QSS is not yet valid. Since QSS is actually to achieve concrete results through QStyle, and QStyle is by calling QStyle::polishto do the initial method of control styles. In this method of documentation there is such a description:

This function is called for every widget at some point after it has been fully created but just before it is shown for the very first time.
说明QSS生效是在控件创建完成后，这个时候控件的大小已经确定，所以我们需要在控件创建完成前设置好空间的字体属性，而不能通过QSS来设置。

QMenu的弹出位置

QMenu默认弹出位置是和设置该菜单的控件位置相关的。但有时我们需要控制菜单的弹出位置。例如，我们需要在点击一个按钮后弹出菜单。通常情况下，我们可以通过QPushButton::setMenu来设置一个菜单。但这种方式QMenu固定以和按钮左对齐的方式显示，如果我们希望弹出菜单和按钮保持居中就无法实现。因此我们需要换一种方式。QMenu提供了QMenu::exec方法，我们可以传入QPoint来指定菜单弹出位置。这里有两处需要额外注意的地方。

QMenu其实是一个独立的顶层窗口，因此其位置是相对于整个桌面的，而不是相对于程序主窗口。在Qt的文档中有以下说明：

Pops up the menu so that the action action will be at the specified global position p. To translate a widget’s local coordinates into global coordinates, use QWidget::mapToGlobal().
因此我们需要通过坐标转换来得出菜单实际弹出的位置。
在计算QMenu的弹出位置时我们可能需要使用到QMenu的窗口大小属性，然而文档中提到了

When positioning a menu with exec() or popup(), bear in mind that you cannot rely on the menu’s current size(). For performance reasons, the menu adapts its size only when necessary. So in many cases, the size before and after the show is different. Instead, use sizeHint() which calculates the proper size depending on the menu’s current contents.
所以正确的获取QMenu的窗口大小的姿势是通过sizeHint()方法。

summary

Relatively speaking, QMenu be a more complex controls up. For this type of control, we must first read the official API documentation, Qt documentation is quite good tool, make good use of this tool can be a little step on a lot of our pit. But for now, Qt realize there is still a BUG, in the actual development we need in time to see the cause of the problem, do not spend too much time on the BUG tool, to be good at finding ways to bypass the BUG.

Reprint: