Qtをメインに、プログラムやITに関する情報を発信

Qtの戯言

QPushButton

QPushButtonの背景色をグラデーションにする

更新日:

QLinearGradient

ウィジェットの左上を(0,0)、右下を(1,1)として、始点(x1,y1)および終点(x2,y2)を指定すると、始点から終点に向かってグラデーションとなります。
stopには、0~1の位置と、その位置における色を指定します。

サンプル

// 左上から右下(白->黒)
ui->pushButton->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1,"
    "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));
// 上から下(白->黒)
ui->pushButton_2->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,"
    "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));
// 右上から左下(白->黒)
ui->pushButton_3->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:1, y1:0, x2:0, y2:1,"
    "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));
// 右から左(白->黒)
ui->pushButton_4->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:1, y1:0, x2:0, y2:0,"
    "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));

// 右下から左上(白->黒->白)
ui->pushButton_5->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:1, y1:1, x2:0, y2:0,"
    "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));
// 下から上(白->黒->白)
ui->pushButton_6->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:0, y1:1, x2:0, y2:0,"
    "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));
// 左下から右上(白->黒->白)
ui->pushButton_7->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:0, y1:1, x2:1, y2:0,"
    "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));
// 左から右(白->黒->白)
ui->pushButton_8->setStyleSheet(QStringLiteral(
    "background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
    "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));

 

実行結果。

-QPushButton
-, ,

Copyright© Qtの戯言 , 2020 All Rights Reserved Powered by STINGER.