基于QML2.0的View之TabView

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

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

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

3.动态创建子tab页面

对于1，请看mychat.qml

import QtQuick 2.0
import QtQuick.Layouts 1.1
 
Rectangle {
    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.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.2
 
ApplicationWindow {
    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页面的显示

效果图如下：