ColumnLayout 中的 QML TabView

Posted 2023-02-16

【中文标题】ColumnLayout 中的 QML TabView

【英文标题】：QML TabView in ColumnLayout

【发布时间】：2014-11-21 21:44:31

【问题描述】：

我正在尝试修改图库示例。我想在TabView 下添加Button。所以，我把TabView和Button放入ColumnLayout，代码如下：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Window 2.0

Window 
    visible: true
    title: "settings"
    width: 600
    height: 400
ColumnLayout
    anchors.fill: parent
    TabView 
        anchors.right: parent.right
        anchors.left: parent.left
        Tab 
            title: "Controls"
            Controls  
        
        Tab 
            title: "Itemviews"
            Controls  
        
        Tab 
            title: "Styles"
            Controls   
        
        Tab 
            title: "Layouts"
            Controls   
        
    

    RowLayout
        anchors.right: parent.right
        anchors.left: parent.left
        Button
            text: "ok"
        
    

但是，当我调整窗口大小时，okButton 位于选项卡控件下。我应该如何修复代码？

【问题讨论】：

您将 Button 放在 TabView 下，如我所见，那么您的问题是什么？我不能仅仅因为 udefined Controls 而测试你的例子，但可能你应该使用 Layout.fillHeight 和 Layout.fillWidth 来代替 TabView？但不要忘记设置 RowLayout 的高度

@folibis Controls.qml 在 Qt Quick Controls - Gallery 示例中。只需打开 Qt creator -> Welcome 并输入“Gallery”。当我调整窗口大小时okButton 不在TabView 之下，而是在TabView 之上

【参考方案1】：

定义Layout 后，添加的每个元素都可以访问与布局本身相关的特定属性。这些属性对于将元素定位在布局覆盖的空间内很有用。面对here 的描述。

因此，您应该像这样修改ColumnLayout：

ColumnLayout 
    anchors.fill: parent                   
    TabView 
        id:frame
        enabled: enabledCheck.checked
        tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
        Layout.fillHeight: true            // fill the available space vertically 
        Layout.fillWidth: true             // fill the available space horizontally
        Layout.row: 0                      // item in the first row of the column
        anchors.margins: Qt.platform.os === "osx" ? 12 : 2
        Tab 
            id: controlPage
            title: "Controls"
            Controls  
        
        Tab 
            title: "Itemviews"
            ModelView  
        
        Tab 
            title: "Styles"
            Styles  anchors.fill: parent 
        
        Tab 
            title: "Layouts"
            Layouts  anchors.fill:parent 
        
    

    Button 
        text: "ok"
        Layout.row: 1                       // item in the second row of the column
        Layout.alignment: Qt.AlignCenter    // simple center the button in its spatial slot
    

按钮不需要RowLayout。它应该放在您定义的ColumnLayout 的第二行，因为它是一个简单的组件。如果 多个 元素位于同一行，子布局可能很有用，例如两个或更多按钮。

另请注意，锚定仅用于ColumnLayout 以“拉伸”并适合窗口。所有其他操作都通过布局属性执行。有关一般规则，请查看this 其他文章。

【讨论】：

当我调整窗口大小时，okButton 位于选项卡控件的上方

如果您照原样采用图库示例，并按照我所做的那样更改代码，则不应该这样做。如果您删除了可能的最小宽度：这取决于选项卡组件的设置。那是一个完全不同的问题。事实上Controls 有Layout.minimumWidth: implicitWidth...你不能只调整Window 的大小而不考虑组件的布局。

我增加了 minimumWidth 和 Height。现在它工作正常

就是这样。 :) 我会推荐阅读我提供的链接。他们会澄清您可能有的任何疑问。