如何连接两个qml文件?

时间:2017-07-04 10:29:27

标签: qml

我正在制作音乐播放器应用程序。我有一个DownRect,它有一个滑块和一个带按钮的playSection。这个按钮有一个音频。单击按钮时播放音频,我希望滑块按音频持续时间设置它的值。 (该按钮是从ButtonD.qml文件动态添加的)。我想要做的是将DownRect的滑块连接到playSection的按钮。

//DownRect.qml
Rectangle{
    id: downRectangle
    width: parent.width
    height: parent.height
    x:0
    y:750
    color: "#c62828"
    smooth: true
Slider{

        id: sliderDownRect
        x: 300
        y: 25
        width: 650
        from: 0
        //        to: play.duration
        stepSize: 100
        value: 0
        Material.accent : Material.background
        Material.foreground: Material.background
        onValueChanged:{

        }

    }
}

这是我想要连接到DownRect.qml的ButtonD.qml文件

  //ButtonD.qml
Button{
    id: buttonD
    width:900
    height: 46
    flat: true
  Audio{
        id: playing
    }
}

1 个答案:

答案 0 :(得分:0)

您确保在Audio中公开持续时间(以及ButtonD.qml的其他相关属性),例如通过添加像这样的别名:

Button {
    id: buttonD
    property alias duration: playing.duration
    ...
}

Slider的值也是如此。

Rectangle {
    id: downRectangle
    property alias duration: sliderDownRect.to
    ...
}

在实例化两者的文件中,使用Binding - 对象在两者之间创建双向绑定。那些Binding - 对象在处理动态实例化对象时非常有用。

基本上,如果您将文件包含在一个文件中,这应该是这样的:

<强> main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtMultimedia 5.5

ApplicationWindow {
    id: myWindow
    visible: true
    width: 600
    height: 600
    color: 'white'

    property Item dynamicallyCreatedItem

    Button {
        x: 102
        text: 'create'
        onClicked: {
            dynamicallyCreatedItem = Qt.createComponent('AudioButton.qml').createObject(myWindow.contentItem)
        }
    }

    DownRect {
        y: 50
        id: rect
    }


    Binding {
        target: rect
        property: 'maxValue'
        value: dynamicallyCreatedItem ? dynamicallyCreatedItem.duration : 0
        when: dynamicallyCreatedItem
    }

    Binding {
        target: rect
        property: 'value'
        value: dynamicallyCreatedItem ? dynamicallyCreatedItem.position : 0
        when: dynamicallyCreatedItem
    }
}

<强> AudioButton.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtMultimedia 5.5

Button {
    id: audioButton
    onClicked: audio.play()
    property alias duration: audio.duration
    property alias position: audio.position
    Audio {
        id: audio
        source: 'airhorn.wav'
    }
}

<强> DownRect.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

Rectangle {
    id: rect
    width: parent.width
    height: 50
    property alias value: slider.value
    property alias maxValue: slider.to
    Slider {
        id: slider
        anchors.fill: parent
    }
}