Roson讲Qt#27 Quick Controls 2之PageIndicator(活动页面指示器)

Love The Way You Lie 2022-09-11 11:12 109阅读 0赞

# 1.概念 #

PageIndicator用于指示包含多个页面的容器中当前活动的页面。PageIndicator由呈现页面的委托项组成。

外观：

![20210916094143277.png][]

# 2.用法示例 #

Column {
      StackLayout {
          id: stackLayout
    
          Page {
              // ...
          }
          Page {
              // ...
          }
          Page {
              // ...
          }
      }
    
      PageIndicator {
          currentIndex: stackLayout.currentIndex
          count: stackLayout.count
      }
    }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16][]

#    3.属性 #

## 3.1 count : int ##

此属性保存页面数。

##     3.2 currentIndex : int ##

此属性保存当前页的索引。

## 3.3 delegate : Component ##

此属性保存显示页面的委托。  
以下属性可在每个委托的上下文中使用:

*  index : int    The index of the item
 *  pressed : bool    Whether the item is pressed3.4 interactive : bool

此属性用于确定控件是否为交互式的。交互式页面指示器对按下按钮做出反应，并自动适当地更改当前索引。

SwipeView {
          id: view
          currentIndex: pageIndicator.currentIndex
          anchors.fill: parent
    
          Page {
              title: qsTr("Home")
          }
          Page {
              title: qsTr("Discover")
          }
          Page {
              title: qsTr("Activity")
          }
      }
    
      PageIndicator {
          id: pageIndicator
          interactive: true
          count: view.count
          currentIndex: view.currentIndex
    
          anchors.bottom: parent.bottom
          anchors.horizontalCenter: parent.horizontalCenter
      }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1][]

注意:页面指示器通常非常小(为了避免让用户从用户界面的实际内容上分心)。它们可能很难点击，并且可能不容易被用户识别为交互式的。由于这些原因，它们最好用于补充主要的导航方法(如SwipeView)，而不是取代它们。  
此属性默认值为false。

[20210916094143277.png]: /images/20220828/f9021fd9f2494c8aada1dda1a6bbcefe.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/f8636ec0b1e54f528e2d687adabaad2d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/7deef04846254e0ebcadabedea0310ba.png