0

2 つのほぼ同一の qml ファイルがあります。そのうちの 1 つをここにリストします。他の 1 つの違いはコメント行で示されています。

// MessageView.qml; diff. to ThreadView.qml is shown with comment lines
import QtQuick 2.0

Item {
    property var model
    property var selectedThread: threadsList.currentItem.myThread
    property alias spacing: threadsList.spacing
    signal activated(var selectedThread)
    id: root

    ListView {
        anchors.fill: parent

        id: threadsList
        model: root.model
        delegate: Rectangle {
            property var myThread: message // the other file contains `thread` instead of `message` here

            color: threadsList.currentItem == this ? "cyan"
                                                     : index % 2 ? "lightblue" : "lightsteelblue"
            width: parent.width
            height: ti.implicitHeight

            MessageItem { // the other file contains `ThreadItem` instead of `MessageItem` here
                id: ti
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.margins: 8
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    threadsList.currentIndex = index
                    activated(root.selectedThread)
                }
            }
        }
    }
}

これら 2 つのコンポーネントは、デリゲートの外観がわずかに異なるだけで、見た目が似ているリスト ビューを意図しています。これらの 2 つのファイルを 1 つにマージして、このように使用できるようにするにはどうすればよいですか?

MerdedView { 
    MessageItem {
        // more property customization
    }
}
MerdedView { 
    ThreadItem {
        // more property customization
    }
}
4

1 に答える 1

1

デリゲート内にはわずかな違いしかないため、共通のコードを抽出する必要があります。たとえば、MerdedViewDelegate.qml次のとおりです。

Rectangle {
    id: viewItem

    property var myThread
    //other properties: color, width, height, ...

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //use the attached property in ListView
            viewItem.ListView.view.currentIndex = index
        }
    }
}

次に、デリゲートがエイリアス プロパティに変更されたことを除いて、 とMergedView.qml同じようにを作成します。MessageView.qml

//MergedView.qml
Item {
    property alias delegate: threadsList.delegate
    //other properties

    ListView {
        anchors.fill: parent

        id: threadsList
        model: root.model 
    }
}

最後に、次のように QML を記述できます。

MergedView {
    delegate: MergedViewDelegate{ 
        myThread: message    //or something similar
        MessageItem { /* ... */ }
    }
}

MergedView {
    delegate: MergedViewDelegate{ 
        myThread: thread
        ThreadItem { /* ... */ }
    }
}
于 2014-10-25T13:33:22.190 に答える