ScrollView QML Type

스크롤 가능한 보기. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

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

상세 설명

스크롤뷰는 사용자 정의 콘텐츠에 스크롤 기능을 제공합니다. Flickable 를 대체하거나 기존 콘텐츠를 꾸미는 데 사용할 수 있습니다.

첫 번째 예시는 ScrollView의 가장 간단한 사용법을 보여줍니다.

ScrollView {
    width: 200
    height: 200

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

두 번째 예제는 기존 Flickable, 즉 ListView 을 사용하는 예제입니다.

ScrollView {
    width: 200
    height: 200

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

            required property int index
        }
    }
}

크기 조정

플릭커블과 마찬가지로 스크롤뷰를 사용할 때 몇 가지 유의해야 할 사항이 있습니다:

• 스크롤뷰 내에서 하나의 항목만 사용되는 경우 콘텐츠 크기는 포함된 항목의 암시적 크기에 따라 자동으로 계산됩니다. 그러나 두 개 이상의 항목이 사용되는 경우(또는 암시적 크기가 제공되지 않는 경우) contentWidth 및 contentHeight 속성을 포함된 항목의 합산된 크기로 설정해야 합니다.
• 콘텐츠 크기가 스크롤뷰 크기보다 작거나 같으면 스크롤할 수 없습니다.
• ScrollView가 세로로만 스크롤되도록 하려면 contentWidth 을 availableWidth 에 바인딩하면 됩니다(콘텐츠 높이의 경우 그 반대도 마찬가지). 이렇게 하면 패딩이나 스크롤 막대를 고려하여 콘텐츠가 스크롤뷰 내부의 사용 가능한 모든 공간을 가로로 채울 수 있습니다.

스크롤 막대

가로 및 세로 스크롤 막대는 ScrollBar.horizontal 및 ScrollBar.vertical 첨부 프로퍼티를 사용하여 액세스하고 사용자 지정할 수 있습니다. 다음 예제에서는 가로 스크롤 막대는 항상 꺼져 있고 세로 스크롤 막대는 항상 켜져 있도록 스크롤 막대 정책을 조정합니다.

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

터치 대 마우스 상호 작용

터치 시 스크롤뷰는 플릭을 활성화하고 스크롤 막대를 비대화형으로 만듭니다.

마우스 장치와 상호 작용할 때는 플릭이 비활성화되고 스크롤 막대가 대화형입니다.

interactive 속성을 각각 true 또는 false 로 명시적으로 설정하여 터치 시 스크롤 막대를 대화형으로 만들거나 마우스 장치와 상호 작용할 때 비대화형으로 만들 수 있습니다.

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

ScrollBar, ScrollIndicator, 스크롤뷰, 컨테이너 컨트롤 및 포커스 관리 사용자 지정하기( Qt Quick Controls )를참조하세요 .

속성 문서