ScrollView QML Type

スクロール可能なビュー。もっと見る...

• 継承されたメンバーを含む全メンバーのリスト

プロパティ

• contentChildren : list<Item>
• contentData : list<QtObject>
• effectiveScrollBarHeight : real (since 6.6)
• effectiveScrollBarWidth : real (since 6.6)

詳細説明

ScrollView は、ユーザー定義のコンテンツのスクロールを提供します。これは、Flickable を置き換えたり、既存のものを装飾したりするために使用できます。

最初の例では、ScrollViewの最も単純な使用方法を示します。

ScrollView {
    width: 200
    height: 200

    Label {
        text: "ABC"
        font.pixelSize: 224
    }
}

2つ目の例では、既存のFlickable 、つまりListView を使用しています。

ScrollView {
    width: 200
    height: 200

    ListView {
        model: 20
        delegate: ItemDelegate {
            text: "Item " + index

            required property int index
        }
    }
}

サイズ

Flickableと同様に、ScrollViewを使用する際にはいくつかの注意点があります：

• ScrollView 内で使用されるアイテムが 1 つだけの場合、コンテンツのサイズは含まれるアイテムの暗黙のサイズに基づいて自動的に計算されます。ただし、複数のアイテムが使用される場合（または暗黙的なサイズが提供されない場合）、contentWidth とcontentHeight プロパティには、含まれるアイテムの合計サイズを設定する必要があります。
• コンテンツのサイズが ScrollView のサイズ以下の場合、スクロールできません。
• ScrollView を垂直方向にのみスクロールさせたい場合は、contentWidth をavailableWidth にバインドします（contentHeight はその逆）。これにより、パディングやスクロールバーを考慮した上で、コンテンツがScrollView内の水平方向の利用可能なスペースをすべて埋めるようになります。

スクロールバー

水平および垂直スクロールバーには、ScrollBar.horizontal とScrollBar.vertical のプロパティを使用してアクセスし、カスタマイズすることができます。次の例では、水平スクロールバーが常にオフで、垂直スクロールバーが常にオンになるように、スクロールバーのポリシーを調整しています。

ScrollView {
    // ...
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
}

タッチ操作とマウス操作の比較

タッチ操作では、ScrollView はフリックを有効にし、スクロールバーを非対話型にします。

マウスデバイスで操作する場合、フリックは無効になり、スクロールバーはインタラクティブになります。

スクロールバーは、interactive プロパティを明示的にそれぞれtrue またはfalse に設定することで、タッチ時にインタラクティブにしたり、マウスデバイスとのインタラクション時に非インタラクティブにしたりすることができます。

ScrollView {
    // ...
    ScrollBar.horizontal.interactive: true
    ScrollBar.vertical.interactive: true
}

ScrollBar,ScrollIndicator,Qt Quick Controls の ScrollView、コンテナコントロール、およびフォーカス管理の カスタマイズも参照してください 。

プロパティ Documentation