基于QML2.0的View之TabView

来源：互联网发布：unix网络编程pdf下载编辑：程序博客网时间：2024/05/17 06:28

最近想把多窗口聊天放到项目中，但是对于TabView这个在qml2.0里面出现的新东西，感觉还是蛮新颖，遂研究了下

1.创建一个子qml文件，我项目中就是一个聊天窗口例如 mychat.qml

2.创建一个TabView控件，设置一些TabViewStyle

3.动态创建子tab页面

对于1，请看mychat.qml

import QtQuick 2.0import QtQuick.Layouts 1.1Rectangle {    width: parent.width    height: parent.height    id:main    ColumnLayout{        spacing: 2        Rectangle {            Layout.alignment: Qt.AlignCenter            color: "red"            Layout.preferredWidth: main.width            Layout.preferredHeight: main.height/4        }        Rectangle {            Layout.alignment: Qt.AlignRight            color: "green"            Layout.preferredWidth: main.width            Layout.preferredHeight: main.height/2            Text {                id: txt                text: qsTr("text")                anchors.fill: parent                font.pixelSize: 20            }        }        Rectangle {            Layout.alignment: Qt.AlignBottom            Layout.fillHeight: true            color: "gray"            Layout.preferredWidth: main.width            Layout.preferredHeight: main.height/4            border.width: 2            border.color: "white"            TextEdit{                id:edit                anchors.fill: parent                anchors.margins: 10            }        }    }    function setInfo(str)    {        txt.text = str;    }}

2中的main.qml代码如下：

import QtQuick 2.2import QtQuick.Controls 1.1import QtQuick.Controls.Styles 1.2ApplicationWindow {    visible: true    width: 640    height: 480    title: qsTr("Hello World")    menuBar: MenuBar {        Menu {            title: qsTr("File")            MenuItem {                text: qsTr("Exit")                onTriggered: Qt.quit();            }        }    }    TabView {        id: frame        anchors.fill: parent        anchors.margins: 20        style: TabViewStyle {            frameOverlap: 1            tab: Rectangle {                color: styleData.selected ? "steelblue" :"lightsteelblue"                border.color:  "steelblue"                implicitWidth: Math.max(text.width + 4, 80)                implicitHeight: 20                radius: 2                Text {                    id: text                    anchors.centerIn: parent                    text: styleData.title                    color: styleData.selected ? "white" : "black"                }            }            frame: Rectangle { color: "steelblue" }        }    }    Button{        id:addbtn        anchors.left: parent.left        anchors.leftMargin: 20        anchors.bottom: parent.bottom        width: 80        height: 20        text:"Add"        onClicked: {            addTabs();        }    }     function addTabs()     {         var compoment = Qt.createComponent("MyChatView.qml");         var appId = new Date().getMilliseconds();         frame.insertTab(frame.count,"竹笛基友-"+appId,compoment);         console.log("obj....."+frame.count)         frame.currentIndex = frame.count-1;         var obj = frame.getTab(frame.currentIndex);         if(typeof obj == "object")         {            obj.item.setInfo("hahaha......."+appId);         }     }}

3.动态创建qml可以参考2中代码的addTabs方法，其中的obj.item.setInfo(str)可以做到每个子控件设置其内容

基于以上可以知道如何管理tab的数目，并且控制tab页面的显示

效果图如下：

0 0