devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Qt Quick 常用元素：TabView(选项卡) 与 Slider(滑块)_qml tabview

作者：人工智能uu | 2024-07-10 11:26:08

赞

踩

qml tabview

1、TabView

TabView 可以实现类似 Windows 任务管理器的界面，有人叫 TabView 为标签控件，有人又称之为选项卡控件，我们知道它就是这么个东西就行了。现在来介绍 TabView 的属性和方法。

  • count 属性是只读的，返回 TabView 内的标签页的个数。
  • currentlndex 属性代表当前标签页的索引，从 0 开始，可以读取也可以设置它来切换标签。
  • frameVisible 指示标签页对应的内容周围的边框是否可见。tabVisible 设置标签栏是否可见。
  • tabPosition 保存标签栏的位置，默认是 Qt.TopEdge，在界面顶部；置 tabPosition 为 Qt.BottomEdge，标签栏就会跑到界面底部。
  • addTab (title, component) 方法用于增加一个标签，第一个参数是标签的标题，第二个参数是一个组件，代表标签对应的可视控件。insertTab (index, title, component)在指定索引位置插入一个标签。
  • removeTab (index) 删除指定位置的标签。moveTab(from, to) 将一个标签从索引 from 移动到索引。getTab (index) 返回指定位置的标签对象（类型为Tab），Tab 对象只有一个 title 属性，是 Loader 的派生类。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

1.1、标签控件简单示例

tabview_simple.qml 的内容如下：

  1. import QtQuick 2.2
  2. import QtQuick.Controls 1.2
  3.  
  4. Rectangle {
  5.     width: 360;
  6.     height: 240;
  7.     color: "lightgray";
  8.  
  9.     Component {
  10.         id: tabContent;
  11.         Rectangle {
  12.             implicitWidth: 100;
  13.             implicitHeight: 100;
  14.             anchors.fill: parent;
  15.             color: Qt.rgba(Math.random(), Math.random(), Math.random());
  16.         }
  17.     }
  18.  
  19.     Button {
  20.         id: addTab;
  21.         x: 8;
  22.         y: 8;
  23.         width: 60;
  24.         height: 25;
  25.         text: "AddTab";
  26.         onClicked: {
  27.             tabView.addTab("tab-" + tabView.count, tabContent);
  28.         }
  29.     }
  30.  
  31.     TabView {
  32.         id: tabView;
  33.         anchors.top: addTab.bottom;
  34.         anchors.margins: 8;
  35.         anchors.left: parent.left;
  36.         anchors.right: parent.right;
  37.         anchors.bottom: parent.bottom;
  38.     }
  39. }

执行后，点击四次 "AddTab" 按钮后，再选择 "tab-1" 后的效果图如下所示。

 

太丑了点儿，对吧。没关系，咱们可以用 TabViewStyle 来定制。

1.2、使用 TabViewStyle

TabView 有 style 这个属性，可以为其指定一个 TabViewStyle 对象来定制 TabView。tabBar 绘制标签栏的背景。tab 绘制一个个的标签。frame 绘制 TabView 的边框。一般我们设置这三个属性即可打造一个美丽动人的 TabView。

下面看一个示例：

  1. import QtQuick 2.2
  2. import QtQuick.Controls 1.2
  3. import QtQuick.Controls.Styles 1.2
  4. import QtQuick.Layouts 1.1
  5.  
  6. Rectangle {
  7.     width: 360;
  8.     height: 240;
  9.     color: "lightgray";
  10.     id: root;
  11.     property var icons: ["call1.png", "call2.png", "call3.png"];
  12.     Component.onCompleted: {
  13.         tabView.addTab("ABC", tabContent);
  14.         tabView.addTab("ZXY", tabContent);
  15.         tabView.addTab("MQF", tabContent);
  16.         tabView.addTab("WKJ", tabContent);
  17.     }
  18.  
  19.     Component {
  20.         id: tabContent;
  21.         Rectangle {
  22.             implicitWidth: 100;
  23.             implicitHeight: 100;
  24.             anchors.fill: parent;
  25.             color: Qt.rgba(Math.random(), Math.random(), Math.random());
  26.         }
  27.     }
  28.  
  29.     TabView {
  30.         id: tabView;
  31.         anchors.fill: parent;
  32.  
  33.         style: TabViewStyle {
  34.             tab: Item{
  35.                 implicitWidth: Math.max(text.width + 8, 80);
  36.                 implicitHeight: 48;
  37.                 Rectangle {
  38.                     width: (styleData.index < control.count - 1) ? (parent.width - 2) : parent.width;
  39.                     height: parent.height - 4;
  40.                     anchors.top: parent.top;
  41.                     anchors.left: parent.left;
  42.                     anchors.leftMargin: 1;
  43.                     visible: styleData.selected;
  44.                     gradient: Gradient {
  45.                         GradientStop{position: 0.0; color: "#606060";}
  46.                         GradientStop{position: 0.5; color: "#c0c0c0";}
  47.                         GradientStop{position: 1.0; color: "#a0a0a0";}
  48.                     }
  49.                 }
  50.                 Rectangle {
  51.                     width: 2;
  52.                     height: parent.height - 4;
  53.                     anchors.top: parent.top;
  54.                     anchors.right: parent.right;
  55.                     visible: styleData.index < control.count - 1;
  56.                     gradient: Gradient {
  57.                         GradientStop{position: 0.0; color: "#404040";}
  58.                         GradientStop{position: 0.5; color: "#707070";}
  59.                         GradientStop{position: 1.0; color: "#404040";}
  60.                     }
  61.                 }
  62.                 RowLayout {
  63.                     implicitWidth: Math.max(text.width, 72);
  64.                     height: 48;
  65.                     anchors.centerIn: parent;
  66.                     z: 1;
  67.                     Image{
  68.                         width: 48;
  69.                         height: 48;
  70.                         source: root.icons[styleData.index%3];
  71.                     }
  72.                     Text {
  73.                         id: text;
  74.                         text: styleData.title;
  75.                         color: styleData.selected ? "blue" : (styleData.hovered ? "green" : "white");
  76.                     }
  77.                 }
  78.             }
  79.             tabBar: Rectangle {
  80.                 height: 56;
  81.                 gradient: Gradient {
  82.                     GradientStop{position: 0.0; color: "#484848";}
  83.                     GradientStop{position: 0.3; color: "#787878";}
  84.                     GradientStop{position: 1.0; color: "#a0a0a0";}
  85.                 }
  86.                 Rectangle {
  87.                     width: parent.width;
  88.                     height: 4;
  89.                     anchors.bottom: parent.bottom;
  90.                     border.width: 2;
  91.                     border.color: "#c7c7c7";
  92.                 }
  93.             }
  94.         }
  95.     }
  96. }

执行后的效果图如下所示：

 

TabViewStyle 对象的 tab 组件相对复杂一些，我设计为 “图标+文本” 的样式，图标在左， 文本在右。当选中标签时，使用 Rectangle 高亮背景。选中标签（styleData.selected为true）的文本，颜色为蓝色；未选中标签的文本，鼠标悬停（styleData.hovered为true）时为绿色，否则为白色。

2、Slider

Slider 类代表一个水平或垂直的滑块控件,通常用于让用户在某个取值范围内选择一个值。先来看一个示意图，见下图。

滑块组件分为面板（panel）、滑槽（groove）、刻度线（tickmarks）和滑块（handle）四部分。而 Slider 对应的用来定制滑块控件外观的 SliderStyle 类，恰恰就有 groove、handle、 panel、tickmarks 四个组件。也就是说，滑块控件的每个组成部分，都可以定制。不过，我们一般只定制 handle 和 groove，其他两个定制起来稍微麻烦一些。

  • maximumValue 用来设置最大值，默认值为 1.0。minimumValue 用来设置最小值，默认值为0。value 代表滑块控件的当前值，默认值为 0，使用 onValueChanged 信号处理器可以跟踪滑块当前值的变化。
  • stepSize 用来设置滑块变化的步长，当你使用方向键调整滑块时，按一次它就增加或减少 stepSize 设定的值。
  • orientation 属性用来设置控件的方向，可以是水平的（Qt.Horizontal）或垂直的 (Qt. Vertical）。
  • updateValueWhileDragging 属性用来设置拖动滑块时控件的当前值是否变化，默认为 true。
  • tickmarksEnabled 属性指示是否显示刻度线，默认为 false。
  • hovered 属性指示鼠标是否悬停在控件上方，pressed 指示鼠标或手指是否按下。这两个属性都是只读的。
  • activeFocusOnPress 属性指示当用户按下鼠标或手指时，控件是否获得键盘焦点，默认为 false。

现在隆重地介绍我们的重量级嘉宾：style。使用 style 属性，你就可以随心所欲地妆扮你的滑块控件了。一般，style 属性指向一个 SliderStyle 对象。

2.1 SliderStyle

SliderStyle 用来定制一个 Slider 的外观，你可以定制面板、滑槽、滑块、刻度线四部分。

  • control 属性指向应用此风格对象的滑块控件实例。
  • groove 属性指向滑槽组件，handle 指向滑块组件，tickmarks 指向刻度线组件，panel 指向面板组件，它们的类型都是 Component。

需要说明的是，一般我们只需要定制 groove 和 handle 就能够得到不错的效果。

2.2 滑块简单示例

好啦，现在我们提供一个滑块的示例，看看 Slider 的各个属性的用法。slider_demo.qml 代码如下：

  1. import QtQuick 2.2
  2. import QtQuick.Controls 1.2
  3. import QtQuick.Controls.Styles 1.2
  4.  
  5. Rectangle {
  6.     width: 320;
  7.     height: 240;
  8.     color: "lightgray";
  9.     Row {
  10.         anchors.fill: parent;
  11.         spacing: 20;
  12.         Column{
  13.             width: 200;
  14.             spacing: 16;
  15.             Text {
  16.                 id: sliderStat;
  17.                 color: "blue";
  18.                 text: "current - 0.1";
  19.             }
  20.             Slider {
  21.                 width: 200;
  22.                 height: 30;
  23.                 stepSize: 0.01;
  24.                 value: 0.1;
  25.                 onValueChanged: {
  26.                     sliderStat.text = "current - " + value;
  27.                 }
  28.                 Component.onCompleted: console.log(activeFocusOnPress);
  29.             }
  30.  
  31.             Slider {
  32.                 width: 200;
  33.                 height: 30;
  34.                 minimumValue: 0;
  35.                 maximumValue: 100;
  36.                 stepSize: 1;
  37.                 value: 50;
  38.                 tickmarksEnabled: true;
  39.             }
  40.             Slider {
  41.                 id: customGrooveAndHandle;
  42.                 width: 200;
  43.                 height: 30;
  44.                 stepSize: 0.1;
  45.                 value: 0;
  46.                 tickmarksEnabled: true;
  47.                 style: SliderStyle {
  48.                     groove: Rectangle {
  49.                         implicitWidth: 200;
  50.                         implicitHeight: 8;
  51.                         color: "gray";
  52.                         radius: 8;
  53.                     }
  54.                     handle: Rectangle {
  55.                         anchors.centerIn: parent;
  56.                         color: control.pressed ? "white" : "lightgray";
  57.                         border.color: "gray";
  58.                         border.width: 2;
  59.                         width: 34;
  60.                         height: 34;
  61.                         radius: 12;
  62.                     }
  63.                 }
  64.             }
  65.             Slider {
  66.                 id: customPanel;
  67.                 width: 200;
  68.                 height: 36;
  69.                 stepSize: 0.1;
  70.                 value: 0;
  71.                 tickmarksEnabled: true;
  72.                 style: SliderStyle {
  73.                     groove: Rectangle {
  74.                         implicitWidth: 200;
  75.                         implicitHeight: 8;
  76.                         color: "gray";
  77.                         radius: 8;
  78.                     }
  79.                     handle: Rectangle {
  80.                         anchors.centerIn: parent;
  81.                         color: control.pressed ? "white" : "lightgray";
  82.                         border.color: "gray";
  83.                         border.width: 2;
  84.                         width: 34;
  85.                         height: 34;
  86.                         radius: 12;
  87.                         Text {
  88.                             anchors.centerIn: parent;
  89.                             text: control.value;
  90.                             color: "red";
  91.                         }
  92.                     }
  93.                     panel: Rectangle {
  94.                         anchors.fill: parent;
  95.                         radius: 4;
  96.                         color: "lightsteelblue";
  97.                         Loader {
  98.                             id: grooveLoader;
  99.                             anchors.centerIn: parent;
  100.                             sourceComponent: groove;
  101.                         }
  102.                         Loader {
  103.                             id: handleLoader;
  104.                             anchors.verticalCenter: grooveLoader.verticalCenter;
  105.                             x: Math.min(grooveLoader.x + (control.value * grooveLoader.width) / (control.maximumValue - control.minimumValue), grooveLoader.width - item.width);
  106.                             sourceComponent: handle;
  107.                         }
  108.                     }
  109.                 }
  110.             }
  111.         }
  112.         Slider {
  113.             width: 30;
  114.             height: 200;
  115.             orientation: Qt.Vertical;
  116.             stepSize: 0.1;
  117.             value: 0.2;
  118.             tickmarksEnabled: true;
  119.         }
  120.     }
  121. }

使用 qmlscene 加载 slider_demo.qml，效果如下图所示。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/806096
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号