最近想把多窗口聊天放到項目中,但是對於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頁面的顯示
效果圖如下: