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

谁借莪１个温暖的怀抱￠ 2022-09-11 02:29 119阅读 0赞

# 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")
            }
        }
    
    }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 3][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_4_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6fe2a16905d34bd59a8b0072b96aaa74.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/142dbe2844f84aef86d4f478a0207f4d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/b2c3aef2810d4e94846674c6ddf5f01a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/7b3cf0946b464465a901c07ab8453369.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2de8309117a84190b4ce79ce1d09109e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/36fb45d41f604310be5aff5459fa134f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2b112481e16440d1871ba6b005d59402.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/77f4918283394bd193f0e4b0bc8319c5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/9f7d7c9570394237b80b3565cdb0738f.png