QML ListView、SwipeView 等 - 避免与其他 UI 组件重叠

Question

我正在努力避免 SideView 和 ListView 都喜欢的烦人的重叠。这是一个演示问题的示例：

注意： 滑动 SwipeView 时查看左侧的绿色矩形，向下滚动 ListView[= 时查看选项卡17=]

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
                        }
                    }
                }
            }
        }
    }
}

Answer 1

我在调查我遇到的另一个问题时不小心遇到了一个 ListView 的例子，我在那里看到了 clip 属性。在查看 SideView 和 ListView 的文档时，我完全错过了它。基本上，当您将它设置为 true 时，视图不再覆盖其他组件，而这正是我想要的。请参阅@Mitch 关于为什么默认情况下不启用此功能的评论。

Answer 2

使用clip: true

剪辑超出其边界的内容。

QML ListView、SwipeView 等 - 避免与其他 UI 组件重叠

QML ListView, SwipeView etc. - avoid overlapping of other UI components

qt

listview

qml

overlapping

swipeview