Пример SplitView: взаимодействия TabBar перестают работать, если появилась оболочка Item - PullRequest
Новая
       26

Пример SplitView: взаимодействия TabBar перестают работать, если появилась оболочка Item

0 голосов
/ 18 января 2019

В процессе изучения QML я играл с некоторыми примерами SplitView с целью использования его в приложении.

Я начал с примера, который нашел в ответе SO (см. здесь ), который я воспроизвел ниже.

Я ввел тривиальный уровень обтекания элемента ColumnLayout, добавив Item в иерархию. На первый взгляд это никак не сказывается, но при ближайшем рассмотрении взаимодействие TabBar с SwipeView было нарушено. Цвет страницы должен изменяться при выборе кнопок вкладок или при перелистывании области SwipeView. 

import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
import QtQuick.Controls 2.2
import QtQuick.Controls 1.4

Window {
    id: window
    visible: true
    width: 600
    height: 400
    SplitView {
        id: splitView
        anchors.fill: parent

        Rectangle {
            Layout.maximumWidth: window.width - 400
            width: window.width - 400
            Page {
                id: page
                width: parent.width

                Text {
                    id: text1
                    text: qsTr("Page")
                    anchors.right: parent.right
                    anchors.rightMargin: 170
                    font.pixelSize: 12
                }
            }
        }

        // Item { // UNCOMMENT TO SEE ISSUE
            ColumnLayout {
                id: col
                clip: true
                spacing: 0
                width: 400

                TabBar {
                    id: tabbar
                    Layout.fillWidth: true
                    currentIndex: view.currentIndex

                    TabButton {
                        text: qsTr("1")
                    }

                    TabButton {
                        text: qsTr("2")
                    }

                    TabButton {
                        text: qsTr("3")
                    }
                }

                SwipeView {
                    id: view
                    currentIndex: tabbar.currentIndex
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    Item {
                        id: tab0
                        Rectangle {
                            color: "red"
                        }
                    }


                    Item {
                        id: tab1
                        Rectangle {
                            anchors.fill: parent
                            color: "blue"
                        }
                    }


                    Item {
                        id: tab2
                        Rectangle {
                            anchors.fill: parent
                            color: "lightblue"
                        }
                    }
                }
            }
        //} // UNCOMMENT TO SEE ISSUE
    }
}

Сейчас я даже не уверен, чего я пытался достичь с помощью этого изменения, но мне все равно хотелось бы понять, где оно идет не так, чтобы улучшить мою «ментальную модель» работы QML.

...