使用文本 属性 指定 ToolButton 的图标
Specifying the icon of ToolButton using the text property
stack-view Qt quick application内置模板中,toolbutton定义为:
ToolButton {
id: toolButton
text: stackView.depth > 1 ? "\u25C0" : "\u2630"
font.pixelSize: Qt.application.font.pixelSize * 1.6
onClicked: {
if (stackView.depth > 1) {
stackView.pop()
} else {
drawer.open()
}
}
}
其中使用 "text" 成员将 unicode 字符“\u25C0”指定为图标。为什么使用 "text" 而不是 "icon"?有什么优势吗?
Qt 中是否有此类 unicode 的完整列表?我试过 http://www.unicode.org/charts but it's not always helpful. In the texteditor example there's another unicode character "\uE800" which marked as "icon-bold", but when I look it up in http://www.unicode.org/charts 它被标记为 "Private Use Area" 并且没有提供列表。
谢谢!
Why use "text" instead of "icon"? Is there any advantage?
优点:
您无需提供图标图片。
应用程序可以 运行 显示在任意数量的不同显示器上,每个显示器具有不同的 DPI 等。这意味着如果您使用的是位图(例如 PNG)资源而不是矢量(例如 SVG)资源,如果您的目标是高 DPI 显示器,您最终需要提供大量资产。例如,要定位设备像素比高达 4 的显示器:
pause-icon.png
pause-icon@2x.png
pause-icon@3x.png
pause-icon@4x.png
大多数应用程序(例如 Sketch)都支持以各种比例因子导出,这使这变得容易得多,但如果您的目标设备在内存方面受到限制(与嵌入式设备一样),您还需要考虑如何这些额外的资产增加了部署应用程序的大小。
通过使用文本,您可以免费平滑缩放。
自动使用当前样式的字体颜色
在 Qt 5.10 之前,您需要确保应用程序 运行 的每种样式的图标颜色都是正确的。要查看此示例,请比较图像 here。 Material 样式需要自己的资产,因为它使用的颜色,否则一些图标将是例如深色背景上的深色。
这意味着上面的资产列表的大小刚刚增加,具体取决于应用程序支持的样式数量。对于大多数应用程序,这不是什么大问题,因为它们通常带有一种预定义样式。
但是,从 Qt 5.10 开始,AbstractButton
有一个 icon.color
属性 可以用来给图标着色,它使用与字体颜色相同的颜色,这意味着您不需要提供这些额外的 colour/style-specific 资源。所以这一点对于 5.10 没有实际意义。
缺点:
当不使用特定字体时(如 stack template 中所示),图标最终看起来可能与您的想法不同。
在这种情况下,字体将以应用程序碰巧使用的任何字体呈现 运行。这使您的图标受用户环境的支配;什么是漂亮的后退箭头可能看起来与预期的不同(例如太细)。
对于 Creator,创建模板时的选项是:
- 使用 Unicode 字符而不指定字体并避免:
- 捆绑,例如FontAwesome 适合每个用户的新应用程序,但受字体渲染的影响。
- 提供大量资产的 DPI 变体,以说明可能 运行 应用程序的所有显示。
- 发货 FontAwesome。
- 提供位图图标,确保 style/colour-specific 变体可用,以防应用程序 运行 具有不同的样式。
既然 5.10 已经发布,#3 可能是更好的选择。
Is there a complete list of such unicode in Qt?
不,您需要使用您提到的网站。
In the texteditor example there's another unicode character "\uE800" which marked as "icon-bold", but when I look it up in http://www.unicode.org/charts it's marked as "Private Use Area" and no list is provided.
文本编辑器示例通过 fontello, which is a site that lets you pick specific FontAwesome characters to put into a minimal font file. The font file is here 使用 FontAwesome。
您在此示例中看到的 Unicode 字符是 FontAwesome 特定的。
stack-view Qt quick application内置模板中,toolbutton定义为:
ToolButton {
id: toolButton
text: stackView.depth > 1 ? "\u25C0" : "\u2630"
font.pixelSize: Qt.application.font.pixelSize * 1.6
onClicked: {
if (stackView.depth > 1) {
stackView.pop()
} else {
drawer.open()
}
}
}
其中使用 "text" 成员将 unicode 字符“\u25C0”指定为图标。为什么使用 "text" 而不是 "icon"?有什么优势吗?
Qt 中是否有此类 unicode 的完整列表?我试过 http://www.unicode.org/charts but it's not always helpful. In the texteditor example there's another unicode character "\uE800" which marked as "icon-bold", but when I look it up in http://www.unicode.org/charts 它被标记为 "Private Use Area" 并且没有提供列表。
谢谢!
Why use "text" instead of "icon"? Is there any advantage?
优点:
您无需提供图标图片。
应用程序可以 运行 显示在任意数量的不同显示器上,每个显示器具有不同的 DPI 等。这意味着如果您使用的是位图(例如 PNG)资源而不是矢量(例如 SVG)资源,如果您的目标是高 DPI 显示器,您最终需要提供大量资产。例如,要定位设备像素比高达 4 的显示器:
pause-icon.png
pause-icon@2x.png
pause-icon@3x.png
pause-icon@4x.png
大多数应用程序(例如 Sketch)都支持以各种比例因子导出,这使这变得容易得多,但如果您的目标设备在内存方面受到限制(与嵌入式设备一样),您还需要考虑如何这些额外的资产增加了部署应用程序的大小。
通过使用文本,您可以免费平滑缩放。
自动使用当前样式的字体颜色
在 Qt 5.10 之前,您需要确保应用程序 运行 的每种样式的图标颜色都是正确的。要查看此示例,请比较图像 here。 Material 样式需要自己的资产,因为它使用的颜色,否则一些图标将是例如深色背景上的深色。
这意味着上面的资产列表的大小刚刚增加,具体取决于应用程序支持的样式数量。对于大多数应用程序,这不是什么大问题,因为它们通常带有一种预定义样式。
但是,从 Qt 5.10 开始,
AbstractButton
有一个icon.color
属性 可以用来给图标着色,它使用与字体颜色相同的颜色,这意味着您不需要提供这些额外的 colour/style-specific 资源。所以这一点对于 5.10 没有实际意义。
缺点:
当不使用特定字体时(如 stack template 中所示),图标最终看起来可能与您的想法不同。
在这种情况下,字体将以应用程序碰巧使用的任何字体呈现 运行。这使您的图标受用户环境的支配;什么是漂亮的后退箭头可能看起来与预期的不同(例如太细)。
对于 Creator,创建模板时的选项是:
- 使用 Unicode 字符而不指定字体并避免:
- 捆绑,例如FontAwesome 适合每个用户的新应用程序,但受字体渲染的影响。
- 提供大量资产的 DPI 变体,以说明可能 运行 应用程序的所有显示。
- 发货 FontAwesome。
- 提供位图图标,确保 style/colour-specific 变体可用,以防应用程序 运行 具有不同的样式。
既然 5.10 已经发布,#3 可能是更好的选择。
Is there a complete list of such unicode in Qt?
不,您需要使用您提到的网站。
In the texteditor example there's another unicode character "\uE800" which marked as "icon-bold", but when I look it up in http://www.unicode.org/charts it's marked as "Private Use Area" and no list is provided.
文本编辑器示例通过 fontello, which is a site that lets you pick specific FontAwesome characters to put into a minimal font file. The font file is here 使用 FontAwesome。
您在此示例中看到的 Unicode 字符是 FontAwesome 特定的。