Roson讲Qt#24 Quick Controls 2之TabBar(选项卡)

1.概念

    TabBar提供了一个基于选项卡的导航模型。

外观：

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_4_color_FFFFFF_t_70_g_se_x_16

    TabBar由TabButton控件填充，可以与任何提供currentIndex -property的布局或容器控件一起使用，如StackLayout或SwipeView。
TabBar {
      id: bar
      width: parent.width
      TabButton {
          text: qsTr("Home")
      }
      TabButton {
          text: qsTr("Discover")
      }
      TabButton {
          text: qsTr("Activity")
      }
    }
    StackLayout {
      width: parent.width
      currentIndex: bar.currentIndex
      Item {
          id: homeTab
      }
      Item {
          id: discoverTab
      }
      Item {
          id: activityTab
      }
    }

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16

如上所示，TabBar通常使用一组静态的选项卡按钮填充，这些按钮被内联地定义为选项卡栏的子选项卡。还可以在运行时动态地添加、插入、移动和删除项目。可以使用itemAt()或contentChildren访问这些项。

2.导入语句

import QtQuick.Controls 2.2

3. 调整选项卡尺寸大小

    默认情况下，TabBar会自动调整其按钮的大小，把可用空间平均分配给每个按钮。可以通过为按钮设置显式宽度来覆盖默认的调整大小行为。
    下面的例子演示了如何保持每个选项卡按钮的隐式大小，而不是自动调整大小以适应选项卡栏:：
TabBar {
      width: parent.width
      TabButton {
          text: "First"
          width: implicitWidth
      }
      TabButton {
          text: "Second"
          width: implicitWidth
      }
      TabButton {
          text: "Third"
          width: implicitWidth
      }
  }

默认外观（没有设置显示宽度时的外观）：

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1

设置了显示宽度后的外观：

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 2

4.自动弹出

如果按钮的总宽度超过选项卡栏的可用宽度，它将隐藏超出宽度的部分，并在单击选项卡按钮时，未显示的部分会自动弹出一部分出来。

TabBar {
        id: bar
        width: parent.width
        Repeater {
            model: ["First", "Second", "Third", "Fourth", "Fifth"]
            TabButton {
                text: modelData
                width: Math.max(100, bar.width / 5)
            }
        }
    }

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 1

5.属性

5.1 real contentHeight

此属性保存内容高度。它用于计算选项卡栏的总隐式高度。除非显式重写，否则内容高度将根据制表符的最大隐式高度自动计算。

#

5.2 real contentWidth

此属性保存内容宽度。它用于计算选项卡栏的总隐式宽度。除非显式重写，否则内容宽度将根据制表符的总隐式宽度和制表条的间距自动计算。

5.3 enumeration position

此属性保存选项卡栏的位置。注意:如果标签栏被分配为ApplicationWindow或Page的页眉或页脚，相应的位置会自动设置。
可能的值有:

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_13_color_FFFFFF_t_70_g_se_x_16

默认值是特定于样式的。

6.自定义样式

虽然官方文档中说TabBar其中一个可视项为contenttem，但是我经过尝试后认为这个东西在自定义样式时没有什么用处。TabButton和普通的Button自定义方式一样。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
    title: "My Application"
    width: 300
    height:300
    visible: true
    //TabBar由两个可视项组成:background和contenttem。
    TabBar {
        id: control
        width: parent.width
        background: Rectangle {
            color: "#00aaff"    //选项卡背景颜色
        }
        TabButton {
            text: qsTr("Home")
            background: Rectangle {
                      implicitWidth: 100    //按钮的隐式宽度
                      implicitHeight: 40    //按钮的隐式高度
                      opacity: 1    //透明度
                      border.width: 3   //边框宽度
                      border.color: "#ffff00"   //边框颜色
                      color: "#55ff00"  //背景颜色
                      radius: 2 //四个角的弧度
                  }
        }
        TabButton {
            text: qsTr("Discover")
        }
        TabButton {
            text: qsTr("Activity")
        }
    }
}