QML 导航控件进阶：TabBar与TabButton的纵向布局与动态交互

1. 突破横向限制：TabBar纵向布局实战

很多开发者第一次接触QML的TabBar时，都会遇到一个共同的困惑：为什么这个导航控件默认只能横向排列？在实际项目中，特别是桌面端应用和仪表盘界面，侧边栏导航的需求非常普遍。我去年开发一个工业控制软件时就遇到过这个痛点，经过反复实验终于找到了完美的解决方案。

要让TabBar纵向排列，关键在于理解布局容器的嵌套逻辑。这里分享一个我验证过的可靠方案：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    width: 800
    height: 600
    visible: true

    RowLayout {
        anchors.fill: parent
        spacing: 0

        // 纵向TabBar
        TabBar {
            id: sideBar
            Layout.fillHeight: true
            Layout.preferredWidth: 120
            orientation: Qt.Vertical  // 关键属性
            
            Repeater {
                model: ["仪表盘", "设备管理", "报警记录", "系统设置"]
                TabButton {
                    width: parent.width
                    height: 60
                    text: modelData
                    font.pixelSize: 14
                }
            }
        }

        // 内容区域
        StackLayout {