4

を継承すると奇妙な動作に気づきましたFlickable。

私は2つのファイルを持っていComp.qmlますmain.qml. Compオブジェクトの子はすべてFlickableunderの子になるという考え方ですComp。を使用して内容をデフォルトにしました

default property alias contents: flickable.children

しかし、結果は奇妙であることが判明しました。

Comp.qml

Rectangle {
    id: comp;
    anchors.fill: parent

    default property alias contents: flickable.children;  // alias a default property
    property int contentHeight: comp.height;

    Flickable {
        id: flickable;
        anchors.fill: parent;
        contentHeight: comp.contentHeight;
    }
}

main.qml

Rectangle {
    id: root;
    width: 400;
    height: 400;

    Comp {
        contentHeight: 800;


        Rectangle {         //  <-- this rectangle should be a child of Flickable
            width: 800;
            height: 800;
            border.color: "black";
            border.width: 5;
            Component.onCompleted: console.debug(parent)
        }
    }
}

フリックが効かない。

すべてを 1 つのファイルに入れようとすると、期待どおりに動作します。

main.qml

Rectangle {
    id: root;
    width: 400;
    height: 400;

    Rectangle {
        id: comp;
        anchors.fill: parent

        Flickable {
            id: flickable;
            anchors.fill: parent;
            contentHeight: 800;

            Rectangle {   //   <-- the child component
                width: 800;
                height: 800;
                border.color: "black";
                border.width: 5;
            }
        }
    }
}

何か不足していますか？に外部コンポーネントを追加するにはどうすればよいFlickableですか?

4

1 に答える 1

5

ドキュメントに記載されているように：

Flickable の子として宣言された項目は、自動的に Flickable のcontentItemの親になります。動的に作成されたアイテムは、contentItem を明示的に親にする必要があります

これは最初のケースではありません。つまり、Rectangleがそれ自体の親になりFlickable、期待される動作を公開しません。おそらく、childrenこの場合、 への追加は正しいペアレンティングをトリガーしません。簡単な修正として、アイテムがタイプに追加されるとすぐに、そのアイテムの親を再設定できますComp。

Item内部で複数の を処理するCompには、一意の子 ( a la ScrollView) を使用するだけです。ここでは、2 つの を処理するように例を変更しました (美的な目的で にRectangle追加clipしただけです)。Comp

概して：

Rectangle {
    id: root;
    width: 400;
    height: 400;

    Comp {
        contentHeight: col.height;

        Column {
            id: col
            spacing: 20
            Rectangle {
                width: 800;
                height: 800;
                border.color: "black";
                border.width: 5;
            }

            Rectangle {
                width: 800;
                height: 800;
                border.color: "black";
                border.width: 5;
            }
        }

        Component.onCompleted: console.debug(col.parent) // <-- not flickable
    }
}

Comp.qmlファイル内:

Rectangle {
    id: comp;
    anchors.fill: parent
    default property alias contents: flickable.children;
    property int contentHeight: comp.height;

    Flickable {
        z:1
        clip: true       // just my taste!
        id: flickable;
        anchors.fill: parent;
        contentHeight: comp.contentHeight;
    }

    onContentsChanged: {                             // re-parenting
        if(flickable.children[1] !== undefined)
            flickable.children[1].parent = flickable.contentItem
    }
}
于 2014-12-10T02:53:34.650 に答える