QML SwipeView覆盖整个窗口

时间:2017-07-26 07:08:16

标签: qt qml qtquick2 qtquickcontrols qtquickcontrols2

如果我使用滑动视图并且编写了以下代码,我遇到了一些问题:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Swipe View")

    MainForm {
        anchors.fill:parent

        Rectangle{
            id:rightRect
            anchors.right:parent.right
            width: parent.width*0.50
            height:parent.height
            color:"yellow"
        }

        Rectangle{
            id:leftRect
            width:parent.width*0.50
            height:parent.height
            color:"lightgreen"
            border.color:"red"
            anchors.right:rightRect.left
            SwipeView{
                id:swipeView
                anchors.fill : leftRect
                //Layout.fillWidth: true
                currentIndex: 0
                interactive: false
                Page{
                    id:page1

                    Rectangle{
                        width:parent.width
                        height:parent.height
                        color:"lightgreen"
                        Button{
                            text:"move to 2"
                            onClicked: swipeView.currentIndex = 1
                        }
                    }
                }

                Page{
                    id:page2
                    Rectangle{
                        width:parent.width
                        height:parent.height
                        color:"lightblue"
                        Button{
                            text:"move to 1"
                            onClicked: swipeView.currentIndex = 0
                        }
                    }
                }
            }
        }
    }
}

以下是截图:

1)最初我已将当前索引设置为" 0" 但索引" 1"蓝色区域可见,它覆盖右侧区域(黄色矩形):

enter image description here

2)如果我点击移动到2按钮,黄色矩形将按预期显示。

enter image description here

现在,即使我点击移动到1按钮,我也需要相同的行为,即黄色矩形应该始终可见。如何实现这一目标?

1 个答案:

答案 0 :(得分:3)

clip:true添加到SwipeView的父级,这样会很好。

Rectangle{
            id:leftRect
            width:parent.width*0.50
            height:parent.height
            color:"lightgreen"
            border.color:"red"
            anchors.right:rightRect.left
            clip:true    //add this
            SwipeView{

根据Qt Documentation

  

如果启用剪裁,项目将剪辑自己的绘画,以及   它的孩子的绘画,到它的边界矩形。

默认情况下,此值为false,因此SwipeView超出矩形区域。