最近想把多窗口聊天放到项目中,但是对于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页面的显示
效果图如下:
