更改 SplitView 大小不尊重 ColumnLayout minimumWidth？答案

【问题标题】：Changing SplitView Size does not respect ColumnLayout minimumWidth?更改 SplitView 大小不尊重 ColumnLayout minimumWidth？
【发布时间】：2018-10-08 09:52:38
【问题描述】：

我有一个水平的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"
                        }
                    }
                }
            }
    }
}

【问题讨论】：

标签： qt qml

【解决方案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"
                    }
                }
            }
        }
    }
}

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

【讨论】：