Question

我有一个水平SplitView，其中左侧部分应该是我的应用程序主屏幕，右侧部分是工具选项的区域。在右侧区域，我有一个SwipeView，我希望通过TabBar进行控制。 SwipeView和TabBar应始终填充右SplitView并且最小尺寸为400.如果我将SplitView手柄向左移动，然后向右移动，超出400像素的最小尺寸，调整大小不会停止（实际上SplitView边框在400处休息）但TabBar和SplitView调整为较小的尺寸。您可以在下面找到重现行为的代码。我如何才能这样做，因此TabBar和SplitView不会超出最小尺寸？

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 {
    visible: true
    width: 600
    height: 400
    SplitView {
        id: splitView
        anchors.fill: parent

        Page {
            id: page
            Layout.fillWidth: true

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


            ColumnLayout {
                Layout.minimumWidth: 400
                Layout.preferredWidth: 400
                spacing: 0

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

                    TabButton {
                        text: qsTr("1")
                    }

                    TabButton {
                        text: qsTr("2")
                    }

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

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

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


                    Item {
                        id: tab1
                        Rectangle {
                            anchors.fill: parent // -> This command is fill all screen so I don't click TabButtons.
                            color: "blue"
                        }
                    }


                    Item {
                        id: tab2
                        Rectangle {
                            anchors.fill: parent
                            color: "lightblue"
                        }
                    }
                }
            }
    }
}

Answer 1

这是一个非常奇怪的效果......我已经使用过SplitView，但如果我没记错的话，过去它对我来说效果很好。

我和你做了一些例子，似乎Layout.fillWidth似乎引起了问题。如果可以，您可以尝试在拆分视图中的第一个项目上设置最大宽度，并将其宽度绑定到窗口宽度（减去侧栏的宽度）。这是我发现为我工作的内容：

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

        Page {
            id: page

            Layout.maximumWidth: window.width - 400
            width: window.width - 400

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


        ColumnLayout {
            width: 400
            spacing: 0
            clip: true

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

                TabButton {
                    text: qsTr("1")
                }

                TabButton {
                    text: qsTr("2")
                }

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

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

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


                Item {
                    id: tab1
                    Rectangle {
                        anchors.fill: parent // -> This command is fill all screen so I don't click TabButtons.
                        color: "blue"
                    }
                }


                Item {
                    id: tab2
                    Rectangle {
                        anchors.fill: parent
                        color: "lightblue"
                    }
                }
            }
        }
    }
}

我想这是一种解决方法，但至少你应该能够获得所需的效果。

更改SplitView大小不尊重ColumnLayout minimumWidth？

1 个答案: