Question

我正在尝试修改Gallery示例。我想在Button下添加TabView。所以，我将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的大小时，它位于选项卡控件下。我该如何修改代码？

Answer 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到＆＃34;拉伸＆＃34;并适合窗户。所有其他操作都通过布局属性执行。有关一般规则，请查看this其他文章。

ColumnLayout中的QML TabView

1 个答案: