基于Qt框架创建40x40左箭头样式Push Button技术求助

Hey there! Congrats on building a scientific calculator and wrapping up your main window expansion feature after only a week with Qt— that’s really impressive progress!

Since you already know how to style circular buttons with Qt Stylesheets, creating a left-arrow button is totally doable with similar techniques. Here are two straightforward approaches you can use:

Option 1: Pure Stylesheet Arrow (No External Images) #

This method uses CSS pseudo-elements to draw the arrow directly, so you don’t need any external image files. Just paste this into your button’s stylesheet in Qt Designer:

QPushButton {
    /* Base button styling */
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    border-radius: 4px; /* Optional: adjust for rounded corners */
    /* Fix button size to 40x40 */
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    min-height: 40px;
    position: relative;
}

QPushButton::after {
    /* Create left arrow using border trick */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    /* Adjust these values to change arrow size */
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid red; /* Match arrow color to your border */
}

/* Optional: Add pressed state styling */
QPushButton:pressed {
    background-color: #f0f0f0;
}

QPushButton:pressed::after {
    border-right-color: #cc0000; /* Darken arrow when pressed */
}

How it works: #

• The base button styles fix the size to exactly 40x40 pixels, just like your circular button.
• The ::after pseudo-element draws a triangle (our arrow) using transparent top/bottom borders and a solid right border— this is a classic CSS trick for creating shapes without images.
• You can tweak the border-top, border-bottom, and border-right values to make the arrow larger or smaller, and adjust colors to match your app’s design.

Option 2: Use an Image for the Arrow #

If you prefer using a custom arrow image (like a 40x40 PNG or SVG), you can set it as the button’s background:

QPushButton {
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    border-radius: 4px;
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    min-height: 40px;
    /* Replace with your image resource path */
    background-image: url(:/path/to/your/left_arrow.png);
    background-repeat: no-repeat;
    background-position: center;
}

Just make sure to add your image to your Qt resource file (.qrc) first so the app can access it.

Either method should give you the 40x40 left-arrow button you need. Since you’re already comfortable with Qt Stylesheets from your circular button work, you’ll probably pick this up quickly— feel free to tweak the styles to fit your app’s look!

内容的提问来源于stack exchange，提问作者BUY