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

# Qt 5.15 界面开发核心知识

## QSS样式表精通

### 基础语法结构
```css
/* 选择器语法 */
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; }
```

### 现代化按钮样式
```css
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;
}
```

### 输入框美化
```css
QLineEdit {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    font-size: 14px;
    background-color: white;
}

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

## 布局管理器精通

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

### QGridLayout 网格布局
```cpp
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 水平布局
```cpp
QHBoxLayout *buttonLayout = new QHBoxLayout;
buttonLayout->addStretch();
buttonLayout->addWidget(okButton);
buttonLayout->addWidget(cancelButton);
```

## 控件美化技巧

### QTableWidget 表格美化
```css
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 下拉框美化
```css
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;
}
```

## 自定义控件开发

### 自定义按钮类
```cpp
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;
};
```

### 渐变背景实现
```cpp
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表达式连接
```cpp
connect(button, &QPushButton::clicked, [this]() {
    // 处理点击事件
    updateUI();
});
```

### 自定义信号定义
```cpp
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);
};
```

## 性能优化技巧

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

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

## 响应式设计

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

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

## 国际化支持

### 文本国际化
```cpp
// 在代码中使用tr()函数
button->setText(tr("确定"));
label->setText(tr("用户名："));

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

## 调试和测试

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

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