收集一些Qt富文本控件支持的emoji表情。
下列是关于物体主题的表情。

使用

• Qt版本5.12.1
• 直接复制表情到Qt设计师的富文本框(QPlainTextEdit)就可以显示了。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

  🎍💝🎎🎒🎓🎏🎆🎇🎐🎑 🎃👻🎅🎄🎁🔔🔕🎋🎉🎊 🎈🔮💿📀💾📷📹🎥💻📺 📱☎️📞📟📠💽📼🔉🔈🔇 📢📣⌛️⏳⏰⌚️📻📡➿🔍 🔎🔓🔒🔏🔐🔑💡🔦🔆🔅 🔌🔋📲✉️📫📮🛀🛁🚿🚽 🔧🔩🔨💺💰💴💵💷💶💳 💸📧📥📤✉️📨📯📪📬📭 📦🚪🚬💣🔫🔪💊💉📄📃 📑📊📈📉📜📋📆📅📇📁 📂✂️📌📎✒️✏️📏📐📕📗 📘📙📓📔📒📚🔖📛🔬🔭 📰🏈🏀⚽️⚾️🎾🎱🏉🎳⛳️ 🚵🚴🏇🏂🏊🏄🎿♠️♥️ ♣️♦️💎💍🏆🎼🎹🎻👾🎮 🃏🎴🎲🎯🀄️🎬📝📝📖🎨 🎤🎧🎺🎷🎸👞👡👠💄👢 👕👔👚👗🎽👖👘👙🎀🎩 👑👒👞🌂💼👜👝👛👓🎣 ☕️🍵🍶🍼🍺🍻🍸🍹🍷🍴 🍕🍔🍟🍗🍖🍝🍛🍤🍱🍣 🍥🍙🍘🍚🍜🍲🍢🍡🥚🍞 🍩🍮🍦🍨🍧🎂🍰🍪🍫🍬 🍭🍯🍎🍏🍊🍋🍒🍇🍉🍓 🍑🍈🍌🍐🍍🍠🍆🍅🌽

关于更多

• 示例代码：
  https://github.com/aeagean/QtEmoji.git

• Qt君公众号后台回复”Qt表情“获取更多相关内容。

使用qmake编写构建步骤时，如果较为复杂或重复的行为可以使用函数来实现。

1. 语法

• 使用defineReplace函数定义func函数

  1 2 3

  defineReplace(func) { }

• func传参

  1	$$func(11, 22, 33)

• 函数返回值

1. 无论是返回什么值都需要括号。
2. 可以忽略不写。

   1	return (Hello world!)

• func捕获参数($$1到$$N)

  1 2 3 4 5 6

  defineReplace(func) { ARG1 = $$1 ARG2 = $$2 ARG3 = $$3 }

2. 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

defineReplace(func1) {
    return ($$replace(1, /, \\))
}

defineReplace(func2) {
    return ($$1)
}

result1 = $$func1($$PWD)
result2 = $$func2($$PWD)
message($$result1)
message($$result2)
---------------------------
输出:
Project MESSAGE: C:\Users\Documents\
Project MESSAGE: C:/Users/Documents/

3. 关于变量是否带$$的问题

• 在示例中有的时这样写$$1，有的直接就是1，它们区别是前者是获取变量的值，而后者是变量名字。
• $$replace()函数输入的是变量名字，而message($$result1)的$$result1是获取变量的值，因为message函数输入的是变量的值。

4. 关于更多

• Qt君公众号后台回复”qmake“获取更多相关内容。

利用求最值接口提高编程效率。

1. 求最大值

1

const T &qMax(const T &a, const T &b)

2. 求最小值

1

const T &qMin(const T &a, const T &b)

3. 求三值的中间值

1
2
3

const T &qBound(const T &v1, 
                const T &v2, 
                const T &v3)

4. 求列表容器的最值

• 利用C++标准库接口

  1 2 3 4 5 6 7 8 9

  #include<algorithm> template<class ForwardIt, class Compare> ForwardIt std::min_element(ForwardIt first, ForwardIt last, Compare comp) ForwardIt std::max_element(ForwardIt first, ForwardIt last, Compare comp)

• 示例

  1 2 3

  QStringList list{"1", "3", "2"}; QString maxValue = *std::max_element(list.begin(), list.end()); QString minValue = *std::min_element(list.begin(), list.end());

• 特别地基于迭代器的容器都可以使用该方法。

5. 数组求最值

1
2
3
4
5
6

int array[] = {1, 5, 4, 3, 2, 0};
int maxValue = *std::max_element(array, 
                                 array + sizeof(array)/sizeof(array[0]));
                                 
int minValue = *std::min_element(array, 
                                 array + sizeof(array)/sizeof(array[0]));

6. 关于更多

• Qt君公众号后台回复”Qt技巧“获取更多相关内容。

收集一些Qt富文本控件支持的emoji表情。
下列是关于自然主题的表情。

使用

• Qt版本5.12.1
• 直接复制表情到Qt设计师的富文本框(QPlainTextEdit)就可以显示了。

  1 2 3 4 5 6 7 8 9 10 11 12

  ☀️☔️☁️❄️⛄️⚡️🌀🌁🌊🐱 🐶🐭🐹🐰🐺🐸🐯🐨🐻🐷 🐽🐮🐗🐵🐒🐴🐎🐫🐑🐘 🐼🐍🐦🐤🐥🐣🐔🐧🐢🐛 🐝🐜🐞🐌🐙🐠🐟🐳🐋🐬 🐄🐏🐀🐃🐅🐇🐉🐐🐓🐕 🐖🐁🐂🐲🐡🐊🐪🐆🐈🐩 🐾💐🌸🌷🍀🌹🌻🌺🍁🍃 🍂🌿🍄🌵🌴🌲🌳🌰🌱🌼 🌾🐚🌐🌞🌝🌚🌑🌒🌓🌔 🌕🌖🌗🌘🌜🌛🌙🌍🌎🌏 🌋🌌⛅️

关于更多

• 示例代码：
  https://github.com/aeagean/QtEmoji.git

• Qt君公众号后台回复”Qt表情“获取更多相关内容。

QPair类是一个模板类，它存储一对项值(key，value)。

1.原型

1
2
3
4

QPair()
QPair(QPair<TT1, TT2> &&p)
QPair(const QPair<TT1, TT2> &p)
QPair(const T1 &value1, const T2 &value2)

2.可访问的成员变量

1
2

T1 first
T2 second

3.常用接口

• 创建一对QPair项值

  1	QPair<T1, T2> qMakePair(const T1 &value1, const T2 &value2)

• 交换两个QPair项值

  1 2	void swap(QPair<T1, T2> &other) void swap(QPair<T1, T2> &lhs, QPair<T1, T2> &rhs)

等同于：

1
2

qSwap(this->first, other.first);
qSwap(this->second, other.second);

• 赋值(=)操作

  1 2	QPair<T1, T2> &operator=(const QPair<TT1, TT2> &p) QPair<T1, T2> &operator=(QPair<TT1, TT2> &&p)

• 比较操作
  注意：先比较T1，如果相同则再比较T2。

  1 2 3 4 5 6

  bool operator!=(const QPair<T1, T2> &p1, const QPair<T1, T2> &p2) bool operator<(const QPair<T1, T2> &p1, const QPair<T1, T2> &p2) bool operator<=(const QPair<T1, T2> &p1, const QPair<T1, T2> &p2) bool operator==(const QPair<T1, T2> &p1, const QPair<T1, T2> &p2) bool operator>(const QPair<T1, T2> &p1, const QPair<T1, T2> &p2) bool operator>=(const QPair<T1, T2> &p1, const QPair<T1, T2> &p2)

• 对流的支持
  注意：需要对T1和T2实现重载>>和<<。

  1 2	QDataStream &operator>>(QDataStream &in, QPair<T1, T2> &pair) QDataStream &operator<<(QDataStream &out, const QPair<T1, T2> &pair)

4.示例

1
2
3
4
5
6
7
8
9
10
11
12

/* 初始化QPair */
QPair<QString, double> pair("PI", 3.14);
/* 创建QPair列表 */
QList<QPair<QString, double> > pairList;
pairList.append(pair);
pairList.append(qMakePair(QString("E"), 2.71));

/* 遍历输出 */
for (QPair<QString, double> pair : pairList) {
    qDebug() << "Key: " << pair.first; // 获取第一个值
    qDebug() << "Value: " << pair.second; // 获取第二个值
}

输出：

1
2
3
4

Key:  "PI"
Value:  3.14
Key:  "E"
Value:  2.71

5.其他相关

• 当QMap容器大小为1时，QMap与QPair功能基本相同；
• QPair对应标准库模板类为std::pair；
• 类似的还有std::tuple(元组)数目不限制，而QPair和std::pair都限制为2。

6.关于更多

• Qt君公众号后台回复”Qt容器“获取更多相关内容。

收集一些Qt富文本控件支持的emoji表情。

使用

• Qt版本5.12.1
• 直接复制表情到Qt设计师的富文本框(QPlainTextEdit)就可以显示了。

  1 2 3 4 5 6 7 8 9 10 11

  😄😆😊😃😏😍😘😚😳😌 😆😁😉😜😝😀😗😙😛😴 😟😦😧😮😬😕😯😑😒😅 😓😥😩😔😞😖😨😰😣😢 😭😂😲😱😫😠😡😤😪😋 😷😎😵👿😈😐😶😇👽💛 💙💜💚💔💆💇💅👦👧👩 👨👶👵👴👱👲👳👷👮👼 👸😺😸😻😽😼🙀😿😹😾 👹👺🙈🙉🙊💂💀🐾👄💋 💧👂👀👃👅💌👤👥💬💭

关于更多

• 示例代码：
  https://github.com/aeagean/QtEmoji.git

• Qt君公众号后台回复”Qt表情“获取更多相关内容。

本文介绍利用QListWidget和QSS样式表制作的一个水平滑动列表的示例。

实现

• 基于QListWidget实现

  1	QListWidget *view = new QListWidget;

• 设置为列表显示模式

  1	view->setViewMode(QListView::ListMode);

• 设置列表从左往右排列

  1	view->setFlow(QListView::LeftToRight);

• 屏蔽水平与垂直的滑动条

  1 2	view->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

• 设置为像素滚动

  1	view->setHorizontalScrollMode(QListWidget::ScrollPerPixel);

• 设置鼠标左键拖动

  1	QScroller::grabGesture(view,QScroller::LeftMouseButtonGesture);

• 装载列表数据

  1 2 3 4 5 6

  for (int i = 0; i < 10; i++) { QListWidgetItem *item = new QListWidgetItem(QString::number(i)); /* 设置文字居中 */ item->setTextAlignment(Qt::AlignCenter); view->addItem(item); }

• 设置样式

  1 2 3 4 5 6 7

  view->setStyleSheet(R"( QListWidget { outline: none; border:1px solid gray; color: black; } QListWidget::Item { width: 50px; height: 50px; } QListWidget::Item:hover { background: #4CAF50; color: white; } QListWidget::item:selected { background: #e7e7e7; color: #f44336; } QListWidget::item:selected:!active { background: lightgreen; } )");

• 最后显示

  1	view->show();

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

#include <QApplication>
#include <QListWidget>
#include <QStringListModel>
#include <QScroller>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QListWidget *view = new QListWidget;
    view->setWindowTitle(QString::fromLocal8Bit("ListWidget by Qt君"));
    view->resize(QSize(350, 50));

    /* 设置为列表显示模式 */
    view->setViewMode(QListView::ListMode);

    /* 从左往右排列 */
    view->setFlow(QListView::LeftToRight);

    /* 屏蔽水平滑动条 */
    view->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

    /* 屏蔽垂直滑动条 */
    view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

    /* 设置为像素滚动 */
    view->setHorizontalScrollMode(QListWidget::ScrollPerPixel);

    /* 设置鼠标左键拖动 */
    QScroller::grabGesture(view,QScroller::LeftMouseButtonGesture);

    /* 装载数据 */
    for (int i = 0; i < 10; i++) {
        QListWidgetItem *item = new QListWidgetItem(QString::number(i));
        /* 设置文字居中 */
        item->setTextAlignment(Qt::AlignCenter);
        view->addItem(item);
    }

    /* 设置样式 */
    view->setStyleSheet(R"(
        QListWidget { outline: none; border:1px solid gray; color: black; }
        QListWidget::Item { width: 50px; height: 50px; }
        QListWidget::Item:hover { background: #4CAF50; color: white; }
        QListWidget::item:selected { background: #e7e7e7; color: #f44336; }
        QListWidget::item:selected:!active { background: lightgreen; }
                        )");
    view->show();

    return a.exec();
}

关于更多

• Qt君公众号后台回复”控件“获取更多相关内容。

介绍一些qmake常用的操作符。

关于更多

• Qt君公众号后台回复”qmake“获取更多内容。

以表格方式列出支持那些类型。

Qml类型与Qt类型对照表

js类型与Qt类型对照表

js数组与Qt容器支持的类型

• QList<int>
• QList<qreal>
• QList<bool>
• QList<QString>，QStringList
• QVector<QString>
• std::vector<QString>
• QList<QUrl>
• QVector<QUrl>
• std::vector<QUrl>
• QVector<int>
• QVector<qreal>
• QVector<bool>
• std::vector<int>
• std::vector<qreal>
• std::vector<bool>
• 通过使用Q_DECLARE_METATYPE宏还可以自定义的QList, QVector, QQueue, QStack, QSet, QLinkedList, std::list, std::vector转换到js数组中中。

其他类型方法

• Qml类型的另外实现

• var可以支持的类型

关于更多

• Qt君公众号后台回复”Qml“获取更多内容。

不多说直接上代码。

红色悬停样式表1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Red Button */
QPushButton#RedButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #f44336;
}

QPushButton#RedButton:hover {
    background-color: #f44336;
    color: white;
}

QPushButton#RedButton:pressed {
    background-color: #06AD56;
}

红色悬停样式表2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Red Button 2 */
QPushButton#RedButton2 {
    background-color: #f44336;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#RedButton2:hover {
    background-color: white;
    border: 2px solid #f44336;
    color: black
}

QPushButton#RedButton2:pressed {
    background-color: #06AD56;
}

蓝色悬停样式表1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Blue Button */
QPushButton#BlueButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #008cba;
}

QPushButton#BlueButton:hover {
    background-color: #008cba;
    color: white;
}

QPushButton#BlueButton:pressed {
    background-color: #06AD56;
}

蓝色悬停样式表2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Blue Button 2 */
QPushButton#BlueButton2 {
    background-color: #008cba;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#BlueButton2:hover {
    background-color: white;
    border: 2px solid #008cba;
    color: black
}

QPushButton#BlueButton2:pressed {
    background-color: #06AD56;
}

绿色悬停样式表1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Green Button */
QPushButton#GreenButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}

QPushButton#GreenButton:hover {
    background-color: #4CAF50;
    color: white;
}

QPushButton#GreenButton:pressed {
    background-color: #06AD56;
}

绿色悬停样式表2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Green Button 2 */
QPushButton#GreenButton2 {
    background-color: #4CAF50;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#GreenButton2:hover {
    background-color: white;
    border: 2px solid #4CAF50;
    color: black
}

QPushButton#GreenButton2:pressed {
    background-color: #06AD56;
}

灰色悬停样式表1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Gray Button */
QPushButton#GrayButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

QPushButton#GrayButton:hover {
    background-color: #e7e7e7;
    color: white;
}

QPushButton#GrayButton:pressed {
    background-color: #06AD56;
}

灰色悬停样式表2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Gray Button 2 */
QPushButton#GrayButton2 {
    background-color: #e7e7e7;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#GrayButton2:hover {
    background-color: white;
    border: 2px solid #e7e7e7;
    color: black
}

QPushButton#GrayButton2:pressed {
    background-color: #06AD56;
}

黑色悬停样式表1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Black Button */
QPushButton#BlackButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

QPushButton#BlackButton:hover {
    background-color: #555555;
    color: white;
}

QPushButton#BlackButton:pressed {
    background-color: #06AD56;
}

黑色悬停样式表2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Black Button 2 */
QPushButton#BlackButton2 {
    background-color: #555555;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#BlackButton2:hover {
    background-color: white;
    border: 2px solid #555555;
    color: black
}

QPushButton#BlackButton2:pressed {
    background-color: #06AD56;
}

总结

修改下列属性即可快速修改该样式的显示颜色。

1
2

background-color: #555555;
border: 2px solid #555555;

关于更多

• 源码示例
  https://github.com/aeagean/QSS.git
• Qt君公众号后台回复”QSS“获取更多相关信息。