Software_Architecture/.promptx/resource/domain/qt-ui-optimizer/knowledge/qt-ui-development.knowledge.md

Qt 5.15 界面开发核心知识

QSS样式表精通

基础语法结构

/* 选择器语法 */
QWidget { background-color: #f0f0f0; }
QPushButton#myButton { color: blue; }
QLabel[class="title"] { font-size: 18px; }

/* 伪状态选择器 */
QPushButton:hover { background-color: #e0e0e0; }
QPushButton:pressed { background-color: #d0d0d0; }
QPushButton:disabled { color: gray; }

现代化按钮样式

QPushButton {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
}

QPushButton:hover {
    background-color: #45a049;
}

QPushButton:pressed {
    background-color: #3d8b40;
}

输入框美化

QLineEdit {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    font-size: 14px;
    background-color: white;
}

QLineEdit:focus {
    border-color: #4CAF50;
    outline: none;
}

布局管理器精通

QVBoxLayout 垂直布局

QVBoxLayout *layout = new QVBoxLayout;
layout->addWidget(titleLabel);
layout->addSpacing(10);  // 添加间距
layout->addWidget(contentWidget);
layout->addStretch();    // 添加弹性空间
layout->setContentsMargins(20, 20, 20, 20);  // 设置边距

QGridLayout 网格布局

QGridLayout *gridLayout = new QGridLayout;
gridLayout->addWidget(label1, 0, 0);
gridLayout->addWidget(lineEdit1, 0, 1);
gridLayout->addWidget(label2, 1, 0);
gridLayout->addWidget(lineEdit2, 1, 1);
gridLayout->setColumnStretch(1, 1);  // 第二列可拉伸

QHBoxLayout 水平布局

QHBoxLayout *buttonLayout = new QHBoxLayout;
buttonLayout->addStretch();
buttonLayout->addWidget(okButton);
buttonLayout->addWidget(cancelButton);

控件美化技巧

QTableWidget 表格美化

QTableWidget {
    gridline-color: #e0e0e0;
    background-color: white;
    alternate-background-color: #f9f9f9;
}

QTableWidget::item {
    padding: 8px;
    border: none;
}

QTableWidget::item:selected {
    background-color: #4CAF50;
    color: white;
}

QHeaderView::section {
    background-color: #f5f5f5;
    padding: 8px;
    border: 1px solid #ddd;
    font-weight: bold;
}

QComboBox 下拉框美化

QComboBox {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 6px;
    min-width: 120px;
}

QComboBox::drop-down {
    border: none;
    width: 20px;
}

QComboBox::down-arrow {
    image: url(:/icons/down-arrow.png);
    width: 12px;
    height: 12px;
}

自定义控件开发

自定义按钮类

class CustomButton : public QPushButton {
    Q_OBJECT
public:
    CustomButton(const QString &text, QWidget *parent = nullptr);
    
protected:
    void paintEvent(QPaintEvent *event) override;
    void enterEvent(QEvent *event) override;
    void leaveEvent(QEvent *event) override;
    
private:
    bool m_hovered;
    QPropertyAnimation *m_animation;
};

渐变背景实现

void CustomWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    
    QLinearGradient gradient(0, 0, 0, height());
    gradient.setColorAt(0, QColor(240, 240, 240));
    gradient.setColorAt(1, QColor(220, 220, 220));
    
    painter.fillRect(rect(), gradient);
}

信号槽机制优化

Lambda表达式连接

connect(button, &QPushButton::clicked, [this]() {
    // 处理点击事件
    updateUI();
});

自定义信号定义

class CustomWidget : public QWidget {
    Q_OBJECT
signals:
    void dataChanged(const QString &data);
    void statusUpdated(int status);
    
public slots:
    void onDataReceived(const QByteArray &data);
    void onStatusChanged(bool connected);
};

性能优化技巧

减少重绘次数

// 批量更新时禁用重绘
widget->setUpdatesEnabled(false);
// 执行多个更新操作
widget->setUpdatesEnabled(true);
widget->update();  // 手动触发重绘

使用样式表缓存

// 在类初始化时设置样式表，避免重复设置
static const QString buttonStyle = 
    "QPushButton { background-color: #4CAF50; }";
button->setStyleSheet(buttonStyle);

响应式设计

自适应布局

void MainWindow::resizeEvent(QResizeEvent *event) {
    QMainWindow::resizeEvent(event);
    
    // 根据窗口大小调整布局
    if (width() < 800) {
        // 小屏幕布局
        switchToCompactLayout();
    } else {
        // 大屏幕布局
        switchToNormalLayout();
    }
}

DPI适配

// 获取系统DPI缩放比例
qreal dpiScale = qApp->devicePixelRatio();
int scaledSize = static_cast<int>(16 * dpiScale);
font.setPixelSize(scaledSize);

国际化支持

文本国际化

// 在代码中使用tr()函数
button->setText(tr("确定"));
label->setText(tr("用户名："));

// 在.pro文件中添加
TRANSLATIONS += app_zh_CN.ts app_en_US.ts

调试和测试

样式表调试

// 运行时修改样式表进行调试
#ifdef QT_DEBUG
    widget->setStyleSheet("border: 1px solid red;");  // 调试边框
#endif

性能监控

// 使用QElapsedTimer监控性能
QElapsedTimer timer;
timer.start();
// 执行耗时操作
qDebug() << "操作耗时：" << timer.elapsed() << "ms";