2

好的，绝对不知道该怎么做，所以我寻求帮助，我到处寻找，找不到解决方案。这是一个很长的问题，涉及以下文件：sizeCalc.js、main.qml、和MainForm.ui.qml，问题是这样的。VentPrinc.qmlmenuPrincElement.qml

文件里面MainForm.ui.qml有主窗口的结构，main.qml从那里加载和运行 UI 的逻辑，文件的内容是这样的：

MainForm.ui.qml：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
import "sizeCalc.js" 1.0 as CalcSize

Item {
    id: vent
    width: CalcSize.vW; height: CalcSize.vH
    property alias itemCont: itemCont
    property alias vent: vent
    property alias rootBarraUp: rootBarraUp

    Image {
        id: imgBgrnd
        source: "imgSources/background.jpg"
        sourceSize.height: parent.height
        fillMode: Image.PreserveAspectFit
        anchors.centerIn: parent
    }
    ColumnLayout {
        id: layoutPrinc
        anchors.fill: parent
        Rectangle {
            id: barraUpRef
            height: CalcSize.barrasPrnc; width: parent.width
            anchors.top: parent.top; color: "transparent"
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Item {
            id: rootBarraUp; z:20
            width: parent.width; anchors.top: barraUpRef.top
            anchors.horizontalCenter: barraUpRef.horizontalCenter
        }
        Item {
            id:itemContGen
            anchors.top: barraUpRef.bottom; anchors.bottom: barraDown.top
            width: vent.width; anchors.horizontalCenter: parent.horizontalCenter
            Item {
                id: itemCont
                anchors.centerIn: parent
                height: CalcSize.espTrbHei; width: CalcSize.espTrbWid
            }
        }
        Rectangle {
            id: barraDown
            height: CalcSize.barrasPrnc; width: parent.width
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            color: "white"; opacity: 0.3
        }
    }
    states: [
        State {
            name: "directorio"
            PropertyChanges {
                target: barraDown
                anchors.bottomMargin: -(height)
            }
        }
    ]
}

main.qml：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import "sizeCalc.js" 1.0 as CalcSize

ApplicationWindow {
    title: qsTr("Hello World")
    width: 480
    height: 640
    visible: true
    MainForm {
        id: mainForm; anchors.fill: parent
        function chVent(arg){
            CalcSize.funcCambVent(arg)
        }
        itemCont.children: StackView {
            id: stackviewPrinc; anchors.fill: parent
            anchors.margins: CalcSize.espTrbDirecBordUp
            initialItem: compPrinc

            Component {
                id: compPrinc
                Loader {
                    id: loaderPrinc
                    source: "VentPrinc.qml"
                    Connections {
                        target: loaderPrinc.item.dirBoton
                        onClicked: CalcSize.funcCambVent(1)
                    }
                }
            }
            Component {
                id: compDir
                Loader {
                    id: loaderDir
                    source: "Directorio.qml"
                }
            }
            Component {
                id: comp3
                Loader {
                    id: loaderComp3
                }
            }
            Component {
                id: comp4
                Loader {
                    id: loaderComp4
                }
            }

            delegate: StackViewDelegate {
                function transitionFinished(properties){
                    properties.exitItem.opacity = 1
                }
                pushTransition: StackViewTransition {
                    PropertyAnimation {
                        target: enterItem
                        property: "opacity"
                        from: 0; to: 1
                    }
                    PropertyAnimation {
                        target: exitItem
                        property: "opacity"
                        from: 1; to: 0
                    }
                }
            }
        }
        rootBarraUp.children: Loader {
            id: barraUpLoader
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            source: "menuPrincElement.qml"
            transitions: Transition {
                NumberAnimation {
                    properties: "height, width"
                    easing.type: Easing.InOutQuad
                }
            }
        }

        vent.transitions: [
            Transition {
                NumberAnimation {
                    target: barraDown; duration: 500
                    property: "anchors.bottomMargin"
                    easing.type: Easing.Linear
                }
            }
        ]
    }
}

VentPrinc.qmlStackView从inside 加载main.qml，这是文件的内容：

import QtQuick 2.4
import QtQuick.Layouts 1.1
import "sizeCalc.js" 1.0 as CalcSize

Item {
    id: contenidoGen
    anchors.top: parent.bottom; anchors.bottom: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    width: CalcSize.espTrbWid
    property alias dirBoton: mouseAreaBotonDirPrinc
    property alias turBoton: mouseAreaBotonTurPrinc
    RowLayout {
        id: layoutBotonesPrinc
        anchors.centerIn: parent
        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

        Item {
            id: botonPrincDirectorio
            height: CalcSize.tamBotonesPrinc; width: height
            Image {
                id: imgBotonPrincDirectorio
                source: "imgSources/botones/directorioBotonPrinc.png"
                sourceSize.height: parent.height
                fillMode: Image.PreserveAspectFit
                anchors.centerIn: parent
            }
            MouseArea {
                id: mouseAreaBotonDirPrinc
                anchors.fill: parent
                /*onClicked: {
                    mainForm.chVent(1)
                }*/
            }
        }
        Item {
            id: botonPrincTurista
            height: CalcSize.tamBotonesPrinc; width: height
            Image {
                id: imgBotonPrincTurista
                source: "imgSources/botones/turistaBotonPrinc.png"
                sourceSize.height: parent.height
                fillMode: Image.PreserveAspectFit
                anchors.centerIn: parent
            }
            MouseArea {
                id: mouseAreaBotonTurPrinc
                anchors.fill: parent
            }
        }
    }
}

menuPrincElement.qmlloader从from加载main.qml（此元素是 UI 的顶部栏），这是文件的内容：

import QtQuick 2.4
import QtQuick.Layouts 1.1
import "sizeCalc.js" 1.0 as CalcSize
Rectangle {
    property alias barraSup: barraUP
    id: barraUP
    height: CalcSize.barrasPrnc; width: CalcSize.vW
    color: "transparent"
    FontLoader { id: fontGent; source: "Aaargh.ttf" }
    function chTitulo(arg){
        switch(arg){
        case 0: tituloItemText.state = "stPrinc"; break;
        case 1: tituloItemText.state = "stDir"; break;
        case 2: tituloItemText.state = "stTur"; break;
        case 3: tituloItemText.state = "stConf"; break;
        }
    }

    Rectangle {
        id: backgroundMenuList; color: "white"; opacity: 0.0
        anchors.fill: parent
    }
    Item {
        id: contBarrUp
        height: CalcSize.barrasPrnc; width: parent.width
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        Rectangle {
            id: backgroundBarrUp; color: "white"; opacity: 0.3
            anchors.fill: parent
        }
        Item {
            id: menuItem
            width: CalcSize.tamBotonMenuPrinc
            height: CalcSize.tamBotonMenuPrinc
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            Image {
                id: menuItemImg
                source: "imgSources/botones/botonMenuPrinc.png"
                sourceSize.height: parent.height
                fillMode: Image.PreserveAspectFit
                anchors.centerIn: parent
            }
            MouseArea {
                id: menuItemMouseArea; anchors.fill: menuItem
                onClicked: {
                    if(barraUP.state == ""){
                        barraUP.state = "menuOn"
                    }else{
                        barraUP.state = ""
                    }
                }
            }
        }
        Text {
            id: tituloItemText; color: "white"
            //text: CalcSize.textoTitulo;
            anchors.centerIn: parent
            verticalAlignment: Text.AlignVCenter
            font { bold: true; pointSize: 16; family: fontGent.name }
            state: "stPrinc"
            states: [
                State {
                    name: "stPrinc"
                    PropertyChanges { target: tituloItemText; text: "App Turista" }
                },
                State {
                    name: "stDir"
                    PropertyChanges { target: tituloItemText; text: "Modo Directorio" }
                },
                State {
                    name: "stTur"
                    PropertyChanges { target: tituloItemText; text: "Modo Turista" }
                },
                State {
                    name: "stConf"
                    PropertyChanges { target: tituloItemText; text: "Configuración" }
                }
            ]
            Transition {
                PropertyAnimation {
                    target: tituloItemText
                    duration: 500; easing.type: Easing.InOutQuad
                }
            }
        }
    }
    Item {
        id: contOpcMenuGen; width: parent.width
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: contBarrUp.bottom; anchors.margins: 10
        anchors.bottom: barraUP.bottom; opacity: 0
        ListView {
            id: listaContMenuGen; anchors.fill: parent
            delegate: delegateElemMenuGen
            model: modelElemMenuGen
            spacing: CalcSize.tamBordeElemIntLista3
        }
    }
    Component {
        id: delegateElemMenuGen
        Rectangle {
            id: recPrinc; color: "transparent"
            anchors.margins: CalcSize.tamBordeElemIntLista2
            anchors.horizontalCenter: parent.horizontalCenter
            height: CalcSize.tamElemMenuPrincH
            width: CalcSize.espTrbWid
            Rectangle {
                id: backgroundRecPrinc; color: "white"; opacity: 0.8
                radius: CalcSize.tamBordeElemIntLista3
                anchors.fill: recPrinc
            }
            MouseArea {
                id: mouseAreaDelegateItem; anchors.fill: parent
                onClicked: {
                    CalcSize.funcCambVent(model.accion)
                    barraUP.state = ""
                }
            }
            Text {
                id: textoElem; color: "black"; text: model.titulo
                anchors.centerIn: parent
                font { bold: true; family: fontGent.name; pointSize: 12 }
            }
        }
    }
    ListModel {
        id: modelElemMenuGen
        ListElement { titulo: "Regresar al Inicio"; accion: 0 }
        ListElement { titulo: "Modo Directorio";    accion: 1 }
        ListElement { titulo: "Modo Turista";       accion: 2 }
        ListElement { titulo: "Configuración";      accion: 3 }
    }

    states: [
        State {
            name: "menuOn"
            PropertyChanges {
                target: tituloItemText; color: "#5a5a5a"
            }

            PropertyChanges {
                target: barraUP; height: CalcSize.tamElemMenuPrincExpand
            }
            PropertyChanges {
                target: contOpcMenuGen; opacity: 1
            }
            PropertyChanges {
                target: backgroundBarrUp; opacity: 0.75
            }
            PropertyChanges {
                target: backgroundMenuList; opacity: 0.7
            }
        }
    ]
    transitions: [
        Transition {
            from: ""; to: "menuOn"
            ParallelAnimation {
                NumberAnimation {
                    target: barraUP; properties: "height"
                    duration: 500; easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    target: backgroundBarrUp; property: "opacity"
                    duration: 500; easing.type: Easing.InOutQuad
                }
                ColorAnimation {
                    target: tituloItemText; duration: 500
                }
            }
            SequentialAnimation {
                NumberAnimation {
                    target: backgroundMenuList; property: "opacity"
                    duration: 250; easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    target: contOpcMenuGen; property: "opacity"
                    duration: 250; easing.type: Easing.InOutQuad
                }
            }
        },
        Transition {
            from: "menuOn"; to: ""
            SequentialAnimation {
                NumberAnimation {
                    target: contOpcMenuGen; property: "opacity"
                    duration: 250; easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    target: backgroundMenuList; property: "opacity"
                    duration: 250; easing.type: Easing.InOutQuad
                }
            }
            ParallelAnimation {
                NumberAnimation {
                    target: barraUP; properties: "height"
                    duration: 500; easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    targets: backgroundBarrUp; property: "opacity"
                    duration: 500; easing.type: Easing.InOutQuad
                }
                ColorAnimation {
                    target: tituloItemText; duration: 500
                }
            }
        }
    ]
}

最后，该sezeCalc.js文件只是一个函数和变量的集合，用于根据窗口大小计算 UI 元素的大小，这是该文件的重要内容：

function funcCambVent(arg){
    switch(arg){
    case 0:
        barraSup.state = ""
        mainForm.state = ""
        barraSup.chTitulo(0)
        stackviewPrinc.push(compPrinc)
        break
    case 1:
        barraSup.state = ""
        mainForm.state = "directorio"
        barraSup.chTitulo(1)
        stackviewPrinc.push(compDir)
        break
    case 2:
        barraSup.state = ""
        mainForm.state = ""
        barraSup.chTitulo(2)
        stackviewPrinc.push(comp3)
        break
    case 3:
        barraSup.state = ""
        mainForm.state = ""
        barraSup.chTitulo(3)
        stackviewPrinc.push(comp4)
        break
    }
}

问题是，两者VentPrinc.qml都menuPrincElement.qml需要MouseArea调用一个函数，在sizeCalc.js该函数中更改当前的“页面”，以便在保留各种 UI 元素的同时StackView转到另一个“窗口”界面，如果从menuPrincElement.qml被调用VentPrinc.qml得到错误"qrc: /sizeCalc.js: 16: ReferenceError: barraSup is not defined"我已经尽我所能来改变调用函数的方式，但只有在调用时错误仍然存​​在VentPrinc.qml，尝试连接一个信号VentPrinc.qml来调用一个函数，main.qml并且这个函数sizeCalc.js也调用这个函数从VentPrinc.qml位于我使用的受影响项目StackView中的加载程序执行连接main.qmlproperty aliassizeCalc.js...好吧，我不知道还有什么尝试总是得到相同的错误"ReferenceError: barraSup is not defined"此错误仅在信号来自时发生VentPrinc.qml，如果有人知道我做错了什么，我将非常感激，非常感谢引起您的注意，我希望您的回答。

PS：我为语法错误道歉，但这是谷歌翻译，我的英语语法不太好。

PD2：我留下了一些我尝试过的其他解决方案的注释或未使用的代码部分。

4

1 回答 1

0

我找到了解决方案，老实说，我不知道为什么这个解决方案有效，但它有效，如果有人能解释这将对遇到此类问题的人有所帮助。文件中的功能更改sizeCalc.js：

function funcCambVent(arg){
    switch(arg){
    case 0:
        barraUpLoader.item.state = ""
        mainForm.state = ""
        barraUpLoader.item.chTitulo(0)
        stackviewPrinc.push(compPrinc)
        break
    case 1:
        barraUpLoader.item.state = ""
        mainForm.state = "directorio"
        barraUpLoader.item.chTitulo(1)
        stackviewPrinc.push(compDir)
        break
    case 2:
        barraUpLoader.item.state = ""
        mainForm.state = ""
        barraUpLoader.item.chTitulo(2)
        stackviewPrinc.push(comp3)
        break
    case 3:
        barraUpLoader.item.state = ""
        mainForm.state = ""
        barraUpLoader.item.chTitulo(3)
        stackviewPrinc.push(comp4)
        break
    }
}

并且VentPrinc.qml根元素而不是ItemI被替换Rectangle并重命名文件为ventPrinc.qml，在这个文件中不再需要以任何方式连接特殊函数sizeCalc.js，直接调用函数，这个文件的最终版本：

import QtQuick 2.4
import QtQuick.Layouts 1.1
import "sizeCalc.js" 1.0 as CalcSize

Rectangle {
    id: contenidoGen; color: "transparent"
    anchors.top: parent.bottom; anchors.bottom: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    width: CalcSize.espTrbWid
    property alias dirBoton: mouseAreaBotonDirPrinc
    property alias turBoton: mouseAreaBotonTurPrinc
    RowLayout {
        id: layoutBotonesPrinc
        anchors.centerIn: parent
        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

        Item {
            id: botonPrincDirectorio
            height: CalcSize.tamBotonesPrinc; width: height
            Image {
                id: imgBotonPrincDirectorio
                source: "imgSources/botones/directorioBotonPrinc.png"
                sourceSize.height: parent.height
                fillMode: Image.PreserveAspectFit
                anchors.centerIn: parent
            }
            MouseArea {
                id: mouseAreaBotonDirPrinc
                anchors.fill: parent
                onClicked: CalcSize.funcCambVent(1)
            }
        }
        Item {
            id: botonPrincTurista
            height: CalcSize.tamBotonesPrinc; width: height
            Image {
                id: imgBotonPrincTurista
                source: "imgSources/botones/turistaBotonPrinc.png"
                sourceSize.height: parent.height
                fillMode: Image.PreserveAspectFit
                anchors.centerIn: parent
            }
            MouseArea {
                id: mouseAreaBotonTurPrinc
                anchors.fill: parent
            }
        }
    }
}

除此之外，没有必要使用property alias dirBoton: mouseAreaBotonDirPrinc.

决赛StackView是main.qml：

itemCont.children: StackView {
            id: stackviewPrinc; anchors.fill: parent
            anchors.margins: CalcSize.espTrbDirecBordUp
            initialItem: compPrinc

            Component {
                id: compPrinc
                Loader { id: loaderPrinc; source: "ventPrinc.qml" }
            }
            Component {
                id: compDir
                Loader { id: loaderDir; source: "ventDir.qml" }
            }
            Component {
                id: comp3
                Loader { id: loaderTur }
            }
            Component {
                id: comp4
                Loader { id: loaderConf }
            }
        }
于 2015-05-05T18:53:31.437 回答