如何連接兩個qml文件？

Question

我正在製作音樂播放器應用程序。我有一個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 
    } 
} 

Answer 1

您確保持續時間（和Audio其他相關屬性）的暴露ButtonD.qml，例如通過添加別名像這樣：

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

這同樣適用於所述Slider的值。

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

在這兩個實例化的文件，可以使用Binding -objects創建一個雙向兩之間的結合。那些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 
    } 
}