更改按钮图标 SVG 颜色
Change Button Icon SVG Color
我有几个问题。我正在尝试创建一个自定义按钮,该按钮显示一个图标供用户单击。源图像是 svg.
虽然我看到自定义按钮最常见的方法是使用 ColorOverlay,但我无法做到这一点,因为根据这个 link 因此我无法使用 ColorOverlay。我正在使用 Python 和 Pyside6 构建我的应用程序。
我也尝试使用 Button.qml 组件来实例化一个按钮,但我无法获得正确的搜索路径,因为它会从同一个按钮中查找我的源图标图像目录作为 Button.qml,我不知道如何更改其搜索目录。
理想情况下,我希望能够使用 qrc 文件加载源图像,但我还没有找到一种方法来使用加载到 QML 中的 qrc 文件中的图像,而不是Python.
这是我的代码片段,其中包含我尝试制作的自定义按钮:
Rectangle{
width: 25
height: 25
color: "#00000000"
Image{
width: 24
height: 24
source: "random.svg"
}
MouseArea{
}
}
带有 QT 按钮组件的按钮:
Button{
width: 25
height: 25
display: AbstractButton.IconOnly
icon.source: "random.svg"
}
第 1 题
Qt6.1 包含 QtGraphicalEffects。
问题 2
假设项目结构是这样
-- project
-- main.qml
-- customs
-- Button.qml
-- icons
-- random.svg
在你的main.qml import Button.qml 下的一个命名空间。让我们说 Cust(它必须以大写字母开头)。
// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import "./customs" as Cust
Cust.Button {
}
这次您 100% 确定,您的将被加载。现在在您的自定义 Button.qml 添加源,您说它是相对于它的
// Button.qml
Rectangle {
...
source: "./icons/random.svg"
}
如果自定义 Button.qml 代码本身与 main.qml 无关,例如 Button.qml 与 main.qml 不在同一文件夹中。您应该将文件夹添加到 QML2_IMPORT_PATH 环境变量以便能够导入它
例如。
/path/to/customs
您还需要在该文件夹中有一个 qmldir 文件才能用作
// qmldir
module myCustomModule
Buttom 1.0 Button.qml
-- customs
-- qmldir
-- Button.qml
然后就可以在main.qml中导入为
// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import myCustomModule as Cust
Cust.Button {
}
如果你不也给你的 Button.qml 打电话,而是叫它 MyButton.qml,你就可以做到了
// main.qml
import myCustomModule
MyButton {
}
这意味着您还必须在 qmldir 中声明 MyButton
问题 3
您可以在 QML 文件中使用 qrc 作为
source: "qrc:///random.svg"
这是严格的,而在 python 你也可以这样做:
":/random.svg"
我有几个问题。我正在尝试创建一个自定义按钮,该按钮显示一个图标供用户单击。源图像是 svg.
虽然我看到自定义按钮最常见的方法是使用 ColorOverlay,但我无法做到这一点,因为根据这个 link 因此我无法使用 ColorOverlay。我正在使用 Python 和 Pyside6 构建我的应用程序。
我也尝试使用 Button.qml 组件来实例化一个按钮,但我无法获得正确的搜索路径,因为它会从同一个按钮中查找我的源图标图像目录作为 Button.qml,我不知道如何更改其搜索目录。
理想情况下,我希望能够使用 qrc 文件加载源图像,但我还没有找到一种方法来使用加载到 QML 中的 qrc 文件中的图像,而不是Python.
这是我的代码片段,其中包含我尝试制作的自定义按钮:
Rectangle{
width: 25
height: 25
color: "#00000000"
Image{
width: 24
height: 24
source: "random.svg"
}
MouseArea{
}
}
带有 QT 按钮组件的按钮:
Button{
width: 25
height: 25
display: AbstractButton.IconOnly
icon.source: "random.svg"
}
第 1 题
Qt6.1 包含 QtGraphicalEffects。
问题 2
假设项目结构是这样
-- project
-- main.qml
-- customs
-- Button.qml
-- icons
-- random.svg
在你的main.qml import Button.qml 下的一个命名空间。让我们说 Cust(它必须以大写字母开头)。
// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import "./customs" as Cust
Cust.Button {
}
这次您 100% 确定,您的将被加载。现在在您的自定义 Button.qml 添加源,您说它是相对于它的
// Button.qml
Rectangle {
...
source: "./icons/random.svg"
}
如果自定义 Button.qml 代码本身与 main.qml 无关,例如 Button.qml 与 main.qml 不在同一文件夹中。您应该将文件夹添加到 QML2_IMPORT_PATH 环境变量以便能够导入它
例如。 /path/to/customs
您还需要在该文件夹中有一个 qmldir 文件才能用作
// qmldir
module myCustomModule
Buttom 1.0 Button.qml
-- customs
-- qmldir
-- Button.qml
然后就可以在main.qml中导入为
// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import myCustomModule as Cust
Cust.Button {
}
如果你不也给你的 Button.qml 打电话,而是叫它 MyButton.qml,你就可以做到了
// main.qml
import myCustomModule
MyButton {
}
这意味着您还必须在 qmldir 中声明 MyButton
问题 3
您可以在 QML 文件中使用 qrc 作为
source: "qrc:///random.svg"
这是严格的,而在 python 你也可以这样做:
":/random.svg"