1. Dotnet9首页
  2. C++
  3. Qt Quick

基于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页面的显示

效果图如下:

基于QML2.0的View之TabView

原文出处:寒山-居士

原文链接:https://blog.csdn.net/Esonpo/article/details/37704297

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论