StackView of fixed size, sub views not getting clipped



  • I want to freely position a StackView of fixed size in my QML interface. It seems that StackView assumes it will always occupy the entire window ("anchors.fill: parent") and therefore the sub view are not clipped. This is especially problematic during transitions, when the views are fully visible as they slide in and out of the designated content area. Here is an example to illustrate what I am talking about:

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    
    Item {
    	width: 800; height: 600
    	
    	ListModel {
    		id: fruitModel
    
    		ListElement {
    			title: "Apple"
    			color: "green"
    		}
    		ListElement {
    			title: "Orange"
    			color: "orange"
    		}
    		ListElement {
    			title: "Banana"
    			color: "yellow"
    		}
    	}
    
    	StackView {
    		id: aStackView
    		x: 200; y: 0
    		width: 400; height: 600
    
    		initialItem: ListView {
    			model: fruitModel
    			delegate: Item {
    				width: parent.width; height: 80
    				Rectangle {
    					anchors.fill: parent
    					color: "red"
    					Text {
    						anchors.fill: parent
    						color: "black"
    						text: title
    					}
    				}
    				MouseArea {
    					id: mouse
    					anchors.fill: parent
    					onClicked: aStackView.push({ item: Qt.resolvedUrl("FruitView.qml"), properties: { text: title, color: color }})
    				}
    			}
    		}
    	}
    }
    

    And for completeness, here is FruitView.qml:

    import QtQuick 2.2
    
    Item {
    	id: root
    	
    	property alias text: aText.text
    	property alias color: aRectangle.color
    
    	Rectangle {
    		id: aRectangle
    		anchors.fill: parent
    		color: "red"
    	}
    	
    	Text {
    		id: aText
    		anchors.fill: parent
    		font.pixelSize: 32
    	}
    }
    

    What is the best way to rectify this?



  • Ok, I found a solution: Surround your StackView with an Item and set clip to true.

    Item {
    	x: 200; y: 0
        width: 400; height: 600
        clip: true
    
    	StackView {
    		id: aStackView
    
    		initialItem: ListView {
    			model: fruitModel
    			delegate: Item {
    				width: parent.width; height: 80
    				Rectangle {
    					anchors.fill: parent
    					color: "red"
    					Text {
    						anchors.fill: parent
    						color: "black"
    						text: title
    					}
    				}
    				MouseArea {
    					id: mouse
    					anchors.fill: parent
    					onClicked: aStackView.push({ item: Qt.resolvedUrl("FruitView.qml"), properties: { text: title, color: color }})
    				}
    			}
    		}
    	}
    }

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.