qml 分隔工具栏ToolSeparator 工具提示ToolTip 旋转轮Tumbler

分隔工具栏 ToolSeparator

• 作用是将工具栏中的一组项目与相邻的项目分开。效果上就是通过用一条线分隔项目，实现视觉上的分隔作用
• 属性
  horizontal : [只读]，保存方向是否等于Qt.Horizontal
  vertical : [只读]，保存方向是否等于Qt.Vertical
  orientation : 保留工具分隔符的方向
  

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("ToolBar")
    color: "lightgray"

    ToolBar {
        id:toolbar
        anchors.centerIn: parent
        RowLayout {
            anchors.fill: parent

            ToolButton {
                text: qsTr("Action 1")
            }

            ToolSeparator {
                contentItem: Rectangle {  //设置颜色一定要配置大小，不然默认是最小的显示不出来
                    implicitWidth: 3
                    implicitHeight: toolbar.height - 20
                    color: "orange"
                }
            }

            ToolButton {
                text: qsTr("Action 2")
            }

        }
    }
}

工具提示 ToolTip

• 是一小段文本，它通知用户控件的功能
• 属性
  delay : 保留共享工具提示的延迟（毫秒） 显示工具提示
  text : 保存共享工具提示的文本
  timeout : 保存共享工具提示的超时（毫秒） 隐藏工具提示
  toolTip : 保存共享工具提示实例
  visible : 保存共享工具提示是否可见

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("ToolBar")
    color: "lightgray"

    Row{
        anchors.centerIn: parent
        spacing: 30;

        Button {    //设置接收鼠标悬浮事件
            text: qsTr("Button")
            hoverEnabled: true

            ToolTip.delay: 1000 //1s延迟显示
            ToolTip.timeout: 5000   //5s超时隐藏
            ToolTip.visible: hovered    //可见性取决于鼠标是否悬停在按钮上
            ToolTip.text: qsTr("这是提示")
        }

        Slider{
            id: slider
            value: 0.5

            ToolTip {
                parent: slider.handle   //父项是Slider的手柄 不设置就无法跟随滑块移动
                visible: slider.pressed
                text: slider.value.toFixed(1)  //四舍五入取1位小数
            }
        }
    }
}

旋转轮 Tumbler

• 用户从可旋转的项目“滚轮”中选择一个选项，一般用于在多选项中选择一个的情况，当选项非常多时，允许选项是循环的，也就是两端是重叠的
• 属性
  count : 保存模型中的项目数
  currentIndex : 保存当前项目的索引
  currentItem : 设置项目保留在当前索引处
  delegate : 委托
  model : 模型
  moving : 描述由于用户拖动或轻弹而导致的Tumbler当前是否正在移动
  visibleItemCount : 保存翻转开关中可见项目的数量
  wrap : 确定当Tumbler到达顶部或底部时是否回绕
  

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("ToolBar")
    color: "lightgray"

    Rectangle { //实现时间选择器
        id: rect
        anchors.centerIn: parent
        width: frame.implicitWidth + 10
        height: frame.implicitHeight + 10

        //自定义函数当Tumbler的模型中的选型总数为12时，代表是时钟模型
        //所以里面的每个选项的内容需要加1，而分钟和秒钟就不需要加1了
        //将模型数据转成字符串，如果位数不是两位，就为其补0
        function formatText(count, modelData) {
            var data = count === 12 ? modelData + 1 : modelData
            return data.toString().length < 2 ? "0" + data : data
        }

        Component {
            id: delegateComponent

            Label {
                text: rect.formatText(Tumbler.tumbler.count, modelData)
                //displacement属性：表示该项目与当前项目之间的距离（当前项目的话距离为0）
                //Math.abs() 取绝对值的函数
                opacity: 0.4 + (1 - Math.abs(Tumbler.displacement)) * 0.6   //设置透明度
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 20
            }
        }

        Frame { //用于在可视框架内将一组逻辑控件布局在一起 此框架常和定位器一起使用
            id: frame
            padding: 0
            anchors.centerIn: parent

            Row {
                id: row

                Tumbler {   //时
                    id: hoursTumbler
                    model: 24
                    delegate: delegateComponent //设置委托
                }

                Tumbler {   //分
                    id: minutesTumbler
                    model: 60
                    delegate: delegateComponent
                }

                Tumbler {   //秒
                    id: amPmTumbler
                    model: 60
                    delegate: delegateComponent
                }
            }
        }
    }
}