在 Qt QML 中插入来自不同文件的别名值时不显示图像

问题描述 投票：0回答：1

我正在为我的应用程序构建一个设置页面，为了提高效率，我分别创建了一个组件以在不同的文件中使用它。

我在设置中使用这个组件，并给它们每个不同的图标、文本和颜色。除了图标，一切正常。

我正在使用以下东西：

  1. Ubuntu
  2. Qt Creator 9.0.2
  3. Qt 6.2.4

组件.qml

import QtQuick 2.15
import QtQuick.Layouts 1.15

Item {

    property alias option_width: menu_option_btn.width
    property alias btnText: btn_text.text
    property alias btnIcon: btn_icon.source
    property alias btnColor: bg_option.color
    property alias btnIconWidth: btn_icon.sourceSize.width
    property alias btnIconHeight: btn_icon.sourceSize.height

    id: menu_option_btn
    height: 50
    width: 300

    Rectangle {
        id: bg_option
        color: "#433f3f"
        anchors.fill: parent
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent

        RowLayout {
            id: btn_layout
            anchors.fill: parent

            Rectangle {
                id: image_holder
                width: 50
                height: 200
                color: "#0000ffff"
                Layout.maximumWidth: 50
                Layout.minimumWidth: 50
                Layout.fillHeight: true

                Image {
                    id: btn_icon
                    anchors.fill: parent
                    sourceSize.height: 52
                    sourceSize.width: 52
                    anchors.leftMargin: 2
                    anchors.bottomMargin: 5
                    anchors.topMargin: 5
                    fillMode: Image.PreserveAspectFit
                    visible: true
                }
            }

            Text {
                id: btn_text
                color: "#ffffff"
                text: qsTr("Text")
                font.pixelSize: 16
                Layout.leftMargin: 5
                Layout.fillWidth: true
            }
        }
    }


}

设置.qml

import "../../widgets"
import QtQuick 2.15
import QtQuick.Layouts 6.0
import QtQuick.Controls 2.15

Item{
    id: settings_app
    width: 1024 ;height: 540

    /*
    Image {
        id: settings_bg
        anchors.fill: parent
        source: "../../wallpapers/sunset flowers.png"
        fillMode: Image.PreserveAspectCrop
    }

*/
    Component.onCompleted: {
        settingsApp.showName()
    }

    RowLayout {
        id: settings_layout
        anchors.fill: parent

        Rectangle {
            id: side_menu
            width: 200
            height: 200
            color: "#e82f2e2e"
            Layout.maximumWidth: 250
            Layout.minimumWidth: 250
            Layout.fillHeight: true

            ColumnLayout {
                id: side_menu_layout
                anchors.fill: parent
                spacing: 0

                ColumnLayout {
                    id: side_menu_layout_up
                    height: 100
                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                    spacing: 0

                    Layout.maximumHeight: 200
                    Layout.minimumHeight: 200
                    Layout.fillWidth: true

                    Image {
                        id: frame_bg
                        width: 150
                        height: 150
                        opacity: 1
                        source: "../../icons/DSC04191.JPG"
                        Layout.maximumHeight: 150
                        Layout.maximumWidth: 150
                        Layout.minimumHeight: 150
                        Layout.minimumWidth: 150
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                        sourceSize.height: 150
                        sourceSize.width: 150
                        fillMode: Image.PreserveAspectCrop
                    }

                    Text {
                        id: displayName
                        color: "#ffffff"
                        text: qsTr("Username")
                        font.pixelSize: 16
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                        Layout.fillWidth: true
                    }

                }

                ColumnLayout {
                    id: side_menu_down_layout
                    width: 100
                    height: 100
                    Layout.topMargin: 50
                    Layout.maximumWidth: 250
                    Layout.minimumWidth: 250
                    Layout.maximumHeight: 275
                    Layout.minimumHeight: 275
                    Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
                    Layout.fillHeight: true
                    Layout.fillWidth: true

                    MenuOption {
                        id: option_account
                        Layout.leftMargin: 10
                        Layout.fillWidth: true
                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                        btnText: "Account"
                        option_width: 250
                        btnColor: "#0000ffff"
                        btnIconHeight: 52
                        btnIconWidth: 52
                        btnIcon: "qrc:/Icons/icons/monitor.png"
                    }
                }
            }

        }
    }

    Connections{
        target: settingsApp

        function onChangeDisplayName(stringText){
            displayName.text = stringText
        }
    }

}

这是我的 DIR 树

.
├── apps
│   ├── Settings
│   │   └── Settings.qml
│   └── VStore
│       ├── AppView.qml
│       ├── StoreAccount.qml
│       ├── StoreSettings.qml
│       └── VStore.qml
├── icons
│   ├── account.png
│   ├── back-arrow-64.png
│   ├── battery-icon.png
│   ├── cart.png
│   ├── cart-solo.png
│   ├── close.png
│   ├── devices.png
│   ├── DSC04191.JPG
│   ├── error.png
│   ├── icons8-devices-32.png
│   ├── info.png
│   ├── menu.png
│   ├── microphone-icon.png
│   ├── monitor.png
│   ├── notification-icon.png
│   ├── notification.png
│   ├── power-icon.png
│   ├── restart.png
│   ├── search.png
│   ├── settings-icon - app.png
│   ├── settings.png
│   ├── shutdown-menu.png
│   ├── shutdown.png
│   ├── star.png
│   ├── success.png
│   ├── user-icon.png
│   └── warning.png
├── rc_resources.py
├── resources.qrc
├── screens
│   ├── AppMenu.qml
│   ├── Desktop.qml
│   └── Login.qml
├── startup.py
├── system
│   ├── config
│   │   ├── endpoints.json
│   │   ├── package_list.txt
│   │   ├── sys_config.cpp
│   │   ├── sys_config.out
│   │   ├── syslogs.log
│   │   └── system.ini
│   ├── __pycache__
│   │   ├── user_auth.cpython-310.pyc
│   │   └── utils.cpython-310.pyc
│   ├── user_auth.py
│   └── utils.py
├── VultureOS.pyproject
├── VultureOS.pyproject.user
├── wallpapers
│   ├── cubes.jpg
│   └── sunset flowers.png
└── widgets
    ├── AppCard.qml
    ├── ChangeTitle.js
    ├── MenuOption.qml
    ├── MessageBox.qml
    ├── NotificationPanel.qml
    ├── TextFieldIcon.qml
    ├── TextInputField.qml
    └── Topbar.qml

10 directories, 60 files

这里是QML文件中的内容：

<RCC>
    <qresource prefix="/Icons">
        <file>icons/back-arrow-64.png</file>
        <file>icons/battery-icon.png</file>
        <file>icons/cart.png</file>
        <file>icons/cart-solo.png</file>
        <file>icons/close.png</file>
        <file>icons/devices.png</file>
        <file>icons/error.png</file>
        <file>icons/icons8-devices-32.png</file>
        <file>icons/info.png</file>
        <file>icons/menu.png</file>
        <file>icons/microphone-icon.png</file>
        <file>icons/notification.png</file>
        <file>icons/notification-icon.png</file>
        <file>icons/power-icon.png</file>
        <file>icons/restart.png</file>
        <file>icons/search.png</file>
        <file>icons/settings.png</file>
        <file>icons/settings-icon - app.png</file>
        <file>icons/shutdown.png</file>
        <file>icons/shutdown-menu.png</file>
        <file>icons/star.png</file>
        <file>icons/success.png</file>
        <file>icons/user-icon.png</file>
        <file>icons/warning.png</file>
        <file>icons/account.png</file>
        <file>icons/monitor.png</file>
    </qresource>
    <qresource prefix="/screens">
        <file>screens/AppMenu.qml</file>
        <file>screens/Desktop.qml</file>
        <file>screens/Login.qml</file>
    </qresource>
    <qresource prefix="/Wallpapers">
        <file>wallpapers/cubes.jpg</file>
        <file>wallpapers/sunset flowers.png</file>
    </qresource>
</RCC>

请帮帮我。它将受到高度赞赏。

谢谢

qt pyqt qml qt-creator qt-quick
1个回答
0
投票

请不要将您的源文件命名为“Component.qml”。这有可能与 Qt 的组件类发生冲突，从而导致重大问题。

对于RowLayout 内部的Rectangle 组件，我建议你不要使用width 和height。相反，使用 Layout.preferredWidth 和 Layout.preferredHeight.

在试用了您的组件之后，我相信您的组件看起来与内置的 Menu 组件非常相似。这是一个演示，您可以在其中将您的组件与标准组件进行比较：

import QtQuick
import QtQuick.Controls
Page {
    Column {
        MenuOption {
            btnText: "btnText"
            btnColor: "steelblue"
            btnIconWidth: 32
            btnIconHeight: 32
            btnIcon: "sample.svg" 
        }
        MenuItem {
            width: 300
            height: 50
            text: "btnText"
            background: Rectangle { color: "steelblue" }
            icon.width: 32
            icon.height: 32
            icon.source: "sample.svg"
            palette.windowText: "white"
            icon.color: "black"
        }
    }
}

// MenuOption.qml
import QtQuick
import QtQuick.Layouts

Item {
    property alias option_width: menu_option_btn.width
    property alias btnText: btn_text.text
    property alias btnIcon: btn_icon.source
    property alias btnColor: bg_option.color
    property alias btnIconWidth: btn_icon.sourceSize.width
    property alias btnIconHeight: btn_icon.sourceSize.height
    
    id: menu_option_btn
    height: 50
    width: 300
    
    Rectangle {
        id: bg_option
        color: "#433f3f"
        anchors.fill: parent
    }
    
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        
        RowLayout {
            id: btn_layout
            anchors.fill: parent
            
            Rectangle {
                id: image_holder
                width: 50
                height: 200
                color: "#0000ffff"
                Layout.maximumWidth: 50
                Layout.minimumWidth: 50
                Layout.fillHeight: true
                
                Image {
                    id: btn_icon
                    anchors.fill: parent
                    sourceSize.height: 52
                    sourceSize.width: 52
                    anchors.leftMargin: 2
                    anchors.bottomMargin: 5
                    anchors.topMargin: 5
                    fillMode: Image.PreserveAspectFit
                    visible: true
                    cache: false
                }
            }
            
            Text {
                id: btn_text
                color: "#ffffff"
                text: qsTr("Text")
                font.pixelSize: 16
                Layout.leftMargin: 5
                Layout.fillWidth: true
            }
        }
    }
}

// sample.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
stroke="black"
fill="none"
d="M 4 4 l 1 0
M 10 4 l 1 0
M 5 5 l 1 0
M 9 5 l 1 0
M 4 6 l 7 0
M 3 7 l 2 0
M 6 7 l 3 0
M 10 7 l 2 0
M 2 8 l 11 0
M 2 9 l 1 0
M 4 9 l 7 0
M 12 9 l 1 0
M 2 10 l 1 0
M 4 10 l 1 0
M 10 10 l 1 0
M 12 10 l 1 0
M 5 11 l 2 0
M 8 11 l 2 0"
/>
</svg>

您可以在线试用！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.