Appearance

大纲

C++ / Qt5 Cookbook - 1. 外观和自定义 ​

1.1 IDE 界面说明 ​

1   : 菜单栏
2   : 插件
3   : 模式选择
4   : 快速构建
5   : 编辑器
6   : 编辑器工具栏
7   : 对象选择器
8   : 属性编辑器
9   : 动作编辑 / 信号编辑
10  : 输出面板
      - 解决方案
      - 搜索结果
      - 应用输出

1.2 样式定义 ​

样式

/*整体样式*/
* {
    border:1px solid #ccc;
}
/*指定button样式*/
QPushButton{
    border:1px solid red;
}
/*单个button 样式*/
QPushButton#submit{
    border:1px solid blue;
}

1.3 布局和样式 ​

layout 不能赋值样式, 将其转换为 QWidget 可以设置样式

/* 主要样式 */
#centralWidget { 
    background: rgba(32, 80, 96, 100); 
}
/* 渐变色 */
#topPanel2 { 
    background-color:qlineargradient(spread:reflect, x1:0.5, y1:0, x2:0, y2:0,  stop:0 rgba(91, 204, 233, 100), stop:1 rgba(32,80,96,100));
}
/* 鼠标滑过颜色 */
QPushButton{
    color: white;
    background-color: #27a9e3;
    border-
    border-radius: 3px;
}
QPushButton:hover { 
    background-color: #66c011; 
}

样式中使用资源

使用 .qrc 文件来管理资源文件

  • 添加前缀
  • 添加文件

最好能够在文件目录好好的组织图片资源, 这样实现位置和 qrc 定义的统一性

予记:

1.4 自定义属性和子控制 ​

伪类

QPushButton 
    : hover
    : pressed
    : active
    : disabled
    : enabled
    : open
    : flat

自定义属性

样式定义, 注意这里的 QPushButton 和 属性之间不得存在空格

// 不得存在空格
QPushButton[pagematches=true] {
    background:red
}

代码中对属性的定义

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 这里设置自定义按钮的属性
    // pushButton 是 UI 中 pushButton 的 ID
    ui->pushButton->setProperty("pagematches", true);
}

指定的类

QSpinBox::down-button{
    
}

1.5 使用 QML 编写样式 ​

QML 是 Qt Meta Language/Qt Model Language 是基于 js 的用户标记语言.

1.5.1 快速应用 ​

创建一个窗口并且调用 MainForm UI

import QtQuick 2.6
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MainForm {
        anchors.fill: parent
        mouseArea.onClicked: {
            console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
        }
    }
}

main.cpp

...
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
...

1.5.2 编辑界面 ​

1    : 导航区域
2    : 库 (可以自定义自己的QML组件)
3    : 资源
4    : 导入, 导入不同的QML模块, 比如蓝牙, webkit, 定位.
5    : 状态面板
6    : 属性面板
7    : 画布

1.5.3 暴露QML对象给C++ (需要复习) ​

这个地方需要 c++ 类的知识, 我现在不会, 需要复习/学习过之后才能看懂, 现在看不懂, 出错也不能够调整, 😌