如何创建具有水平可滑动方向和LeftToRight布局方向的gridView?

时间:2018-02-12 18:24:01

标签: qt gridview qml

我是Qt的新用户,我想知道是否可以创建水平flickDirection的网格视图,并将布局方向设置为LeftToRight

这是我创建的GriView代码

Window {
    visible: true
    width: 800
    height:1280
    title: qsTr("Hello World")

    GridView {
        id:grid
        width:parent.width*0.95 ; height: parent.height*0.90
        verticalLayoutDirection: Grid.TopToBottom
        layoutDirection: Qt.LeftToRight
        anchors.horizontalCenter :parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        clip: true
        model: 11
        cellWidth: width/3;
        cellHeight: height/3
        delegate:Item  {
            width: grid.cellWidth
            height: grid.cellHeight

            Rectangle {
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                width: parent.width*0.75
                height: parent.height*0.75

                Text {
                    id: name
                    text: index.toString()
                    font.pointSize: 20
                }
            }
        }
    }
}

有了这两张图片,我希望能更好地解释一下

第一张图片:

enter image description here

第二张图片:

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为没有一些分页功能,这个数字顺序很容易获得。 这是最接近的。

Window {
    visible: true
    width: 800
    height:1280
    title: qsTr("Hello World")

    GridView {
        id:grid
        width:parent.width*0.95 ; height: parent.height*0.95
        verticalLayoutDirection: Grid.TopToBottom
        layoutDirection: Qt.LeftToRight
        flow: Grid.TopToBottom
        anchors.centerIn: parent
        model: 11
        cellWidth: width/3;
        cellHeight: height/3
        flickableDirection: Flickable.HorizontalFlick

        delegate:Item  {
            width: grid.cellWidth
            height: grid.cellHeight

            Rectangle {
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                width: parent.width*0.75
                height: parent.height*0.75

                Text {
                    id: name
                    text: index.toString()
                    font.pointSize: 20
                }
            }
        }
    }
}
相关问题