关于qtquickcontrols：ColumnLayout中的QML TabView


QML TabView in ColumnLayout

我正在尝试修改Gallery示例。我想在TabView下添加Button。因此，我将TabView和Button放入ColumnLayout，这是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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会位于选项卡控件下。我应该如何修复代码？

相关讨论

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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以"拉伸"并适合窗口。所有其他操作都通过布局属性执行。有关一般规则，请参阅另一篇文章。

相关讨论