QML —— TabView示例（附完整源码）

示例效果

?

TabView介绍

?????TabView为应用程序提供了基于选项卡的导航模型。

?

源码

?????TabTest.qml

import QtQuick 2.0

import QtQuick.Layouts 1.12

Item
{
    GridLayout
    {
        anchors.centerIn: parent
        columns: 2
        rowSpacing: 20
        columnSpacing: 20

        Text
        {
            color:"white"
            text: qsTr("输入数量:")
            font.family: "微软雅黑"
            font.pixelSize: 18
        }

        Rectangle
        {
            width: 150
            height: 25
            border.color: "white"
            clip: true
            TextInput
            {
                id: textID
                anchors.fill: parent
                anchors.centerIn: parent
                font.family: "微软雅黑"
                font.pixelSize: 14
                selectByMouse: true
                verticalAlignment:TextInput.AlignVCenter
                horizontalAlignment: TextInput.AlignLeft
            }
        }

        Text
        {
            color:"white"
            text: qsTr("输入长度:")
            font.family: "微软雅黑"
            font.pixelSize: 18
        }

        Rectangle
        {
            width: 150
            height: 25
            border.color: "white"
            clip: true
            TextInput
            {
                id: lengthID
                anchors.fill: parent
                anchors.centerIn: parent
                font.family: "微软雅黑"
                font.pixelSize: 14
                selectByMouse: true
                verticalAlignment:TextInput.AlignVCenter
                horizontalAlignment: TextInput.AlignLeft
            }
        }
    }
}

?
?????main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // 基于选项卡的导航模型
    TabView
    {
        anchors.fill: parent

        style: TabViewStyle
        {
            frameOverlap: 1                 // 此属性保留各个选项卡按钮和框架之间的重叠量
            tabsAlignment: Qt.AlignHCenter  // 选项卡按钮的水平对齐方式(默认左侧)
            tab: Rectangle
            {
                color: styleData.selected ? "gray" :"white"
                border.color: "orange"
                implicitWidth: Math.max(text.width + 4, 100)
                implicitHeight: 40
                radius: 5
                Text
                {
                    id: text
                    anchors.centerIn: parent
                    text: styleData.title
                    color: styleData.selected ? "white" : "black"
                }
            }
            frame: Rectangle { color: "steelblue" }
        }

        // 选项卡
        Tab
        {
            title: qsTr("周一")
            Rectangle{color: "green"}
        }

        Tab
        {
            title: qsTr("周二")
            TabTest{id: tabqmlID}		// 加载TabTest.qml,作为该Tab页内容
        }

        Tab
        {
            title: qsTr("周三")
            Rectangle{color: "pink"}
        }
    }

}

?

关注

笔者 - jxd

?