Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QFrame subclass with round corners and a custom titlebar
Qt 6.11 is out! See what's new in the release blog

QFrame subclass with round corners and a custom titlebar

Scheduled Pinned Locked Moved Unsolved General and Desktop
3 Posts 2 Posters 186 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    anoban
    wrote last edited by
    #1

    Hi all!

    I'm trying to implement a colorpicker application using Qt6. I have a custom window class (which will be the main application window) which is a subclass of QFrame and I want it to have round corners. Github link
    Link to the whole code base is here

    1. Setting border-radius in stylesheets alone did not work. I get round corners but there's a rectangular corner underneath the round corner, which defeats the purpose. Screenshot From 2026-03-26 21-14-12.png

    2. Overriding the paintEvent method gave me what I wanted (I had to use setAttribute(Qt::WA_TranslucentBackground) to avoid getting white rectangular corners underneath the rounded corners here) .

    Screenshot From 2026-03-26 21-43-01.png

    Even though this works, II'm worried about the performance of my implementation. Here's the method implementation.

    virtual inline void paintEvent(QPaintEvent* _paint_event) noexcept override {
                QPainter _painter { this };
                _painter.setRenderHint(QPainter::RenderHint::Antialiasing);
                _painter.setBrush(
                    QBrush {
                       QColor {
                               _slider_values[configs::rgb_offsets::RED], _slider_values[configs::rgb_offsets::GREEN], _slider_values[configs::rgb_offsets::BLUE] }
                }
                );
                _painter.setPen(Qt::GlobalColor::transparent); // thin borders
    
                QRect _current_rect { rect() };
                _painter.drawRoundedRect(_current_rect, 10, 0);
                QWidget::paintEvent(_paint_event);
                update(); // without this only the edges of the sliders got painted while the background wasn't responsive???
            }
    

    Without the call to update() at the end of paintEvent(), this is what I got.
    Screenshot From 2026-03-26 21-20-11.png

    Prior to overriding the paintEvent method, I used the setPalette method to update the background with the current slider values.

            [[maybe_unused]] inline void __attribute__((__always_inline__)) __update_bg() noexcept {
                // update the colour palette with the current state of the sliders
                _palette.setColor(
                    QPalette::Window,
                    QColor { _slider_values[configs::rgb_offsets::RED], _slider_values[configs::rgb_offsets::GREEN], _slider_values[configs::rgb_offsets::BLUE] }
                );
                setPalette(_palette); // set the updated palette, triggering a window redraw
            }
    

    My questions are;

    1. Am I doing this in the most efficient way? (I'm not looking for an idiomatic way, I'm more interested performance).
    2. What is the best way to implement the paintEvent method, granted that I only use it for round corners and updating the background colour based on the slider positions?
    3. What's the best way to introduce a custom title bar at the top of this window so it looks like the following image. (i.e. a custom title bar with custom icons)
      colorpicker.png

    Thank you in advance. I'd appreciate any help regarding this.

    System info:
    Qt version 6.10.2 on Fedora Linux 43 (Workstation Edition)

    1 Reply Last reply
    0
    • hskoglundH Offline
      hskoglundH Offline
      hskoglund
      wrote last edited by
      #2

      Hi, some time ago I did a similar Qt app called ColorSliders https://gitlab.com/tungware/app/-/tree/main/ColorSliders, in that one I overlay one slider with another.
      Screenshot:

      Screenshot from 2026-03-26 12-04-32.png

      A 1 Reply Last reply
      1
      • hskoglundH hskoglund

        Hi, some time ago I did a similar Qt app called ColorSliders https://gitlab.com/tungware/app/-/tree/main/ColorSliders, in that one I overlay one slider with another.
        Screenshot:

        Screenshot from 2026-03-26 12-04-32.png

        A Offline
        A Offline
        anoban
        wrote last edited by
        #3

        @hskoglund hey, thanks for the response. Not sure how that helps my situation though. I want round corners for the main window, not the sliders. I have already achieved that just through stylesheets. Didn't have to overlay two sliders.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved