QML ListView，SwipeView等 - 避免其他UI組件的重疊

我試圖避免這個令人討厭的重疊，SideView和ListView似乎幻想。這裏是演示了該問題的例子：QML ListView，SwipeView等 - 避免其他UI組件的重疊

注：看左邊的綠色矩形，當你刷卡SwipeView，也是標籤，當你向下滾動ListView

的main.cpp

#include <QGuiApplication> 
#include <QQmlApplicationEngine> 

int main(int argc, char *argv[]) 
{ 
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 
    QGuiApplication app(argc, argv); 

    QQmlApplicationEngine engine; 
    engine.load(QUrl(QLatin1String("qrc:/main.qml"))); 

    return app.exec(); 
}

main.qml

import QtQuick 2.7 
import QtQuick.Window 2.0 
import QtQuick.Controls 2.0 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtQuick.Layouts 1.2 

Window { 
    id: window 
    visible: true 
    width: 600 
    height: 480 
    title: "Demo" 
    RowLayout { 
     id: layoutTopLevel 
     anchors.fill: parent 
     spacing: 0 
     Rectangle { 
      id: sidebarView 
      Layout.preferredWidth: layoutTopLevel.width * .3 
      Layout.fillHeight: true 
      color: "#453" 
      border.width: 1 
     } 
     ColumnLayout { 
      id: sideViewLayout 
      spacing: 0 
      SwipeView { 
       id: sideView 
       currentIndex: sideViewPageIndicator.currentIndex 
       Layout.fillWidth: true 
       Layout.preferredHeight: layoutTopLevel.height * .9 
       Page { 
        id: page1 
        header: Text { 
         text: "Page 1" 
         horizontalAlignment: Text.AlignHCenter 
         font.pixelSize: 20 
        } 
       } 
       Page { 
        id: page2 
        header: Text { 
         text: "Page 2" 
         horizontalAlignment: Text.AlignHCenter 
         font.pixelSize: 20 
        } 

        TabView { 
         id: page2TabView 
         width: parent.width 
         height: parent.height 
         anchors.margins: 4 
         tabPosition: Qt.BottomEdge 

         Tab { 
          title: qsTr("Tab 1") 
         } 
         Tab { 
          title: qsTr("Tab 2") 
          ColumnLayout { 
           Text { 
            text: "Text 1" 
            Layout.alignment: Qt.AlignCenter 
           } 
           Text { 
            text: "Text 2" 
            Layout.alignment: Qt.AlignCenter 
           } 

           ListView { 
            width: parent.width 
            height: parent.height 
            model: ListModel { 
             ListElement { 
              name: "Element 1" 
             } 
             ListElement { 
              name: "Element 2" 
             } 
             ListElement { 
              name: "Element 3" 
             } 
             ListElement { 
              name: "Element 4" 
             } 
             ListElement { 
              name: "Element 5" 
             } 
             ListElement { 
              name: "Element 6" 
             } 
            } 

            delegate: Text { 
             text: name 
            } 
           } 
          } 
         } 

         style: TabViewStyle { 
          tabsAlignment: Qt.AlignHCenter 
          frameOverlap: 1 
          tab: Rectangle { 
           border.width: styleData.selected 
           implicitWidth: Math.max(text.width + 4, 80) 
           implicitHeight: 20 
           radius: 10 
           Text { 
            id: text 
            anchors.centerIn: parent 
            text: styleData.title 
            color: styleData.selected ? "white" : "black" 
           } 

           color: styleData.selected ? "#654" : "white" 
          } 
          frame: Rectangle { 
           color: "white" 
          } 
         } 
        } 
       } 
      } 
      PageIndicator { 
       id: sideViewPageIndicator 
       count: sideView.count 
       interactive: true 
       anchors.bottom: sideView.bottom 
       anchors.bottomMargin: -45 
       anchors.horizontalCenter: parent.horizontalCenter 

       delegate: Rectangle { 
        height: 30 
        width: 30 
        antialiasing: true 
        color: "#654" 
        radius: 10 

        opacity: index === sideView.currentIndex ? 0.95 : pressed ? 0.7 : 0.45 
        Behavior on opacity { 
         OpacityAnimator { 
          duration: 100 
         } 
        } 
       } 
      } 
     } 
    } 
}

來源

2016-08-01 rbaleksandar

詳細的問題是好的，但這個有點太多了。如果您可以發佈一個能夠重現問題的超簡化示例（即一個完整的，可運行的示例），而不是我們必須以某種方式放在一起的幾個片段，那將是一件好事。 – Mitch

對，對不起。我實際上找到了解決我的問題的方法。似乎有一個「剪輯」屬性，我完全錯過了。基本上，當你將它設置爲'true'（不知道爲什麼它默認沒有設置該值），它消除了重疊其他事情的這種惱人的效果。 – rbaleksandar

[This]（http://doc.qt.io/qt-5/qtquick-performance.html#clipping）是原因。 :) – Mitch

使用clip: true

其中的剪輯超出其邊界的內容。

來源

2016-08-02 07:45:40 RvdK

我意外地遇到了一個ListView的例子，同時考慮了我的另一個問題，並在那裏看到了clip屬性。在查看SideView和ListView的文檔時，我完全錯過了它。基本上，當你將其設置爲true時，視圖不再覆蓋其他組件，這正是我想要的。查看@Mitch評論爲什麼默認情況下沒有啓用。

來源

2016-08-02 07:45:24 rbaleksandar

QML ListView，SwipeView等 - 避免其他UI組件的重疊

回答

相關問題