QT implementation fillet window

use QT When doing interface development , From time to time, there will be some more difficult style requirements , For example, you need a separate window , Set to fillet style .

//UI In file , Style settings for the outermost window 
#ChooseUsbCamera{ // Class name 
	background-color: rgb(255, 255, 255);	// The background color （ white ）
	border-radius: 10px;					// The diameter of the corners 
	border-style:solid;						// Border style （ Solid line ）
	border-width:2px;						// Border width 
	border-color:rgb(213, 213, 213);		// Border color 
}

such , Simply make an interface effect with rounded corners and borders , Relatively beautiful .

But then the problem comes , Although it is set to fillet , But the transparency of the four top corners cannot be achieved , This will naturally add transparent code when the window is initialized ：

setAttribute(Qt::WA_TranslucentBackground);

But it becomes the complete transparency of the window background , Even if you set the style related to the background

This may be due to the transparency setting , It overwrites our customized style . At this time, you need to reload paintEvent event , Redraw the picture

void ChooseUsbCamera::paintEvent(QPaintEvent *event)
{
    
    QStyleOption opt;
    opt.init(this);
    QPainter painter(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);
}

therefore , Finally, this simple but troublesome rounded window effect is achieved ：

You can see , Its four corners are transparent , Achieve the effect of rounded corners . And there is a little gray border effect , It's not obvious hh.
In fact, if you are a part in the window , Set the style in the same way , Or fill the image with transparency directly , It doesn't need to be so troublesome . But the top-level window is often not set up , After studying for a long time, I took many detours hh, So I made a special note .