Alright, let's walk through building this Qt 5 application step by step. I'll keep things straightforward with code snippets and practical tips so you can get it up and running quickly.

1. Start a New Qt Project #

• Fire up Qt Creator and create a Qt Widgets Application. Name it something descriptive (like ColorChangerApp) and choose a save location.
• Double-check that your selected kit is using Qt 5—you can confirm this in the project setup wizard.

2. Design the UI in Qt Designer #

Open the mainwindow.ui file and add these components to your window:

• A QLineEdit (for color input). Rename it colorInput in the Object Inspector (this makes it easier to reference in code).
• A QWidget (or QFrame, QLabel—any component you want to color). Rename this colorDisplay and resize it to a noticeable size so you can see the color changes.
• Optional: Add a QPushButton labeled "Apply Color" if you want to trigger the change on click (instead of real-time as the user types).

3. Write the Color Update Logic #

Now let's connect the input to the color change. Open mainwindow.cpp and add the following code:

First, make sure you have the necessary headers (Qt Creator usually adds these, but it's good to confirm):

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QColor>
#include <QPalette>
// If you added a button or want error messages, include <QPushButton> or <QMessageBox>

Option 1: Real-Time Color Update (As User Types) #

In the MainWindow constructor, connect the textChanged signal of the input field to a custom slot:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // Link input text changes to our color update function
    connect(ui->colorInput, &QLineEdit::textChanged, this, &MainWindow::updateDisplayColor);
}

Next, declare the slot in mainwindow.h:

private slots:
    void updateDisplayColor(const QString &colorText);

Then define the slot in mainwindow.cpp:

void MainWindow::updateDisplayColor(const QString &colorText)
{
    // Parse the input text into a QColor—supports names, hex, RGB/RGBA
    QColor inputColor(colorText);

    if (inputColor.isValid()) {
        // Update the display widget's background color
        QPalette widgetPalette = ui->colorDisplay->palette();
        widgetPalette.setColor(QPalette::Window, inputColor);
        ui->colorDisplay->setPalette(widgetPalette);
        // Ensure the widget actually uses the new palette
        ui->colorDisplay->setAutoFillBackground(true);
    }
    // If the color is invalid, you can leave it as-is or add a reset/error message here
}

Option 2: Update on Button Click #

If you prefer using a button to trigger the change, adjust the connection and slot:

In the constructor:

connect(ui->applyButton, &QPushButton::clicked, this, &MainWindow::updateDisplayColor);

Declare the slot in mainwindow.h without the parameter:

private slots:
    void updateDisplayColor();

Define the slot in mainwindow.cpp:

void MainWindow::updateDisplayColor()
{
    QString colorText = ui->colorInput->text();
    QColor inputColor(colorText);

    if (inputColor.isValid()) {
        QPalette widgetPalette = ui->colorDisplay->palette();
        widgetPalette.setColor(QPalette::Window, inputColor);
        ui->colorDisplay->setPalette(widgetPalette);
        ui->colorDisplay->setAutoFillBackground(true);
    } else {
        // Optional: Show an error message for invalid colors
        // QMessageBox::warning(this, "Invalid Color", "Please enter a valid color name, hex code, or RGB value.");
    }
}

4. Test the Application #

Run the project and try these inputs to see the color change:

• Color names: red, cyan, darkorange
• Hex codes: #2E8B57, #FFD700
• RGB/RGBA values: rgb(0, 128, 128), rgba(255, 0, 0, 127) (the last number is transparency)

Quick Tips #

• If your colorDisplay widget isn't showing the color, make sure setAutoFillBackground(true) is called—some widgets don't use the palette by default.
• You can add placeholder text to the QLineEdit (like "Enter color name, hex, or RGB") using the placeholderText property in Qt Designer.

内容的提问来源于stack exchange，提问作者dhruba.jroy