将 ListView 包装在矩形内答案

【问题标题】：Wrapping ListView inside rectangle将 ListView 包装在矩形内
【发布时间】：2015-04-21 17:35:33
【问题描述】：

我的问题是，当我滚动 ListView 元素时，元素会在矩形边框上滚动，但是我已将 ListView 包裹在 Rectangle 内。如何让元素滚动而不影响 Rectangle 边框。

这里是结果链接 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
                }
                                }
        }
    }

【问题讨论】：

标签： qt listview qml

【解决方案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 顶部绘制一个带有您想要的边框的透明矩形

【讨论】：

非常感谢它现在工作正常 :) 你能告诉我如何添加页眉和页脚，以便当用户单击页眉时，列表视图元素向左移动，单击页脚向右移动。

【解决方案2】：

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

【讨论】：