Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Done
Priority: P2: Important
Fix Version/s: 5.9.0 Alpha
Affects Version/s: 5.6.0, 5.7.0 RC
Component/s: Quick: Controls 2, Quick: Core Declarative QML
Labels:
- Reported_by_support_silver
Environment:
Qt 5.6 gcc (Offline installer) Win 7

Commits:
8eada7ae7d41a2d93142ea1a6454ab2bbb0998ed

Description

Hi there!

First let me stress that I really like the QtQuick Controls 2! The only problem I have found is this: when I have a ListView with long and many lines and attach ScrollBars to it, only the vertical one is working.

What I tried:

1. Flickable with large image and ScrollBars: works great
2. Using QtQuickControls 1 and ScrollView: works great
3. Using ScrollBar: doesn't allow to scroll horizontally
The contentWidth is set correctly as far as I can see.

Working version:

import QtQuick 2.2
import QtQuick.Controls 1.4

Rectangle {
    width: 200; height: 200

    Component {
        id: elementDelegate
        Text { text: index }
    }

    Component {
        id: rowDelegate

        Row {
            spacing: 10
            onWidthChanged: {
                var maxWidth = 0;
                for (var i = 0; i < listView.contentItem.children.length; i++) {
                    if( maxWidth < listView.contentItem.children[i].width ) {
                        maxWidth = listView.contentItem.children[i].width
                    }
                }
                listView.contentWidth = maxWidth
            }

            Text { text: "Before " + index}

            Text {
                text: "11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
            }

            Text { text: "After" }
        }
    }

    Column {
        width: parent.width
        Text { text: "Above" }

        ScrollView {
            id: scrollView
            width: parent.width
            height: 60
            ListView {
                id: listView
                onContentWidthChanged: {
                    print( "contentWidthChanged: " + contentWidth + "x" + contentHeight )
                }
                onContentHeightChanged: {
                    print( "contentHeightChanged: " + contentWidth + "x" + contentHeight )
                }

                width: parent.width
                height: 60
                clip: true
                model: 20
                delegate: rowDelegate
            }
        }
        Text { text: "Below" }
    }
}

Not working version:

import QtQuick 2.2
import Qt.labs.controls 1.0

Rectangle {
    width: 200; height: 200

    Component {
        id: elementDelegate
        Text { text: index }
    }

    Component {
        id: rowDelegate

        Row {
            spacing: 10
            onWidthChanged: {
                var maxWidth = 0;
                for (var i = 0; i < listView.contentItem.children.length; i++) {
                    if( maxWidth < listView.contentItem.children[i].width ) {
                        maxWidth = listView.contentItem.children[i].width
                    }
                }
                listView.contentWidth = maxWidth
            }

            Text { text: "Before " + index}

            Text {
                text: "11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
            }

            Text { text: "After" }
        }
    }

    Column {
        width: parent.width
        Text { text: "Above" }

        ListView {
            id: listView
            onContentWidthChanged: {
                print( "contentWidthChanged: " + contentWidth + "x" + contentHeight )
            }
            onContentHeightChanged: {
                print( "contentHeightChanged: " + contentWidth + "x" + contentHeight )
            }

            width: parent.width
            height: 60
            clip: true
            model: 20
            delegate: rowDelegate
            ScrollBar.vertical: ScrollBar { }
            ScrollBar.horizontal: ScrollBar { }
        }

        Text { text: "Below" }
    }
}