Как в widget с помощью styleSheet, задать цвет, определенной области размерами x1,x2 y1,y2

Question

Хочу в widget сделать верхнею часть размерами x1,x2 y1,y2 другого цвета. И разместить на этой области кнопку картинку часы и label. Но как сделать именно определенную область размерами x1,x2 y1,y2 не ясно. Могу только догадываться что для этого нужно использовать styleSheet.

Прошу помощи.

Answer 1

Насколько я знаю, в CSS так нельзя. Закрасить можно только весь виджет. Используйте слои (QLayout)

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    // верхний виджет красного цвета
    QWidget *widgetTop = new QWidget;
    widgetTop->setStyleSheet("QWidget {\
                             background-color: red;\
                             }");

    // нижний виджет желтого цвета
    QWidget *widgetBottom = new QWidget;
    widgetBottom->setStyleSheet("QWidget {\
                             background-color: yellow;\
                             }");


    QVBoxLayout* mainLayout = new QVBoxLayout;
    mainLayout->addWidget(widgetTop);
    mainLayout->addWidget(widgetBottom);
    mainLayout->setContentsMargins(0, 0, 0, 0); // убираем отступы по краям
    mainLayout->setSpacing(0); // убираем пространство между виджетами в слое

    QWidget* mainWidget = new QWidget;
    mainWidget->setLayout(mainLayout);

    this->setCentralWidget(mainWidget);

}

Вариант 2. Можно перегрузить paintEvent() виджета и там нарисовать.

void MainWindow::paintEvent(QPaintEvent *event)
{
    QMainWindow::paintEvent(event);

    QPainter painter(this);
    painter.setBrush(QBrush(Qt::red));
    painter.setPen(Qt::red);

    painter.drawRect(0, 0, this->rect().width(), this->rect().height() * 0.5);

    painter.setBrush(QBrush(Qt::yellow));
    painter.setPen(Qt::yellow);

    painter.drawRect(0, this->rect().height() * 0.5, this->rect().width(), this->rect().height() * 0.5);

}

Вариант 3. Создавать окна на QML.

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rectTop

        anchors.top: parent.top
        width: parent.width
        height: parent.height * 0.5
        color: "red"
    }

    Rectangle {
        id: rectBottom

        anchors.bottom: parent.bottom
        width: parent.width
        height: parent.height * 0.5
        color: "yellow"
    }
}

БЛОГ НА HUSL

Как в widget с помощью styleSheet, задать цвет, определенной области размерами x1,x2 y1,y2

Ответы (1 шт):