QML常用类型总结

1、Window：根

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

所有的子类必须写在根类下

错误示例：

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "gray"

    Rectangle {
        color: "red"
        width: 100
        height: 100
        border.color: "green"
        border.width: 5
    }
}

//错误写法
// Rectangle {
//     color: "red"
//     width: 100
//     height: 100
//     border.color: "green"
//     border.width: 5
// }

2、id：唯一标识

id开头字母必须小写

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "gray"

    Rectangle {
        id: aaa //唯一id
        color: "red"
        width: 100
        height: 100
        border.color: "green"
        border.width: 5
    }
    
    Rectangle {
        width: aaa.width //使用aaa内的值
        height: aaa.height
        color: aaa.height
    }
}

3、property：自定义属性

Rectangle {
    id: aaa
    color: "red"
    width: 100
    height: 100
    border.color: "green"
    border.width: 5
    property color aaaColor: "pink" //自定义属性
}

Rectangle {
    x: 200 //防止与上一个rectangle重叠，设置水平偏移量200
    width: aaa.width
    height: aaa.height
    color: aaa.color
    border.color: aaa.aaaColor //使用aaa的自定义属性
    border.width: aaa.border.width
}

常用属性：

类型名称	描述	示例/说明
int	32位有符号整数，范围-2147483648 ~ 2147483647	property int loops: 5
color	ARGB颜色值，支持字符串、名称或Qt.rgba()	color: "#FF0000" 或 color: "red" 或 color: Qt.rgba(1,0,0,1)
font	字体类型，含pixelSize、family、bold等属性	font { pixelSize: 20; family: "Arial" }
bool	布尔类型，值true或false	property bool isVisible: true
string	Unicode字符串	property string name: "QML"
real	双精度浮点数（默认）或单精度（需配置）	property real ratio: 3.14
double	双精度浮点数	property double ratio: 3.14
date	日期类型	property date today: new Date()
var	通用类型，可存储任意值	property var dynamicValue: "Hello"
point	二维坐标点 (x, y)	property point pos: Qt.point(100, 200)
rectangle	矩形区域 (x, y, width, height)	property rect bounds: Qt.rect(0, 0, 100, 50)
list	QML对象列表（需结合对象类型）	property list<Rectangle> items: [Rectangle {}, Rectangle {}]

3.1、default property：默认属性

Rectangle {
    id: aaa
    color: "red"
    width: 100
    height: 100
    border.color: "green"
    border.width: 5
    property color aaaColor: "pink"
    default property color aaaColor2: "blue" //默认属性
}

Rectangle {
    x: 200 //防止与上一个rectangle重叠，设置水平偏移量200
    width: aaa.width
    height: aaa.height
    color: aaa.color
    border.color: aaa.aaaColor2 //使用aaa的自定义属性
    border.width: aaa.border.width
}

3.2 readonly property：只读属性

不可被修改

Rectangle {
    id: aaa
    color: "red"
    width: 100
    height: 100
    border.color: "green"
    border.width: 5
    property color aaaColor: "pink"
    default property color aaaColor2: "blue"
    readonly property color aaaColor3: "orange"

    //相当于类的构造函数，被渲染时执行 javascript语法
    Component.onCompleted: {
        console.log("hello world")
        aaaColor2 = "white"
        aaaColor3 = "purple" //aaaColor不可修改，会报警告
    }
}

Rectangle {
    x: 200//防止与上一个rectangle重叠，设置水平偏移量200
    width: aaa.width
    height: aaa.height
    color: aaa.color
    border.color: aaa.aaaColor3 //使用aaa的自定义属性
    border.width: aaa.border.width
}

3.3、required property：需要属性

必须赋值，否则程序无法运行

Rectangle {
    id: aaa
    color: "red"
    width: 100
    height: 100
    border.color: "green"
    border.width: 5
    property color aaaColor: "pink"
    default property color aaaColor2: "blue"
    readonly property color aaaColor3: "orange"
        
    //必须赋值才能执行程序
    //错误赋值方法：required property color aaaColor4: "purple"
    required property color aaaColor4
    aaaColor4: "purple"

    //相当于类的构造函数，被渲染时执行 javascript语法
    Component.onCompleted: {
        console.log("hello world")
        aaaColor2 = "white"
        // aaaColor3 = "purple" //aaaColor不可修改，会报警告
    }
}

Rectangle {
    x: 200//防止与上一个rectangle重叠，设置水平偏移量200
    width: aaa.width
    height: aaa.height
    color: aaa.color
    border.color: aaa.aaaColor4 //使用aaa的自定义属性
    border.width: aaa.border.width
}

4、x、y、z：偏移属性

父控件最左上角为原点

Rectangle {
    width: 100
    height: 100
    color: "blue"
    x: 100 //距离原点，横轴向右方偏移100像素，负数相反
    y: 100 //距离原点，横轴向下方偏移100像素，负数相反
    z: 101 //堆叠层级，同一位置下，谁的堆叠层级高就渲染在其上方
}
Rectangle {
    width: 100
    height: 100
    color: "yellow"
    x: 100
    y: 100
    z: 102
}

所以此处显示的矩形为黄色

5、visible：是否隐藏

Rectangle {
    width: 100
    height: 100
    color: "yellow"
    x: 100
    y: 100
    z: 102
    visible: true //真为显示，假为不显示
}

6、scale：缩放等级

Rectangle {
    width: 100
    height: 100
    color: "blue"
    x: 100
    y: 100
    z: 101
    scale: 2.0 //缩放2倍大
}
Rectangle {
    width: 100
    height: 100
    color: "yellow"
    x: 200
    y: 100
    z: 102
    scale: 1.5 //缩放1.5倍大
}

7、rotation：旋转度数

Rectangle {
    width: 100
    height: 100
    color: "yellow"
    x: 200
    y: 100
    z: 102
    scale: 1.5
    rotation: 45 //旋转45度
}

8、opcaity：透明度

Rectangle {
    width: 100
    height: 100
    color: "blue"
    x: 100
    y: 100
    z: 101
    scale: 2.0
}
Rectangle {
    width: 100
    height: 100
    color: "yellow"
    x: 200
    y: 100
    z: 102
    scale: 1.5
    rotation: 45
    opacity: 0.5 //半透明
}

9、clip：是否裁剪

限制子控件的范围不超过父控件本身

Rectangle {
    width: 100
    height: 100
    color: "cyan"
    x: 100
    y: 100
    clip: false //不裁切

    Rectangle {
        width: 50
        height: 50
        color: "purple"
        x: -25 //向左偏移
    }
}

Rectangle {
    width: 100
    height: 100
    color: "cyan"
    x: 300
    y: 100
    clip: true //裁切

    Rectangle {
        width: 50
        height: 50
        color: "purple"
        x: -25 //向左偏移
    }
}

10、children：子控件

在QML早期语法中，子控件会加上children标识

现在不需要了

Rectangle {
    width: 100
    height: 100
    color: "cyan"
    x: 100
    y: 100
    clip: false
	
   	// 在QML早期语法中，子控件会加上children标识
    children: Rectangle {
        width: 50
        height: 50
        color: "purple"
        x: -25
    }
}

11、anchors：锚布局

锚布局必须给某一个控件加上唯一id

Rectangle {
    id: aaa
    width: 100
    height: 100
    color: "red"
}

Rectangle {
    width: 50
    height: 50
    color: "cyan"
    // anchors.fill: aaa //将当前矩形填充到aaa中
    // anchors.verticalCenter: aaa.verticalCenter //当前矩形垂直居中于aaa
    // anchors.horizontalCenter: aaa.horizontalCenter //当前矩形水平居中于aaa
    // anchors.centerIn: aaa //当前矩形位置中心对齐在aaa中
    // anchors.left: aaa.right //当前矩形的左边对齐aaa的右边
    // anchors.leftMargin: 10 //设置当前矩形的左外边距为10像素
    // anchors.top: aaa.top //当前矩形的上方与aaa的上方始终对齐
    //还有anchors.right、anchors.bottom等
}

12、parent：父控件标识

Window {
	width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "gray"
	
	Rectangle {
        width: 100
        height: 100
        color: "yellow"
        anchors.centerIn: parent // 当前矩形在父控件内中心对齐
	}
}

13、radius：圆角属性

Qt6中可以给左上角、右上角、左下角、右下角单独设置圆角属性：topRightRadius、bottomRightRadius等

Qt5则需要clip或一些其他方法

Window {
	width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "gray"
	
	Rectangle {
        width: 100
        height: 100
        color: "yellow"
        anchors.centerIn: parent
        radius: 10 // 当前矩形的圆角度数为10
	}
}

14、border：边框属性

Rectangle {
    width: 100
    height: 100
    color: "yellow"
    anchors.centerIn: parent
    radius: 10
    border.width: 10 //边框宽度为10像素
    border.color: "red" //边框颜色为红色
}

15、Text：文本控件

Item {
    Text {
        id: text
        width: 150

        //内容
        text: "neirong111111111111111111111111111111110"
            
        //字体
        font.family: "黑体"
            
        //字号
        font.pixelSize: 30
            
        //颜色
        color: "red"
            
        //换行，换行时必须设置宽度width
        // wrapMode: Text.NoWrap //不换行
        // wrapMode: Text.WordWrap //单词换行
        // wrapMode: Text.WrapAnywhere //单词换行，可能会截断单词
        // wrapMode: Text.Wrap //自动换行
            
        //省略
        // elide: Text.ElideNone//没有省略号
        // elide: Text.ElideMiddle//省略号在中间
        // elide: Text.ElideLeft//省略号在左边
        elide: Text.ElideRight//省略号在右边
    }
}

换行需要配合除了Window以外的父控件使用

16、TextField：文本输入框控件

Qt6需要导入import QtQuick.Controls.Basic

Qt5需要导入import QtQuick.Controls 2.15

TextField {
    width: 300
    height: 50
    anchors.centerIn: parent
}

readOnly属性可以设置不可写入

cursorVisible属性可以设置光标隐藏

16.1、background：背景设置

TextField {
    width: 300
    height: 50
    
    //背景设置用Rectangle填充
    background: Rectangle {
        anchors.fill: parent
        border.color: "red"
        border.width: 1
        color: "yellow"
        radius: 20
    }

    anchors.centerIn: parent
}

16.2、placeholderText：文本提示

TextField {
    width: 300
    height: 50
    
    //背景设置用Rectangle填充
    background: Rectangle {
        anchors.fill: parent
        border.color: "red"
        border.width: 1
        color: "yellow"
        radius: 20
    }
    
    font.family: "黑体" //避免乱码
    placeholderText: "请输入文本 " //提示文本

    anchors.centerIn: parent
}

16.3、horizontalAlignment：文本居中

TextField {
    width: 300
    height: 50
    background: Rectangle {
        anchors.fill: parent
        border.color: "red"
        border.width: 1
        color: "yellow"
        radius: 20
    }

    font.family: "黑体"
    placeholderText: "请输入文本 "

    //设置文本居中
    horizontalAlignment: Text.AlignHCenter

    anchors.centerIn: parent
}

16.4 echoMode: 设置输入模式

TextField {
    width: 300
    height: 50
    background: Rectangle {
        anchors.fill: parent
        border.color: "red"
        border.width: 1
        color: "yellow"
        radius: 20
    }

    font.family: "黑体"
    placeholderText: "请输入文本 "

    //设置文本居中
    horizontalAlignment: Text.AlignHCenter

    //设置输入模式为密码模式
    echoMode: TextInput.Password

    anchors.centerIn: parent
}

16.5、selectByMouse：是否可被鼠标选中

TextField {
    width: 300
    height: 50
    background: Rectangle {
        anchors.fill: parent
        border.color: "red"
        border.width: 1
        color: "yellow"
        radius: 20
    }

    font.family: "黑体"
    placeholderText: "请输入文本 "

    //设置文本居中
    horizontalAlignment: Text.AlignHCenter

    //设置输入模式为密码模式
    echoMode: TextInput.Password
    
    //可被鼠标选中
    selectByMouse: true

    anchors.centerIn: parent
}

16.6、maximumLength：限制字符最大长度

TextField {
    width: 300
    height: 50
    background: Rectangle {
        anchors.fill: parent
        border.color: "red"
        border.width: 1
        color: "yellow"
        radius: 20
    }

    font.family: "黑体"
    placeholderText: "请输入文本 "

    //设置文本居中
    horizontalAlignment: Text.AlignHCenter

    //设置输入模式为密码模式
    echoMode: TextInput.Password

    //可被鼠标选中
    selectByMouse: true

    //长度限制为最大10个字符
    maximumLength: 10

    anchors.centerIn: parent
}

16.7、padding：内边距

leftPadding、rightPadding、topPadding、bottomPadding

TextField {
    width: 300
    height: 50
    background: Rectangle {
        anchors.fill: parent
        border.color: "red"
        border.width: 1
        color: "yellow"
        radius: 20
    }

    font.family: "黑体"
    font.pixelSize: 30
    placeholderText: "请输入文本 "

    //设置文本居中
    // horizontalAlignment: Text.AlignHCenter

    //设置输入模式为密码模式
    echoMode: TextInput.Password

    //可被鼠标选中
    selectByMouse: true

    //长度限制为最大10个字符
    maximumLength: 10
    
    //设置左内边距为30像素
    leftPadding: 30

    anchors.centerIn: parent
}

17、TextArea：多行文本输入框控件

TextArea {
    id: aaa

    //设置布局
    anchors.fill: parent

    //设置背景
    background: Rectangle {
            color: "cyan"
            border.color: "red"
            border.width: 5
    }

    //设置换行模式
    wrapMode: Text.Wrap

    //设置字体颜色
    color: "yellow"

    //设置字体、字号、下划线
    font.family: "黑体"
    font.pixelSize: 20
    font.underline: true

    //可被鼠标选中
    selectByMouse: true
}

18、Image：图片控件

Image {
    anchors.centerIn: parent
   	
    //缩放大小
    scale: 0.5    
        
    //直接引用
    source: "file:///C:/Users/李海冬/Pictures/Snipaste_2024-11-06_17-37-32.png"
    //也可以通过项目中导入资源文件引用
}

19、事件系统

事件类型	描述	使用场景	示例
Mouse Events	处理鼠标相关的事件，包括点击、移动、进入、离开等。	按钮点击、鼠标悬停、拖拽操作等。	onClicked, onPressed, onReleased, onEntered, onExited
Keyboard Events	处理键盘相关的事件，包括按键按下、释放等。	输入框输入、快捷键触发等。	onPressed, onReleased, onTextChanged
Focus Events	处理焦点相关的事件，包括获得焦点和失去焦点。	表单输入时切换输入框焦点等。	onFocusChanged, onActiveFocusChanged
Touch Events	处理触摸相关的事件，适用于触摸屏设备。	触摸滑动、缩放等手势操作。	onTouchStarted, onTouchUpdated, onTouchEnded
Wheel Events	处理鼠标滚轮事件。	滚动视图内容、缩放操作等。	onWheel
Drag Events	处理拖拽相关的事件。	拖拽文件、元素等。	onDragEntered, onDragMoved, onDragDropped, onDragExited
Hover Events	处理鼠标悬停相关的事件。	按钮或元素悬停时的视觉反馈。	onHovered, onUnhovered
Component Events	处理组件生命周期相关的事件。	组件加载、销毁等。	onCompleted, onDestruction
State Changes	处理状态变化相关的事件。	界面状态切换，如从正常状态切换到编辑状态。	onStateChanged
Property Changes	处理属性变化相关的事件。	当某个属性值发生变化时触发相应操作。	onPropertyNameChanged (例如 onWidthChanged, onColorChanged)
Timer Events	处理定时器相关的事件。	定时执行某个操作，如自动刷新数据。	onTriggered
Animation Events	处理动画相关的事件。	动画开始、结束、暂停等。	onRunningChanged, onStopped, onStarted
Input Method Events	处理输入法相关的事件。	处理输入法输入，如中文输入法的联想词等。	onInputMethodComposing, onInputMethodCommitted
Context Menu Events	处理上下文菜单相关的事件。	右键菜单显示、选择等。	onContextMenuRequested
Window Events	处理窗口相关的事件。	窗口大小改变、关闭、最小化等。	onClosing, onVisibilityChanged, onActiveChanged
Application Events	处理应用程序级别的事件。	应用启动、退出等。	onApplicationStarted, onApplicationStopped

//拖拽事件区域
DropArea {
    width: 300
    height: 300
    //DropArea本身不可见，所以用矩形填充进行可视化
    Rectangle {
        id: bbb
        anchors.fill: parent
    }

    onEntered: {
        //当有控件拖动到当前区域时背景改为粉色
        bbb.color = "pink"
    }
    onExited: {
        //当有控件拖出当前区域时背景改为原样
        bbb.color = "white"
    }
}

Rectangle {
    id: aaa
    width: 100
    height: 100
    y:400
    color: "cyan"

    //激活拖拽，使dropArea可识别
    Drag.active: mouseArea.drag.active

    //鼠标事件区域
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true

        //点击aaa矩形时改变其颜色为黄色
        // onClicked: {
        //         aaa.color = "yellow"
        // }

        // //鼠标移入aaa矩形时改变其颜色为红色，需要设置hoverEnabled
        // onEntered: {
        //         aaa.color = "red"
        // }

        // //鼠标移入aaa矩形时改变其颜色为青色，需要设置hoverEnabled
        // onExited: {
        //         aaa.color = "cyan"
        // }

        onWheel: {
            if (wheel.angleDelta.y > 0) {
                console.log("鼠标滚轮向前滚动")
            }
            if (wheel.angleDelta.y < 0) {
                console.log("鼠标滚轮向后滚动")
            }
        }

        //拖拽事件，拖拽目标为aaa
        drag.target: aaa
        // drag.axis: Drag.XAxis//只能横向拖动
        // drag.axis: Drag.YAxis//只能竖向拖动
        drag.axis: Drag.XandYAxis//任意方向拖动

        onReleased: {
            //当拖拽释放时DropArea的背景回复原样
            bbb.color = "white"
        }
    }

    focus: true

    //键盘事件，需要聚焦于父控件，设置focus
    Keys.onPressed: {
        if (event.key === Qt.Key_A) {
            console.log("键盘点击了字母A")
        }
    }
}

20、Button：按钮控件

Button {
    width: 100
    height: 100

    anchors.centerIn: parent
        
    //高亮显示按钮
    highlighted: true
        
    //设置按钮文字
    text: "按钮"

    //设置按钮图标，可以调整icon.height、icon.width等属性
    icon.source: "file:///C:/Users/李海冬/Pictures/Snipaste_2024-11-06_17-37-32.png"

    //设置图标和文字的位置，文字在图标下方
    display: AbstractButton.TextUnderIcon

    //点击事件（按下立即释放）
    onClicked: console.log("按钮Clicked")

    //取消事件（按钮被按下，但是释放时不在按钮范围）
    onCanceled: console.log("按钮Canceled")

    //按下事件（只触发按下）
    onPressed: console.log("按钮Pressed")

    //保持按住事件（保持长按）
    onPressAndHold: console.log("按钮PressAndHold")

    //释放事件（松开按钮触发）
    onReleased: console.log("按钮Released")
}

21、DelayButton：延时按钮

DelayButton {
    anchors.centerIn: parent

    //设置进度条持续时间ms
    delay: 2000

    //进度条结束时触发
    onActivated: {
            console.log("进度条结束")
    }

    //监听进度条变化
    onProgressChanged: {
            console.log("当前进度：", progress)
    }
}

22、Switch：开关控件

Switch {
    anchors.centerIn: parent

    //位置改变
    onPositionChanged: console.log("position：", position)

    //虚拟位置改变
    onVisualPositionChanged: console.log("VisualPosition：", visualPosition)
    
    //判断开关状态
    onCheckedChanged: console.log("checked：", checked)
}

23、RadioButton：单选按钮

RadioButton {
        id: one
        anchors.centerIn: parent
        
        //设置单选按钮文字
        text: "first"

        //按钮选中事件
        onCheckedChanged: checked ? console.log("1被选中了") : console.log("1取消选中了")
}
RadioButton {
        id: two
        anchors.top: one.bottom
        anchors.left: one.left
                
        //设置单选按钮文字
        text: "second"

        //按钮选中事件
        onCheckedChanged: checked ? console.log("2被选中了") : console.log("2取消选中了")
}
RadioButton {
        id: three
        anchors.top: two.bottom
        anchors.left: two.left
        
        //设置单选按钮文字
        text: "third"
        
        //按钮选中事件
        onCheckedChanged: checked ? console.log("3被选中了") : console.log("3取消选中了")
}

24、ButtonGroup：按钮组

ButtonGroup {
        id: groupA
        
        //设置可以多选，默认true只能选一个
        exclusive: false
}
    
RadioButton {
        id: one
        anchors.centerIn: parent
        
        //设置所在的按钮组
        ButtonGroup.group: groupA
}
RadioButton {
        id: two
        anchors.top: one.bottom
        anchors.left: one.left
        
        //设置所在的按钮组
        ButtonGroup.group: groupA
}
RadioButton {
        id: three
        anchors.top: two.bottom
        anchors.left: two.left

        //设置所在的按钮组
        ButtonGroup.group: groupA
}

25、Popup：弹出框控件

Button {
    onClicked: {
            //打开弹出框
            pop.open()
    }
}

Button {
    x: 200

    onClicked: {
            //关闭弹出框
            pop.close()
    }
}

Popup {
    id: pop
    width: 600
    height: 300
    anchors.centerIn: parent

    //设置背景
    background: Rectangle {
            anchors.fill: parent
            color: "cyan"
    }

    //切换模态窗口（只有关闭当前子窗口才能点击父窗口），非模态窗口则反之
    modal: true

    //关闭策略
    closePolicy: Popup.NoAutoClose

    //关闭事件
    onClosed: {
            console.log("close...............")
    }

    //打开事件
    onOpened: {
            console.log("open.............")
    }

    //将要关闭时触发该事件，发生在closed之前
    onAboutToHide: {
            console.log("hide............")
    }

    //将要打开时触发该事件，发生在opened之前
    onAboutToShow: {
            console.log("show............")
    }
}

关闭策略：

策略	描述
Popup.NoAutoClose	该弹窗仅当显式调用关闭指令时才会关闭。
Popup.CloseOnPressOutside	当鼠标点击弹窗外部区域时，弹窗将关闭。
Popup.CloseOnPressOutsideParent	当鼠标点击父控件外部区域时，弹窗将关闭。
Popup.CloseOnReleaseOutside	当鼠标按键在弹窗外部区域释放时，弹窗将关闭。
Popup.CloseOnReleaseOutsideParent	当鼠标按键在父控件外部区域释放时，弹窗将关闭。
Popup.CloseOnEscape	当弹窗拥有活动焦点时按下 Esc 键，弹窗将关闭。

26、Dialog：对话框控件

Qt6中已经移除了Dialog中的flags、modality等属性

Button {
    onClicked: {
            //打开对话框
            pop.open()
    }
}

Button {
    x: 200

    onClicked: {
            //关闭对话框
            pop.close()
    }
}

Dialog {
    id: pop
    anchors.centerIn: parent

    //对话框打开和关闭按钮
    standardButtons: Dialog.Ok | Dialog.Cancel

    //点击确定触发（Ok）
    onAccepted: {
            console.log("确定")
    }

    //点击取消触发（Cancel）
    onRejected: {
            console.log("取消")
    }
}

27、FileDialog：文件对话框控件

Button {
    onClicked: {
            //打开对话框
            pop.open()
    }
}

Button {
    x: 200

    onClicked: {
            //关闭对话框
            pop.close()
    }
}

FileDialog {
    id: pop

    //更改打开按钮文本
    acceptLabel: "AAA"
    //更改取消按钮文本
    rejectLabel: "BBB"

    //文件模式：OpenFile单个文件、OpenFiles多个文件、SaveFile任何文件（不存在的文件也行）
    fileMode: FileDialog.OpenFiles

    //关闭对话框触发
    onAccepted: {
            //Qt5中使用currentFiles需要导入Qt.labs.platform 1.1
            console.log(currentFiles)
    }
}

28、FolderDialog：文件夹对话框控件

Button {
    onClicked: {
            //打开对话框
            pop.open()
    }
}

Button {
    x: 200

    onClicked: {
            //关闭对话框
            pop.close()
    }
}

FolderDialog {
    id: pop
    
    //输出选择的文件夹路径
    onAccepted: {
            console.log(currentFolder)
    }
}

29、ColorDialog：颜色选择对话框控件

Button {
    onClicked: {
            //打开对话框
            pop.open()
    }
}

Button {
    x: 200

    onClicked: {
            //关闭对话框
            pop.close()
    }
}

ColorDialog {
    id: pop

    //输出选择的颜色
    onAccepted: {
            console.log(currentColor)
    }
}

30、FontDialog：字体选择对话框控件

Button {
    onClicked: {
            //打开对话框
            pop.open()
    }
}

Button {
    x: 200

    onClicked: {
            //关闭对话框
            pop.close()
    }
}

FontDialog {
    id: pop

    //输出当前选择的字体以及属性
    onAccepted: {
            console.log(currentFont, currentFont.bold, currentFont.family)
    }
}

31、MessageDialog：消息对话框控件

Button {
    onClicked: {
            //打开对话框
            pop.open()
    }
}

Button {
    x: 200

    onClicked: {
            //关闭对话框
            pop.close()
    }
}

MessageDialog {
    id: pop

    //设置对话框消息
    text: "一个消息对话框"

    //设置功能按钮
    buttons: MessageDialog.Ok | MessageDialog.Cancel
}

32、states：状态属性

Rectangle {
    id: btn
    width: 100
    height: 40
    color: "red"
    anchors.centerIn: parent

    states: [
        //正常状态下按钮为红色，文本为“移出去了”
        State {
            name: "normal"
            PropertyChanges {
                target: btn
                color: "red"
            }
            PropertyChanges {
                target: txt
                text: "移出去了"
            }
        },
        //鼠标移入状态下按钮为黄色，并改变文本
        State {
            name: "hovered"
            PropertyChanges {
                target: btn
                color: "yellow"
            }
            PropertyChanges {
                target: txt
                text: "放进来了"
            }
        }
    ]

    Text {
        id: txt
        anchors.centerIn: parent
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        onEntered: {
            // parent.color = "yellow"
            // parent.width = 50
            // txt.text = "放进来了"
            btn.state = "hovered"
        }

        onExited: {
            // parent.color = "red"
            // parent.width = 100
            // txt.text = "移出去了"
            btn.state = "normal"
        }
    }
}

33、transitions：过渡动画属性

和状态是绑定的，从一种状态过渡到另一种状态

Rectangle {
    id: btn
    width: 100
    height: 40
    color: "red"
    anchors.centerIn: parent

    states: [
        //正常状态下按钮为红色，文本为“移出去了”
        State {
            name: "normal"
            PropertyChanges {
                target: btn
                color: "red"
            }
            PropertyChanges {
                target: txt
                text: "移出去了"
            }
        },
        //鼠标移入状态下按钮为黄色，并改变文本
        State {
            name: "hovered"
            PropertyChanges {
                target: btn
                color: "yellow"
            }
            PropertyChanges {
                target: txt
                text: "放进来了"
            }
        }
    ]

    //过渡动画
    transitions: [
        //从normal状态过渡到hovered状态
        Transition {
            from: "normal"
            to: "hovered"
            
			//颜色过渡动画
            ColorAnimation {
                target: btn
                //由于btn中hovered和normal状态之间已经有了两种颜色所以不需要写from和to
                //动画持续时间ms
                // from: "white"
                // to: "black"
                duration: 200
            }
        },
        //从hovered状态过渡到normal状态
        Transition {
            from: "hovered"
            to: "normal"
			
            //颜色过渡动画
            ColorAnimation {
                target: btn
                //由于btn中hovered和normal状态之间已经有了两种颜色所以不需要写from和to
                // from: "white"
                // to: "black"
                //动画持续时间ms
                duration: 200
            }
        }
    ]

    Text {
        id: txt
        anchors.centerIn: parent
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        onEntered: {
            // parent.color = "yellow"
            // parent.width = 50
            // txt.text = "放进来了"
            btn.state = "hovered"
        }

        onExited: {
            // parent.color = "red"
            // parent.width = 100
            // txt.text = "移出去了"
            btn.state = "normal"
        }
    }
}

34、PropertyAnimation：动画属性

PropertyAnimation可以单独写（手动触发），

也可以直接写到控件内部（一渲染就执行），

或transition中（state控制）

Button {
    onClicked: {
        //点击按钮开始动画或restart
        ani1.start()
    }
}

PropertyAnimation {
    id: ani1

    //动画的作用对象
    target: btn

    //指定对象的哪些属性需要动画
    property: "width"

    //把btn中的width属性值从100改到400时动画生效
    from: 100
    to: 400

    //若动画不流畅可以调整动画的变速类型
    easing.type: Easing.Linear
}

Rectangle {
    id: btn
    width: 100
    height: 40
    color: "red"
    anchors.centerIn: parent

    //控件一渲染就执行动画
    PropertyAnimation on width {
        to: 400
        duration: 1000
    }

    states: [
        //正常状态下按钮为红色，文本为“移出去了”
        State {
            name: "normal"
            PropertyChanges {
                target: btn
                color: "red"
            }
            PropertyChanges {
                target: txt
                text: "移出去了"
            }
        },
        //鼠标移入状态下按钮为黄色，并改变文本
        State {
            name: "hovered"
            PropertyChanges {
                target: btn
                color: "yellow"
            }
            PropertyChanges {
                target: txt
                text: "放进来了"
            }
        }
    ]

    //过渡动画
    transitions: [
        //
        Transition {
            from: "normal"
            to: "hovered"
            //

            ColorAnimation {
                target: btn
                // from: "white"
                // to: "black"
                duration: 200
            }
            PropertyAnimation {
                target: btn
                property: "width"
                to: 100
                duration: 200
            }
        },
        Transition {
            from: "hovered"
            to: "normal"
            //

            ColorAnimation {
                target: btn
                // from: "white"
                // to: "black"
                duration: 200
            }
            PropertyAnimation {
                target: btn
                property: "width"
                to: 300
                duration: 200
            }
        }
    ]

    Text {
        id: txt
        anchors.centerIn: parent
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        onEntered: {
            // parent.color = "yellow"
            // parent.width = 50
            // txt.text = "放进来了"
            btn.state = "hovered"
        }

        onExited: {
            // parent.color = "red"
            // parent.width = 100
            // txt.text = "移出去了"
            btn.state = "normal"
        }
    }
}

35、Behavior：预设行为动画

Rectangle {
    id: btn
    width: 100
    height: 40
    color: "red"
    anchors.centerIn: parent

    //当width的值发生改变就会触发该动画
    Behavior on width {
        NumberAnimation {
            duration: 1000
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            // ani1.start()
            parent.width = 400
        }

        onDoubleClicked: {
            // ani2.start()
            parent.width = 700
        }
    }
}

36、ParallelAnimation：并行动画

ParallelAnimation {
    id: pAni
    PropertyAnimation {
        id: ani1

        //动画的作用对象
        target: btn

        //指定对象的哪些属性需要动画
        property: "width"

        //把btn中的width属性值改到400时动画生效
        to: 400

        //若动画不流畅可以调整动画的变速类型
        easing.type: Easing.Linear
        duration: 1000
    }
    PropertyAnimation {
        id: ani2

        //动画的作用对象
        target: btn

        //指定对象的哪些属性需要动画
        property: "height"

        //把btn中的height属性值改到400时动画生效
        to: 400

        //若动画不流畅可以调整动画的变速类型
        easing.type: Easing.Linear
        duration: 1000
    }
    PropertyAnimation {
        id: ani3
        target: btn
        property: "color"
        to: "yellow"
        duration: 1000
    }
}

Rectangle {
    id: btn
    width: 100
    height: 40
    color: "red"
    anchors.centerIn: parent

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //若需要ani1和ani2同时执行，则需要ParallelAnimation
            // ani1.start()
            // ani2.start()

            pAni.start()
        }
    }
}

36、SequentialAnimation：串行动画

SequentialAnimation {
    id: sAni
    PropertyAnimation {
        id: ani1

        //动画的作用对象
        target: btn

        //指定对象的哪些属性需要动画
        property: "width"

        //把btn中的width属性值改到400时动画生效
        to: 400

        //若动画不流畅可以调整动画的变速类型
        easing.type: Easing.Linear
        duration: 1000
    }
    PropertyAnimation {
        id: ani2

        //动画的作用对象
        target: btn

        //指定对象的哪些属性需要动画
        property: "height"

        //把btn中的height属性值改到400时动画生效
        to: 400

        //若动画不流畅可以调整动画的变速类型
        easing.type: Easing.Linear
        duration: 1000
    }
    PropertyAnimation {
        id: ani3
        target: btn
        property: "color"
        to: "yellow"
        duration: 1000
    }
}

Rectangle {
    id: btn
    width: 100
    height: 40
    color: "red"
    anchors.centerIn: parent

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //若需要多个动画顺序执行，则需要SequentialAnimation
            sAni.start()
        }
    }
}

37、ScriptAction：动画执行结束脚本

SequentialAnimation {
    id: sAni
    PropertyAnimation {
        id: ani1

        //动画的作用对象
        target: btn

        //指定对象的哪些属性需要动画
        property: "width"

        //把btn中的width属性值改到400时动画生效
        to: 400

        //若动画不流畅可以调整动画的变速类型
        easing.type: Easing.Linear
        duration: 1000
    }
    PropertyAnimation {
        id: ani2

        //动画的作用对象
        target: btn

        //指定对象的哪些属性需要动画
        property: "height"

        //把btn中的height属性值改到400时动画生效
        to: 400

        //若动画不流畅可以调整动画的变速类型
        easing.type: Easing.Linear
        duration: 1000
    }
    PropertyAnimation {
        id: ani3
        target: btn
        property: "color"
        to: "yellow"
        duration: 1000
    }
	
    //执行脚本
    ScriptAction {
        script: {
            console.log("串行动画结束了")
        }
    }
}

Rectangle {
    id: btn
    width: 100
    height: 40
    color: "red"
    anchors.centerIn: parent

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //若需要多个动画顺序执行，则需要SequentialAnimation
            sAni.start()
        }
    }
}

38、gradient：渐变属性

Rectangle {
    width: 400
    height: 400
    anchors.centerIn: parent

    gradient: Gradient{
        //设置渐变方向，仅有Horizontal和Vertical两种，若需要更高级的渐变则使用LinearGradient
        orientation: Gradient.Horizontal

        //渐变的位置
        GradientStop { position:0.0; color:"red" }
        GradientStop { position:0.33; color:"yellow" }
        GradientStop { position:0.60; color:"green" }
        GradientStop { position:0.83; color:"pink" }
        GradientStop { position:1.0; color:"cyan" }
    }
}

39、LinearGradient：线性渐变（Qt5）

需要导入import QtGraphicalEffects 1.15

qt6导入import Qt5Compat.GraphicalEffects，需要安装模块

Rectangle {
    id: rec
    anchors.centerIn: parent
    width: 400
    height: 400
}

LinearGradient {
    //因为是一个独立的控件，需要填充到矩形中
    anchors.fill: rec

    //设置渐变的起始位置和结束位置
    start: Qt.point(0, 0)
    end: Qt.point(rec.width, rec.height)

    gradient: Gradient{
        GradientStop { position:0.0; color:"red" }
        GradientStop { position:0.33; color:"yellow" }
        GradientStop { position:0.60; color:"green" }
        GradientStop { position:0.83; color:"pink" }
        GradientStop { position:1.0; color:"cyan" }
    }
}

40、ConicalGradient：锥形渐变（Qt5）

不仅可以作用到矩形，还可以作用到图片

设置旋转动画等

// Rectangle {
//     id: rec
//     anchors.centerIn: parent
//     width: 400
//     height: 400
// }

Image {
    id: img

    anchors.centerIn: parent

    source: "/img/img/Snipaste_2024-11-06_17-37-32.png"
}

ConicalGradient {
    anchors.fill: img

    //渐变角度
    angle: 0.0

    //设置带有透明度的渐变
    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: "#00000000"
        }
        GradientStop {
            position: 1.0
            color: "#FF000000"
        }
    }

    //设置旋转动画
    RotationAnimation on angle {
        from: 0
        to: 360
        duration: 1000
    }
}

41、RadialGradient：辐射渐变（Qt5）

Rectangle {
    id: rec
    anchors.centerIn: parent
    width: 400
    height: 400
}

// Image {
//     id: rec
//     anchors.centerIn: parent
//     source: "/img/img/Snipaste_2024-11-06_17-37-32.png"
// }

RadialGradient {
    anchors.fill: rec
	
    angle: 45
        
    //水平辐射半径和垂直辐射半径
    horizontalRadius: 100
    verticalRadius: 300

    gradient:  Gradient {
        GradientStop {
          position: 0.0
          color: "#00000000"
        }
        GradientStop {
          position: 1.0
          color: "#FF000000"
        }
    }
}

42、BrightnessContrast：亮度与饱和度

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

BrightnessContrast {
    //必须填充到item中，如果填充到img会导致scale失效
    anchors.fill: item
    source: img

    //亮度0-1
    brightness: 0.5
    //饱和度0-1
    contrast: 0.5
}

43、Slider：滑块控件

Text {
    id: text1
    anchors.right: slider1.left
    anchors.verticalCenter: slider1.verticalCenter
    text: "亮度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider1
    anchors.horizontalCenter: parent.horizontalCenter
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        bc.brightness = value
    }
}

Text {
    id: text2
    anchors.right: slider2.left
    anchors.verticalCenter: slider2.verticalCenter
    text: "饱和度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: slider1.bottom
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        bc.contrast = value
    }
}

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

BrightnessContrast {
    id: bc
    //必须填充到item中，如果填充到img会导致scale失效
    anchors.fill: item
    source: img

    //亮度0-1
    brightness: 0.5
    //饱和度0-1
    contrast: 0.5
}

44、Colorize：着色HSL

Colorize {
    id: colorize
    anchors.fill: item
    //设置要调整的图片
    source: img

    //色调，hue值的范围0-1
    hue: 0.0

    //饱和度，saturation值的范围0-1
    saturation: 0.0

    //亮度，lightness的值范围-1到1
    lightness: 0.0
}

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

Text {
    id: text1
    anchors.right: slider1.left
    anchors.verticalCenter: slider1.verticalCenter
    text: "色调"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider1
    anchors.horizontalCenter: parent.horizontalCenter
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        colorize.hue = value
    }
}

Text {
    id: text2
    anchors.right: slider2.left
    anchors.verticalCenter: slider2.verticalCenter
    text: "饱和度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: slider1.bottom
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        colorize.saturation = value
    }
}

Text {
    id: text3
    anchors.right: slider3.left
    anchors.verticalCenter: slider3.verticalCenter
    text: "亮度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider3
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: slider2.bottom
    width: 400
    height: 30

    //value的范围
    from: -1
    to: 1

    //监听value的变化
    onValueChanged: {
        colorize.lightness = value
    }
}

45、Desaturate：饱和度

Desaturate {
    id: desaturate
    anchors.fill: item
    source: img

    //饱和度范围0-1
    desaturation: 0
}

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

Text {
    id: text1
    anchors.right: slider1.left
    anchors.verticalCenter: slider1.verticalCenter
    text: "饱和度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider1
    anchors.horizontalCenter: parent.horizontalCenter
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        desaturate.desaturation = value
    }
}

46、GammaAdjust：伽马矫正

GammaAdjust根据预定义的幂律曲线应用于每个像素，其中gamma属性被用作缩放指数的倒数。更多细节请参阅gamma属性的文档说明。

注：在QML的GammaAdjust元素中，该处理实质是通过公式output = input ^ (1.0 / gamma)实现伽马校正，gamma属性控制着输入像素值的非线性变换强度。

GammaAdjust {
    id: gammaAdjust
    anchors.fill: item
    source: img

    //值从0-1
    gamma: 0
}

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

Text {
    id: text1
    anchors.right: slider1.left
    anchors.verticalCenter: slider1.verticalCenter
    text: "饱和度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider1
    anchors.horizontalCenter: parent.horizontalCenter
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        gammaAdjust.gamma = value
    }
}

47、HueSaturation：着色HSL叠加

HueSaturation {
    id: hueSaturation
    anchors.fill: item
    source: img

    //从图片本身有的值进行叠加，范围-1到1
    hue: -0.3
    saturation: -0.3
    lightness: -0.3
}

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

Text {
    id: text1
    anchors.right: slider1.left
    anchors.verticalCenter: slider1.verticalCenter
    text: "色调"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider1
    anchors.horizontalCenter: parent.horizontalCenter
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        hueSaturation.hue = value
    }
}

Text {
    id: text2
    anchors.right: slider2.left
    anchors.verticalCenter: slider2.verticalCenter
    text: "饱和度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: slider1.bottom
    width: 400
    height: 30

    //value的范围
    from: 0
    to: 1

    //监听value的变化
    onValueChanged: {
        hueSaturation.saturation = value
    }
}

Text {
    id: text3
    anchors.right: slider3.left
    anchors.verticalCenter: slider3.verticalCenter
    text: "亮度"
    color: "red"
    font.pixelSize: 20
}

Slider {
    id: slider3
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: slider2.bottom
    width: 400
    height: 30

    //value的范围
    from: -1
    to: 1

    //监听value的变化
    onValueChanged: {
        hueSaturation.lightness = value
    }
}

48、FastBlur：快速模糊

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

FastBlur {
    anchors.fill: item
    source: img
    //模糊半径
    radius: 32
}

49、GaussianBlur： 高斯模糊

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

GaussianBlur {
    anchors.fill: item
    source: img
    //模糊半径
    radius: 32
}

50、RecursiveBlur：递归模糊

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

//递归模糊
RecursiveBlur {
    anchors.fill: item
    source: img
    //模糊半径，最大值为16
    radius: 16

    //递归次数
    loops: 10
}

51、MaskedBlur：遮罩模糊

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

LinearGradient {
    id: mask
    anchors.fill: img

    gradient:  Gradient {
        GradientStop {
          position: 0.0
          color: "#00000000"
        }
        GradientStop {
          position: 1.0
          color: "#FF000000"
        }
    }

}

MaskedBlur {
    anchors.fill: item
    source: img

    //设置遮罩层，用渐变来代替，透明度越低模糊越低，若透明度越高则模糊越高
    maskSource: mask

    //模糊半径
    radius: 15
}

52、DirectionalBlur：路径模糊

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

DirectionalBlur {
    anchors.fill: item
    source: img

    //每个像素移动的感知量
    length: 32
    //采样
    samples: 32
    //角度
    angle: 45
}

53、RadialBlur：镜像模糊

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

RadialBlur {
    anchors.fill: item
    source: img

    //采样
    samples: 32
    //角度
    angle: 45
}

54、ZoomBlur：缩放模糊

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

ZoomBlur {
    anchors.fill: item
    source: img

    //每个像素移动的感知量
    length: 32
    //采样
    samples: 32
}

55、ColorOverlay：颜色叠加

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0.1
    source: "/img/img/apple.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

ColorOverlay {
    anchors.fill: item
    source: img
    // color: "#Ff1200"
    color: "#50Ff1200" //前两位数表示透明度
}

56、Blend：图片叠加

Image {
    id: img
    // anchors.centerIn: parent
    scale: 0
    source: "/img/img/apple.png"
}
Image {
    id: img2
    // anchors.centerIn: parent
    scale: 0
    source: "/img/img/Snipaste_2024-11-06_17-37-32.png"
}

Item {
    id: item
    width: 400
    height: 400
    anchors.centerIn: parent
}

Blend {
    anchors.fill: item
    source: img

    //img2叠加到img上
    foregroundSource: img2

    //混合模式，查文档可知
    mode: "average"
}

57、DropShadow：投影

Rectangle {
    id: rect
    width: 200
    height: 50
    anchors.centerIn: parent
}

//投影
DropShadow {
    anchors.fill: rect
    source: rect

    // 水平偏移和垂直偏移
    horizontalOffset: 10
    verticalOffset: 10

    //模糊半径
    radius: 10

    //采样：通常是radius的两倍
    samples: radius * 2

    //透明边框，让边缘过渡没有那么生硬
    transparentBorder: true
}

58、InnerShadow：内阴影

Rectangle {
    id: rect
    width: 200
    height: 50
    anchors.centerIn: parent
}

//投影
InnerShadow {
    anchors.fill: rect
    source: rect

    // 水平偏移和垂直偏移
    horizontalOffset: -10
    verticalOffset: -10

    //模糊半径
    radius: 10

    //采样：通常是radius的两倍
    samples: radius * 2
}

59、Glow：发光

Rectangle {
    id: rect
    width: 200
    height: 50
    anchors.centerIn: parent
}

Glow {
    anchors.fill: rect
    source: rect

    //发光颜色
    color: "green"

    //发光往外延伸的半径
    radius: 10

    //采样，通常为radius * 2
    samples: radius * 2
}

60、RectangleGlow：内发光

Rectangle {
    id: rect
    width: 200
    height: 50
    anchors.centerIn: parent
}

RectangularGlow {
    anchors.fill: rect

    color: "red"

    //发光半径
    glowRadius: 10

    //发光圆角，通常为填充矩形的高度和宽度中的最小值除2加发光半径
    cornerRadius: Math.min(rect.width, rect.height) / 2 + glowRadius
}

61、ListView：视图、代理、模型

视图：listview

代理：定义视图中的每一条数据该长什么样子

模型：代指数据：listmode

//定义模型
ListModel {
    id: listModel

    //定义模型数据，属性名称：属性值
    ListElement {
        name: "张三"
        age: 15
    }
    ListElement {
        name: "张三A"
        age: 15
    }
    ListElement {
        name: "王三B"
        age: 15
    }
    ListElement {
        name: "王三C"
        age: 15
    }
    ListElement {
        name: "张三D"
        age: 15
    }
    ListElement {
        name: "王三E"
        age: 15
    }
    ListElement {
        name: "张三F"
        age: 15
    }
    ListElement {
        name: "李三G"
        age: 15
    }
    ListElement {
        name: "李三H"
        age: 15
    }
    ListElement {
        name: "李三I"
        age: 15
    }
}

ListView {
    id: listview
    anchors.fill: parent
    anchors.rightMargin: 200

    //模型
    // model: ["A", "B", "C"]
    model: listModel

    //代理
    delegate: Item {
        width: listview.width
        height: 50

        Rectangle {
            id: leftRect
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width / 2 - 5
            color: "red"
            border.color: "yellow"
            border.width: 1

            //用text显示模型
            Text {
                anchors.centerIn: parent
                font.pixelSize: 30
                //获取模型的数据，modelData无法通过代码补全和官方文档查询，但实际存在
                //并且只有model为原始的字符串数组modelDate才会生效
                //使用listmode时，modelDate会不定义，若想要显示数据，则直接写listelement的属性名称，多个属性可以加号连接
                text: name
            }
        }

        Rectangle {
            id: rightRect
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width / 2 - 5
            color: "red"
            border.color: "yellow"
            border.width: 1

            //用text显示模型
            Text {
                anchors.centerIn: parent
                font.pixelSize: 30
                //获取模型的数据，modelData无法通过代码补全和官方文档查询，但实际存在
                //并且只有model为原始的字符串数组modelDate才会生效
                //使用listmode时，modelDate会不定义，若想要显示数据，则直接写listelement的属性名称，多个属性可以加号连接
                text: age
            }
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                //将鼠标 所在代理的行索引 赋值给 视图当前索引
                listview.currentIndex = index
                //将name和age传递给高光代理
                listview.highlightItem.setText(name, age)
            }
        }
    }

    //表头
    header: Item {
        width: listview.width
        height: 50
        z: 3//设置层级避免滚动时，代理覆盖表头

        Rectangle {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width / 2 - 5
            color: "green"

            Text {
                anchors.centerIn: parent
                font.pixelSize: 30
                text: "姓名"
            }
        }

        Rectangle {
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width / 2 - 5
            color: "green"

            Text {
                anchors.centerIn: parent
                font.pixelSize: 30
                text: "年龄"
            }
        }
    }

    //设置表头位置，默认是第一行，OverlayHeader表示第一行并固定，更多请查看文档
    headerPositioning: ListView.OverlayHeader

    //表尾
    footer: Rectangle {
        width: listview.width
        height: 50
        color: "pink"
        z: 3//设置层级避免滚动时，代理覆盖表尾

        Text {
            anchors.centerIn: parent
            font.pixelSize: 30
            text: "表尾"
        }
    }

    //设置表尾位置，默认是最后一行，overlayFooter表示最后一行并固定，更多请查看文档
    footerPositioning: ListView.OverlayFooter

    //文本高亮，也属于代理的一种
    highlight: Item {
        width: listview.width
        height: 50
        z: 2 //delegate的层级为1，highlight的层级为0，必须比代理的层级高，否则，高亮会被代理覆盖

        //非delegate属性无法访问model，所以需要脚本传递
        function setText(name, age) {
            nameHighlightText.text = name
            ageHighlightText.text = age
        }

        Rectangle {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width / 2 - 5
            color: "cyan"

            Text {
                id: nameHighlightText
                anchors.centerIn: parent
                font.pixelSize: 30
            }
        }

        Rectangle {
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width / 2 - 5
            color: "cyan"

            Text {
                id: ageHighlightText
                anchors.centerIn: parent
                font.pixelSize: 30
            }
        }
    }

    //设置高光的移动速度
    highlightMoveDuration: 200

    //每条数据的间隔
    spacing: 10

    //添加代理时的动画，使用头插法时，使用addDisplaced过渡才生效
    add: Transition {
        NumberAnimation {
            //y轴发生改变时
            properties: "y"
            duration: 300
        }
    }

    //旧元素移动的过渡动画
    addDisplaced: Transition {
        NumberAnimation {
            //y轴发生改变时
            properties: "y"
            duration: 300
        }
    }

    //删除的过渡动画
    remove: Transition {
        NumberAnimation {
            //元素被移除时，透明度缓慢过渡
            properties: "opacity"
            from: 1
            to: 0
            duration: 300
        }
    }

    //给数据分区
    section {
        //需要分区的属性
        property: "name"

        //分区的依据，FirstCharacter根据首个字符，FullString根据整个字符
        criteria: ViewSection.FirstCharacter

        //分区显示的样式
        delegate: Rectangle {
            width: 50
            height: width
            radius: width / 2

            Text {
                anchors.centerIn: parent
                //section为内置属性，根据criteria显示
                text: section
            }
        }

        //代理的显示位置，CurrentLabelAtStart为显示在开头，其余根据文档查看
        labelPositioning: ViewSection.CurrentLabelAtStart
    }
}

Column {
    spacing: 10
    anchors.right: parent.right

    Button {
        text: "添加一条数据 "
        onClicked: {
            //count表示listview的数据总数
            listModel.append({name: "王五" + listview.count, age :16})
            //将滚动条移动到末尾
            listview.positionViewAtEnd()
        }
    }
    Button {
        text: "删除一条数据 "
        onClicked: {
            //传入删除索引，索引从0开始
            listModel.remove(listview.count - 1)
        }
    }
}

cacheBuffer: int – 为了节省内存，超出视图范围的数据是不渲染的，通过设置缓存n条数据到内存，可以优化滚动性能

62、布局系统

62.1、Row：行布局

Row {
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "green"
    }

    Rectangle {
        id: rect3
        width: 100
        height: 100
        color: "cyan"
    }

    //间隔
    spacing: 10

    //排列方向，Qt.LeftToRight从左到右，Qt.RightToLeft从右到左
    layoutDirection : Qt.RightToLeft

    anchors.centerIn: parent

    //上内边距，同理还有左右下内边距
    topPadding: 300
}

62.2、Column：列布局

Column {
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "green"
    }

    Rectangle {
        id: rect3
        width: 100
        height: 100
        color: "cyan"
    }

    //间隔
    spacing: 10

    anchors.centerIn: parent
}

62.3、Grid：网格布局

Grid {
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "green"
    }

    Rectangle {
        id: rect3
        width: 100
        height: 100
        color: "cyan"
    }

    //间隔
    spacing: 10

    //列数
    columns: 2

    //行数
    rows: 2

    //排列顺序，详细可查文档
    flow: Grid.TopToBottom

    anchors.centerIn: parent
}

62.4、RowLayout：适应窗口的行布局

RowLayout {
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "green"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rect3
        width: 100
        height: 100
        color: "cyan"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rect4
        width: 100
        height: 100
        color: "pink"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    //间隔
    spacing: 10

    anchors.fill: parent
    // anchors.centerIn: parent
}

62.5、ColumnLayout：适应窗口的列布局

ColumnLayout {
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "green"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rect3
        width: 100
        height: 100
        color: "cyan"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rect4
        width: 100
        height: 100
        color: "pink"

        //最小宽高为50
        Layout.minimumHeight: 50
        Layout.minimumWidth: 50
        //始终填满layout
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    //间隔
    spacing: 10

    anchors.fill: parent
    // anchors.centerIn: parent
}

62.6、GridLayout：适应窗口的网格布局

GridLayout {
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"

        //不填满，在每个分区对齐布局，多个布局用 | 符号连接
        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

        // //最小宽高为50
        // Layout.minimumHeight: 50
        // Layout.minimumWidth: 50
        // //始终填满layout
        // Layout.fillHeight: true
        // Layout.fillWidth: true
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "green"

        //不填满，在每个分区对齐布局，多个布局用 | 符号连接
        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

        // //最小宽高为50
        // Layout.minimumHeight: 50
        // Layout.minimumWidth: 50
        // //始终填满layout
        // Layout.fillHeight: true
        // Layout.fillWidth: true
    }

    Rectangle {
        id: rect3
        width: 100
        height: 100
        color: "cyan"

        //不填满，在每个分区对齐布局，多个布局用 | 符号连接
        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

        // //最小宽高为50
        // Layout.minimumHeight: 50
        // Layout.minimumWidth: 50
        // //始终填满layout
        // Layout.fillHeight: true
        // Layout.fillWidth: true
    }

    Rectangle {
        id: rect4
        width: 100
        height: 100
        color: "pink"

        //不填满，在每个分区对齐布局，多个布局用 | 符号连接
        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

        // //最小宽高为50
        // Layout.minimumHeight: 50
        // Layout.minimumWidth: 50
        // //始终填满layout
        // Layout.fillHeight: true
        // Layout.fillWidth: true
    }

    //行间隔
    rowSpacing: 10
    //列间隔
    columnSpacing: 10

    columns: 2

    anchors.fill: parent
    // anchors.centerIn: parent
}

63、自定义控件

自定义控件的文件名首字母必须大写

main.qml

//不同级的文件需要手动引入
import "./controls"

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "gray"

    Row {
        //同级目录下可以直接使用
        MyButton {
            //可以修改自定义控件内的属性
            width: 100
            height: 40
        }

        MyRect {
            width: 100
            height: 30
        }
    }
}

MyButton.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    width: 100
    height: 100

    background: Rectangle {
        anchors.fill: parent
        color: "green"
        radius: 10

        MouseArea {
            hoverEnabled: true
            anchors.fill: parent

            onEntered: {
                parent.color = "red"
            }

            onExited: {
                parent.color = "green"
            }

            onClicked: {
                console.log("click this button")
            }
        }
    }
}

controls/MyrRect.qml

import QtQuick 2.15

Rectangle {
    width: 100
    height: 100
    color: "pink"
}

64、C++访问qml控件

64.1、访问window根节点控件

注意导入：QQmlProperty

#include <QGuiApplication>
#include <QQmlApplicationEngine>
//访问属性需要导入
#include <QQmlProperty>

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreated,
        &app,
        [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        },
        Qt::QueuedConnection);
    engine.load(url);

    //rootObjects()考虑了有多个根节点的情况，所以返回值是objectlist，需要获取第一个元素
    QObject* obj = engine.rootObjects().first();

    //改变obj（window）中的title属性
    QQmlProperty(obj, "title").write("hello window");
    //改变obj（window）中的width属性
    QQmlProperty(obj, "width").write(1200);

    return app.exec();
}

64.2、访问子控件

//寻找window的子控件，findChild需要指定模板为QObect*，传入控件的objectName
QObject* rect = obj->findChild<QObject*>("rect");

//改变rect（Rectangle）中的color属性
QQmlProperty(rect, "color").write("yellow");

子控件Rectangle需要给定objectName属性值

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "gray"

    Rectangle {
        //需要给定类名才能被c++访问
        objectName: "rect"
        width: 300
        height: 300
        color: "red"
        anchors.centerIn: parent
    }
}

64.3、访问信号

//调用obj（window）的信号sig
QMetaObject::invokeMethod(obj, "sig");

qml声明并绑定信号

//声明信号
signal sig()
//绑定信号
onSig: {
    console.log("sig is triggered")
}

64.4、信号或函数传参以及返回值

//调用obj（window）的函数sig
QVariant ret;

//Q_RETURN_ARG用来接收返回值，Q_ARG用来传参给testArg，因为在js语法中，参数类型是弱类型，所以需要使用QVariant
QMetaObject::invokeMethod(obj, "testArg", Q_RETURN_ARG(QVariant, ret), Q_ARG(QVariant, "testtesttesttesttest"));

qDebug() << "testArg return: " << ret;

qml定义函数

//定义函数
function testArg(arg) {
    console.log("this arg is: ", arg)
    return "received"
}

64.5、qml信号连接c++槽

新建testQmlSignal类，继承Object，创建槽函数testSlot

public slots:
    void testSlot();

void testQmlSignal::testSlot() {
    qDebug() << "hello world";
}

连接信号与槽

testQmlSignal* test = new testQmlSignal;

//连接信号和槽
QObject::connect(obj, SIGNAL(sig()), test, SLOT(testSlot()));

//触发信号
QMetaObject::invokeMethod(obj, "sig");

65、qml访问c++类的属性和方法

65.1 属性

需要包含QQmlContext头文件

#include <QQmlContext> 
//注册属性globalProperty表示属性名称，123test123test123test是属性值
engine.rootContext()->setContextProperty("globalProperty", "123test123test123test");

qml中text显示

Rectangle {
    //需要给定类名才能被c++访问
    objectName: "rect"
    width: 300
    height: 300
    color: "red"
    anchors.centerIn: parent

    Text {
        text: globalProperty
    }
}

65.2 方法

声明属性和方法

public:
    explicit testQmlSignal(QObject* parent = nullptr);
   	
	//Q_INVOKABLE是为了让qml能够访问该方法
    Q_INVOKABLE int getPro1() const;
    Q_INVOKABLE void setPro1(int newPro1);
    
    Q_INVOKABLE int getPro2() const;
    Q_INVOKABLE void setPro2(int newPro2);
    
public slots:
    void testSlot();
    
signals:
    void pro1Changed();
    
    void pro2Changed();
    
private:
    int pro1 = 10;
    int pro2 = 20;
    
	//指定获取和写入pro1和pro2的方法名，当属性值改变时触发信号
    Q_PROPERTY(int pro1 READ getPro1 WRITE setPro1 NOTIFY pro1Changed FINAL)
    Q_PROPERTY(int pro2 READ getPro2 WRITE setPro2 NOTIFY pro2Changed FINAL)

方法实现

int testQmlSignal::getPro2() const
{
    return pro2;
}

void testQmlSignal::setPro2(int newPro2)
{
    if (pro2 == newPro2)
        return;
    pro2 = newPro2;
    emit pro2Changed();
}

int testQmlSignal::getPro1() const
{
    return pro1;
}

void testQmlSignal::setPro1(int newPro1)
{
    if (pro1 == newPro1)
        return;
    pro1 = newPro1;
    emit pro1Changed();
}

注册成qml控件，需要在引擎加载之前注册

//将testQmlSignal注册成控件并导入qml文件
//参数1表示导入时的名称
//参数2表示版本号
//参数3表示子版本号
//参数4表示控件名，首字母必须大写
qmlRegisterType<testQmlSignal>("TestQmlSignal", 1, 0, "TestQmlSignal");

engine.load(url);

qml中使用

import TestQmlSignal 1.0

Rectangle {
    //需要给定类名才能被c++访问
    objectName: "rect"
    width: 300
    height: 300
    color: "red"
    anchors.centerIn: parent

    Text {
        //直接写属性名或调用方法
        text: test.pro1
        // text: test.getPro1() //此方法不能获取改变后的pro1值

        Component.onCompleted: {
            //修改pro1的值
            test.setPro1(1000)
        }
    }
}

TestQmlSignal {
    id: test
}

66、WorkScript多线程异步处理数据

qml实现

//js脚本
WorkerScript {
    id: worker
    source: "qrc:/worker.js"
}

// 定时器
Timer {
    interval: 1//间隔1ms
    repeat: true//循环
    running: true//默认开启
    onTriggered: {
        //发送listmodel到worker.js中
        worker.sendMessage(listModel)
    }
}

ListModel {
    id: listModel
    Component.onCompleted: {
        for (let i = 0; i < 1000; i++) {
            listModel.append({val1: 0.1, val2: 0.2, val3: 0.3, val4: 0.4, val5: 0.5})
        }
    }
}

ListView {
    anchors.fill: parent

    id: listView
    model: listModel

    delegate: Rectangle {
        width: listView.width
        height: 40
        // color: "white"

        Grid {
            anchors.fill: parent
            columns: 5
            columnSpacing: 2

            Rectangle {
                width: parent.width / 5
                height: parent.height
                border.width: 1
                border.color: "cyan"

                Text {
                    text: val1
                    font.pixelSize: 15
                    anchors.centerIn: parent
                }
            }
            Rectangle {
                width: parent.width / 5
                height: parent.height
                border.width: 1
                border.color: "cyan"

                Text {
                    text: val2
                    font.pixelSize: 15
                    anchors.centerIn: parent
                }
            }
            Rectangle {
                width: parent.width / 5
                height: parent.height
                border.width: 1
                border.color: "cyan"

                Text {
                    text: val3
                    font.pixelSize: 15
                    anchors.centerIn: parent
                }
            }
            Rectangle {
                width: parent.width / 5
                height: parent.height
                border.width: 1
                border.color: "cyan"

                Text {
                    text: val4
                    font.pixelSize: 15
                    anchors.centerIn: parent
                }
            }
            Rectangle {
                width: parent.width / 5
                height: parent.height
                border.width: 1
                border.color: "cyan"

                Text {
                    text: val5
                    font.pixelSize: 15
                    anchors.centerIn: parent
                }
            }
        }
    }

    header: Rectangle {
        id: headerRect
        width: parent.width
        height: 40

        Grid {
            anchors.fill: parent
            columns: 5
            columnSpacing: 2

            Repeater {
                model: ["val1", "val2", "val3", "val4", "val5"]

                delegate: Rectangle {
                    width: headerRect.width / 5
                    height: headerRect.height
                    color: "cyan"

                    Text {
                        anchors.centerIn: parent
                        text: modelData
                    }
                }
            }
        }
    }
}

workscript的source实现

WorkerScript.onMessage = function func(msg) {
    let listModel = msg

    for (let i = 0; i < listModel.count; i++) {
        let data = listModel.get(i)
        listModel.set(i, {val1: data.val1 + 0.001, val2: data.val2 + 0.001, val3: data.val3 + 0.001, val4: data.val4 + 0.001, val5: data.val5 + 0.001})
    }

    //sync函数仅在WorkerScript中生效，没有sync则timer也不生效
    listModel.sync()
}

多线程异步

非多线程异步

67、MouseArea鼠标穿透

一次只能传递一层

MouseArea {
    anchors.fill: parent
    onClicked: {
        console.log("window MouseArea")
    }
}

Rectangle {
    width: 100
    height: 100
    anchors.centerIn: parent
    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("first Rect")
        }
    }
}

Rectangle {
    width: 100
    height: 100
    anchors.centerIn: parent
    MouseArea {
        anchors.fill: parent
        //将信号传递给下一层控件，propagateComposedEvents，mouse.accepted
        propagateComposedEvents: true
        onClicked: {
            console.log("second Rect")
            mouse.accepted = false
        }
    }
}

点击事件的信号从second Rect穿透到了first Rect，由于只传递了一层，所以window MouseArea没有生效

68、Flickable与Scrollbar：使区域可滚动

Flickable {
    id: flickId
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: tileSplitLine.bottom
    anchors.bottom: parent.bottom
    anchors.topMargin: 10

    clip: true
    //内容高度
    contentHeight: 4800
    //重写垂直滚动条样式
    ScrollBar.vertical: ScrollBar {
        //滚动条位置
        anchors.right: parent.right
        anchors.rightMargin: 5
        //滚动条宽度
        width: 10
        //滚动条形状自定义
        contentItem: Rectangle {
            //是否显示滚动条依据父控件是否活动
            visible: parent.active
            implicitWidth: 10
            radius: 4
            color: "#42424b"
        }
    }
}

69、Repeater：单个控件多次重复

Repeater {
    id: selectorRep
    anchors.fill: parent
    model: ["账号","常规","系统","播放","消息与隐私","快捷键","音质与下载","桌面歌词","工具","关于云音乐"]
    

    delegate: Item {
        //代理样式省略……
    }
}

当model为单属性列表时可以通过modelData访问数据，以及通过index访问当前model值

70、qml自定义信号

定义信号，单独文件

QtObject {
    signal openLoginPopup() //打开登录弹窗
    
    //带参数信号
    signal clickedButton(int idx)
}

连接信号

Connections {
    target: BasicConfig
    //触发信号时的处理函数，on + 信号名
    function onOpenLoginPopup() {
        loginPopup.open()
    }
    
    //带参信号处理函数(无参信号处理函数也可以这么写)
    onClickedButton: (idx) => {
		console.log("clicked button", idx)
    }
}

71、Canvas：画图控件

Canvas {
    id: triangle
    width: backImgMaskSrc.width + 12
    height: backImgMaskSrc.height + 12
    contextType: "2d"

    onPaint: {
        let size = 5
        context.lineWidth = 0 //线的宽度
        context.strokeStyle = "#00000000"//画笔颜色
        // context.fillStyle = popupOtherBg.color//填充颜色
        context.fillStyle = "red"
        context.beginPath() //开始画图
        context.moveTo(triangle.x, triangle.y + triangle.height) //移动位置
        context.lineTo(triangle.x + triangle.width, triangle.y) //画线结束位置
        context.lineTo(triangle.x + triangle.width, triangle.y + triangle.height) //画线结束位置
        context.closePath() //结束画图
        context.fill()
        context.stroke()
    }
}

---

72、StackView：多页面切换和返回上一个页面

// 存储页面，可以前后切换
StackView {
    id: mainStakView
    anchors.top: title.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 100
    clip: true

    //初始界面
    initialItem: "qrc:/src/rightPage/stakPages/CherryPick.qml"
}

重要：以stakview显示的页面都会沿用其设置的大小，所以子页面的根节点无需设置大小

73、ComboBox：下拉单选框

ComboBox {
    id: fontSelectorCbx
    width: 150
    height: 30
    
    //显示文字
    property string text: currentText 
    //currentText为ComboBox自带的只读属性，不可修改，显示当前文字，默认是model的第一个元素
    
    //下拉框选项内容
    model: ["默认","仿宋","华文中宋","华文仿宋","华文宋体","华文新魏","华文楷体","华文细黑","华文行书"
        ,"华文楷书","宋体","幼圆","微软雅黑","微软雅黑 Light","新宋体","方正姚体","方正舒体"]
    property int indicatorRotation: 90

    //自定义背景
    background: Rectangle {
		//省略……
    }

    //自定义下拉指示器
    indicator: Label {
        //省略……
    }

    //自定义下拉内容字体
    contentItem: Text {
        text: fontSelectorCbx.text
        //省略……
    }
    
    //自定义下拉框样式
    popup: Popup {
    	//省略……
    }
}

注意：自定义字体样式时，注意text属性指向comboBox的自定义text

---

74、进阶自定义组件

74.1、窗体拖拽

MouseArea {
    anchors.fill: parent
    property point clickPos: "0, 0"
    onPressed: function(mouse) {
        clickPos = Qt.point(mouse.x, mouse.y)
        console.log(clickPos)
    }

    onPositionChanged: function(mouse) {
        console.log("window: ", window.x, window.y)
        //计算鼠标当前位置和点击位置的差值
        let delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)

        //将当前窗口所在屏幕的位置移动delta
        window.x += delta.x
        window.y += delta.y
    }
}

74.2、字体分割+字体渐变

//包裹整个文字的大Item
Item {
    width: previewText1.width
    height: previewText1.font.pixelSize + 1
    anchors.centerIn: parent
	
    //左Item，裁切右部分文字
    Item {
        anchors {
            left: parent.left
            top: parent.top
            bottom: parent.bottom
        }
        width: parent.width / 2
        clip: true

        Label {
            id: previewText1
            anchors {
                left: parent.left // 可有可无，默认从左到右
                verticalCenter: parent.verticalCenter
            }
            text: "云音乐"
            font.family: BasicConfig.fontFamily
            font.pixelSize: 64
            //设置文字边框
            style: Text.Outline
            styleColor: BasicConfig.finishedLyricsBorderColor
        }
		
        //创建不设置边框的label覆盖在边框label上，不设置边框的label比设置边框的label小
        //如果直接把渐变设置在大label上会导致边框被渐变覆盖
        //给小label设置渐变，能达到既有渐变也有边框的效果
        Label {
            anchors.fill: previewText1
            text: previewText1.text
            font: previewText1.font
			
            //给小label设置文字渐变
            LinearGradient {
                anchors.fill: parent
                source: parent
                start: Qt.point(parent.width, 0)
                end: Qt.point(parent.width, parent.height)
                gradient: Gradient{
                    GradientStop { position: 0; color: BasicConfig.finishedLyricsDownColor }
                    GradientStop { position: 1; color: BasicConfig.finishedLyricsUpColor }
                }
            }
        }
    }
	
    //右Item，裁切左部分文字
    Item {
        anchors {
            right: parent.right
            top: parent.top
            bottom: parent.bottom
        }
        width: parent.width / 2
        clip: true

        Label {
            id: previewText2
            anchors { //关键步骤，如果不对其右边，会导致默认排列方向是从左到右，从而裁切了右部分文字
                right: parent.right //对齐右边，就可以让排列方向为从右到左，这样就可以裁切左部分文字
                verticalCenter: parent.verticalCenter
            }
            text: "云音乐"
            font.family: BasicConfig.fontFamily
            font.pixelSize: 64
            style: Text.Outline
            styleColor: BasicConfig.unFinishedLyricsBorderColor
        }

        Label {
            anchors.fill: previewText2
            text: previewText2.text
            font: previewText2.font

            LinearGradient {
                anchors.fill: parent
                source: parent
                start: Qt.point(parent.width, 0)
                end: Qt.point(parent.width, parent.height)
                gradient: Gradient{
                    GradientStop { position: 0; color: BasicConfig.unFinishedLyricsDownColor }
                    GradientStop { position: 1; color: BasicConfig.unFinishedLyricsUpColor }
                }
            }
        }
    }
}

74.3、轮播图1

Item {
    id: rightCarouselItem
    width: 500
    height: parent.height
    clip: true
    anchors {
        left: parent.left
    }
    property int curImgIndex: 0 //存储当前轮播图片下标
    property int actualCurImgIndex: 0 //存储当前轮播图片实际下标，因为存储了两次，实际下标是当前下标的两倍
	
    //存储轮播图片
    ListModel {
        id: carouselImg
        Component.onCompleted: {
            let s = "qrc:/resources/carouselImg/"
            //顺序存储两次，依次轮转
            for (let i = 1; i <= 8; i++) {
                carouselImg.append({ img: s + `${i}.jpg` })
            }
            for (let i = 1; i <= 8; i++) {
                carouselImg.append({ img: s + `${i}.jpg` })
            }
        }
    }

    Timer {
        id: carouselChange
        repeat: true
        running: true
        interval: 4600
        // interval: 1200
        onTriggered: {
            // 滚动距离为图片宽度加间隔
            let skipXDistance = parent.width + carouselRow.spacing
			
            //如果第一轮图片结束，到了第二轮的首张图片就把前面的所有图片插入尾部，详细看示例图
            if (parent.actualCurImgIndex === carouselImg.count / 2) {
                for (let i = 0; i < carouselImg.count / 2; i++) {
                    let head = 0
                    carouselImg.append(carouselImg.get(head))
                    carouselImg.remove(head)
                }
					
                parent.actualCurImgIndex = 0//实际下标重新初始化
                //如果不return会导致listview没来得及缓冲尾部插入的图片导致滚动距离错误
                //需要等到下一次轮转
                return
            }

            parent.curImgIndex = (parent.curImgIndex + 1) % (carouselImg.count / 2)
            parent.actualCurImgIndex = (parent.actualCurImgIndex + 1) % carouselImg.count
            //console.log(carouselRow.contentX, " + ", skipXDistance)
            carouselRow.contentX += skipXDistance
        }
    }

    ListView {
        id: carouselRow
        orientation: ListView.Horizontal
        width: parent.width
        height: parent.height
        spacing: 20
        enabled: false //禁止滑动
        model: carouselImg
		
        // 轮转动画，当横轴移动时
        Behavior on contentX {
            id: behaviorX
            NumberAnimation {
                duration: 350
            }
        }

        delegate: Rectangle {
            id: imgEle
            height: carouselRow.height
            width: carouselRow.width
            radius: 15
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop{ color: "#440096F2"; position: 0 }
                GradientStop{ color: "#66CA2F45"; position: 1 }
            }

            Image {
                width: height
                height: parent.height
                anchors.horizontalCenter: parent.horizontalCenter
                source: img
            }

            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true

                onEntered: {
                    parent.opacity = 0.7
                }

                onExited: {
                    parent.opacity = 1
                }
            }
        }
    }

    //轮播指示器
    Row {
        anchors {
            horizontalCenter: parent.horizontalCenter
            left: parent.left
            leftMargin: 10
            bottom: parent.bottom
            bottomMargin: 10
        }

        Repeater {
            model: carouselImg.count / 2

            delegate: Item {
                width: 17
                height: 10

                Rectangle {
                    anchors.centerIn: parent
                    width: 8
                    height: width
                    radius: width / 2
                    color: rightCarouselItem.curImgIndex === index ? "white" : "#55808080"
                }

                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    hoverEnabled: true

                    onEntered: {
                        carouselChange.stop()
                        let skipXDistance = carouselRow.width + carouselRow.spacing
                        if (index > rightCarouselItem.curImgIndex) {
                            carouselRow.contentX += (index - rightCarouselItem.curImgIndex) * skipXDistance
                        }
                        else {
                            carouselRow.contentX -= (rightCarouselItem.curImgIndex - index) * skipXDistance
                        }

                        rightCarouselItem.curImgIndex = index
                    }

                    onExited: {
                        carouselChange.start()
                    }
                }
            }
        }
    }
}

74.4、轮播图2

Item {
    id: carouselItem
    anchors {
        left: parent.left
        right: parent.right
        top: titleItem.bottom
        topMargin: 8
        bottom: parent.bottom
    }
    clip: true

    Row {
        ListModel {
            id: carouselImg
            Component.onCompleted: {
                let s = "qrc:/resources/carouselImg2/Cartethyia"
                for (let i = 1; i <= 10; i++) {
                    carouselImg.append({ img: s + `${i}.jpg` })
                }
            }
        }

        ListView {
            id: carouselRow
            model: carouselImg
            spacing: 20
            // enabled: false
            height: carouselItem.height
            width: carouselItem.width
            orientation: ListView.Horizontal

            Behavior on contentX {
                NumberAnimation {
                    duration: 400
                }
            }

            delegate: Rectangle {
                id: bgRect
                width: {
                    let minimumSize = 175
                    let maximumSize = 200
                    for (let i = 5; i <= 10; i++) {
                        let avgWidth = (carouselRow.width - carouselRow.spacing * (i - 1)) / i
                        if (avgWidth >= minimumSize && avgWidth <= maximumSize) {
                            carouselArea.curShowItemCnt = i
                            carouselArea.curShowItemWidth = avgWidth
                            return avgWidth
                        }
                    }

                    carouselArea.curShowItemCnt = 10
                    carouselArea.curShowItemWidth = maximumSize
                    return maximumSize
                }
                height: carouselRow.height
                color: "pink"
                radius: 15
                layer.enabled: true
                layer.effect: OpacityMask {
                    source: bgRect
                    maskSource: Rectangle {
                        width: bgRect.width
                        height: bgRect.height
                        radius: bgRect.radius
                    }
                }

                //封面背景
                Image {
                    id: cover
                    anchors.fill: parent
                    source: img
                }

                //顶部标题
                Rectangle {
                    anchors {
                        left: parent.left
                        right: parent.right
                        top: parent.top
                    }
                    height: 60
                    gradient: Gradient {
                        orientation: Gradient.Vertical
                        GradientStop { color: "#DDCECECE"; position: 0 }
                        GradientStop { color: "#CCCECECE"; position: 0.5 }
                        GradientStop { color: "#00CCCCCC"; position: 1 }
                    }

                    Label {
                        anchors {
                            left: parent.left
                            top: parent.top
                            leftMargin: 10
                            topMargin: 10
                        }
                        text: "卡提西亚"
                        color: "white"
                        font.pixelSize: 21
                        font.family: BasicConfig.fontFamily
                        font.bold: true
                    }
                }

                //底部标题
                Rectangle {
                    id: bottomRect
                    anchors {
                        left: parent.left
                        right: parent.right
                        bottom: parent.bottom
                    }
                    height: 60
                    color: "#C8C8C7"
                }

                //播放按钮
                Item {
                    id: playBtn
                    width: 30
                    height: width
                    anchors {
                        right: parent.right
                        rightMargin: 10
                        bottom: parent.bottom
                        bottomMargin: 20
                    }
                    z: 100
                    opacity: 0

                    Behavior on opacity {
                        NumberAnimation {
                            duration: 100
                        }
                    }

                    Image {
                        anchors.fill: parent
                        source: "qrc:/resources/recommend/play.png"
                    }
                }

                //渐变背景
                Rectangle {
                    id: gradientRect
                    width: parent.width
                    height: parent.height
                    //让渐变背景只显示底部标题文字的部分，5为上下边距
                    y: parent.height - bottomTitle.y - bottomTitle.height + 5

                    Text {
                        id: bottomTitle
                        anchors {
                            bottom: parent.bottom
                            bottomMargin: parent.height * 0.4
                            horizontalCenter: parent.horizontalCenter
                        }
                        height: bottomRect.height
                        width: bottomRect.width - 20
                        text: "悠闲时光 | 樱花雨下的清新歌新歌新歌新歌新歌新歌新歌声"
                        font.family: BasicConfig.fontFamily
                        font.pixelSize: 18
                        color: "white"
                        wrapMode: Text.Wrap
                        elide: Text.ElideRight
                    }

                    //前三首预览
                    Item {
                        id: songsItem
                        anchors {
                            left: bottomTitle.left
                            right: bottomTitle.right
                            top: bottomTitle.bottom
                        }
                        height: songsCol.height

                        Column {
                            id: songsCol
                            anchors {
                                left: parent.left
                            }
                            spacing: 12

                            Repeater {
                                model: ["花日", "K-Pop x Funk Type Beat\"Pearl\"", "盛夏派对 wait a sec."]

                                delegate: Row {
                                    spacing: 5
                                    Label {
                                        id: rankText
                                        anchors.verticalCenter: parent.verticalCenter
                                        text: index + 1
                                        font.pixelSize: 15
                                        font.family: BasicConfig.fontFamily
                                        font.bold: true
                                        color: "#99ffffff"
                                    }

                                    Label {
                                        anchors.verticalCenter: parent.verticalCenter
                                        width: index === 0 ? songsItem.width - rankText.width : (songsItem.width - rankText.width) * 0.6
                                        text: modelData
                                        maximumLineCount: 1
                                        elide: Text.ElideRight
                                        font.pixelSize: 15
                                        font.family: BasicConfig.fontFamily
                                        color: "#DDffffff"
                                    }
                                }
                            }
                        }
                    }

                    Behavior on y {
                        NumberAnimation {
                            duration: 200
                        }
                    }

                    // color: "red"

                    gradient: Gradient {
                        orientation: Gradient.Vertical
                        GradientStop { color: "#11C8C8C7"; position: 0 }
                        GradientStop { color: "#C8C8C7"; position: 0.5 }
                        GradientStop { color: "#C8C8C7"; position: 1 }
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    hoverEnabled: true

                    onEntered: {
                        gradientRect.y = 0
                        playBtn.opacity = 1
                    }

                    onExited: {
                        gradientRect.y = parent.height - bottomTitle.y - bottomTitle.height + 5
                        playBtn.opacity = 0
                    }
                }
            }
        }
    }
}