在矩形内包装 ListView

Question

我的问题是当我滚动 ListView 元素时，元素在矩形边框上滚动，但是我已经将 ListView 包裹在 Rectangle.How 中，我可以在不影响矩形边框的情况下使元素滚动吗？

这是结果链接 https://drive.google.com/file/d/0Bx616yTb6y_xQzNxRy1UcktrVzA/view?usp=sharing https://drive.google.com/file/d/0Bx616yTb6y_xdl9CbWt4MTJ3Smc/view?usp=sharing

代码如下

        ListModel{
        id: mod
    }
        Rectangle{
        id:listviewrec
        x: 347
        y:644
        width: 700
        height: 91
        radius: 4
        border.color:"#7CC7FF"
        border.width: 4
         visible: true

            ListView{
                id:modlistview
                width: listviewrec.width
                height: listviewrec.height
                clip: true
                boundsBehavior: Flickable.DragOverBounds
                spacing:25
                model:mod
                delegate: delegateimage
                orientation: Qt.Horizontal
                anchors.fill: listviewrec


            }

        }


    Component{
        id:delegateimage
        Item{
            id:imageitem
            width:50
            height:60
            visible:true
            Rectangle{
                id:imagerec
                x:10
                y:6
                width: 60
                height:70                    
                border.color: "#7CC7FF"
                border.width: 5
                radius: 2
                visible:true
                Image{
                    x: 3
                    y: 3
                    height : imagerec.height
                    visible: true
                    width : imagerec.width
                    anchors.fill: imagerec
                    source:fileUrl
                }
                                }
        }
    }

Answer 1

就边界而言，我认为 qml 没有内部和外部矩形的概念，（或者如果有，边界是在内部矩形中绘制的，因此子项将绘制在顶部） .

你最好的选择可能是做这样的事情：

Item {
  id:listviewrec
  x: 347
  y:644
  width: 700
  height: 91
  visible: true

  ListView{
    id:modlistview
    width: listviewrec.width
    height: listviewrec.height
    clip: true
    boundsBehavior: Flickable.DragOverBounds
    spacing:25
    model:mod
    delegate: delegateimage
    orientation: Qt.Horizontal
    anchors.fill: listviewrec
  }

  Rectangle {
    radius: 4
    border.color:"#7CC7FF"
    border.width: 4
    color: 'transparent'
    anchors.fill: parent
  }
}

它只是在 ListView 的顶部绘制一个带有您想要的边框的透明矩形

Answer 2

目前我无法运行你的代码，但似乎是删除显式宽度和高度设置的问题，因为你正在使用 anchors.fill

在矩形内包装 ListView

Wrapping ListView inside rectangle

qt

listview

qml