QML之TabView

最新推荐文章于 2025-10-17 08:00:00 发布

原创最新推荐文章于 2025-10-17 08:00:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qml

qml 专栏收录该内容

21 篇文章

订阅专栏

本文提供了一个使用TabView组件的示例代码，展示了如何创建标签页，并在一个标签页内嵌入TableView来显示数据。示例中包含了多个Tab，每个Tab都有特定的标题，并通过Slider组件调整TableView的高度。

TabView的示例

Window{
    id:window;
    visible:true;
    width:400
    height:400
    ColumnLayout{
        anchors.fill:parent;
        spacing:0

        TabView{
            Layout.fillWidth:true
            Layout.preferredHeight:s.value
            Tab{
                title:"all"
            }
            Tab{
                title:"even"
            }
            Tab{
                title:"odd"
            }
            Tab{
                title:"multiple of 3"
            }
            Tab{
                title:"prime"
            }
    TableView {
        Layout.fillWidth:true;
        Layout.fillHeight:true;
        model:
            ListModel{
                ListElement{
                    name:"A";
                    title:"1";
                }
                ListElement{
                    name:"B";
                    title:"2";
                }
                ListElement{
                    name:"C";
                    title:"3";
                }
            }
            TableViewColumn{
                role:"name"
                title:"name"
            }
            TableViewColumn{
                role:"name"
                title:"number"
            }
        }
}
    Slider {
        id:s
        minimumValue:0;
        maximunValue:50
        anchors.bottom:parent.bottom

        Text{
            text:s.value.toFixed(0);
            anchors.left:parent.right
        }
    }
}