Qt Quick QML学习笔记

6.3布局管理
    1.定位器：基本Qt Quick图形元素提供了一组标准的定位器，Column，Row，Grid和Flow
        Column：垂直排列项目
            spacing: 间距
        Row：水平排列项目
            spacing: 间距
        Grid：网格，默认4列，无限多行
            rows：行数
            columns：列数
            spacing: 间距
        Flow：流式排列，自动换行
            flow：流向Flow.LeftToRight(default)Flow.TopToBottom
            
        import QtQuick 2.0
        Grid{
            columns: 3
            spacing: 2
            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { color: "green"; width: 20; height: 50 }
            Rectangle { color: "blue"; width: 50; height: 20 }
            Rectangle { color: "cyan"; width: 50; height: 50 }
            Rectangle { color: "magenta"; width: 10; height: 10 }
        }
        
    2.重复器Repeater
        Repeater: 用来创建大量相似的元素
            model：
            delegate：用来将模型中的每一个条目分别实例化
        import QtQuick 2.0
        Rectangle{
            width: 400; height: 400; color: "black"
            
            Grid{
                x: 5; y: 5
                rows: 5; columns: 5; spacing: 10
                
                Repeater{
                    model: 24
                    Rectangle{
                        width: 70; height: 70
                        color: "lightgreen"
                        
                        Text {
                            text: index
                            font.pointSize: 30
                            anchors.centerIn: parent
                        }
                    }
                }
            }
        }
        
    3.切换：切换可以使在定位器中进行添加，移入或者删除项目时具有动画效果
        定位器都有add和move属性，需要分配一个Transition对象
        Flow{
            id: positioner
            move:Transition{
                NumberAnimation{
                    properties: "x, y"
                    ease: "easeOutBounce"
                }
            }
        }
        
    4.锚(anchor)的布局
        每一个项目无形的锚线：left, horizontalCenter, right, top, verticalCenter, baseline, bottom
        锚边距：rightMargin, topMargin, leftMargin, bottomMargin anchor.margins
        锚偏移：horizontalCenterOffset, verticalCenterOffset, baselineOffset
        baseline: 假想线，文本坐落这条线，如无文本，与top相同
        anchors.fill: 等价于使用了4个直接的锚
        Image {id:pic;...}
        Text {
            id: label
            anchors.horizontalCenter: pic.horizontalCenter
            anchors.top: pic.bottom
            anchors.topMargin: 5
            ...
        }
        
6.4基本可视元素
    1.Item：QML中所有可视项目都继承自Item，定义了可视化项目所有属性
        children: 可见孩子列表
        resources: 不可见资源
        data: 默认属性，可增加可视项目和资源
        opacity：透明度
        z: 堆叠顺序，值越大在越上面
    2.Rectangle：用来使用纯色或渐变填充区域，也经常用来放置其他项目
        color：纯色填充
        gradient: Gradient元素渐变填充
        border.color: 边框颜色
        border.width: 边框宽度
        radius：圆角矩形
    3.Text: 显示纯文本或者富文本
        wrapMode: 设置换行
        elide: 单行，为超出宽度的文本提供...
        font: 设置字体相关属性
        horizontalAlignment: 水平对齐方式
        verticalAlignment: 垂直对齐方式
        style：文本样式
        Text::onLinkActivaed(string link): 单击文本嵌入连接发送信号
    4.TextEdit：显示一块可编辑的，格式化的文本
        focus: 设置焦点
    5.TextInput：显示单行的可编辑的纯文本
        echoMode：可设置输入密码
        validator: 验证器 IntValidator, DoubleValidator, RegExpValidator
        TextInput{
            validator: IntValidator{bottom: 11; top: 31}
        }
        
6.5事件处理
    1.MouseArea：不可见项目，通常和可见项目配合使用来提供鼠标事件处理
        enabled：是否启用鼠标处理
        pressed: 是否在mousearea按住了鼠标按钮
        containsMouse：是否有鼠标光标在MouseArea上
        hoverEnabled: 是否启用鼠标悬停事件处理
        onClicked(),onDoubleClicked(),onPressed(),OnReleased(),onPressAndHold()
        onPositionChanged(),onEntered(),onExited()
        MouseEvent: 很多MouseArea的信号中都包含一个鼠标事件参数
            MouseArea::onClicked(MouseEvent mouse)
                x,y: 鼠标位置
                button: 鼠标按键Qt.LeftButton,Qt.RightButton,Qt.MiddleButton
                modifiers: 组合键
        拖拽：
            drag.target: 拖动项目id
            drag.active：获取项目当前是否正在被拖动的信息
            drag.axis：拖动的方向
            drag.minimumX,drag.minimumY,drag.maximumX,drag.maximumY: 限制拖动距离
    
    2.按键处理：所有基于Item的可见元素都可以通过Keys附加属性进行按键处理
        Keys.onPressed(KeyEvent event)
        Keys.onReleased(KeyEvent event)
        KeyEvent：这些处理器大多包含一个KeyEvent参数，提供该键盘时间的信息
        event.accepted：设置为true防止事件向上层传播
        KeyNavigation附加属性实现导航
        Item::activeFocus: 是否具有活动焦点
        focus: 设置为true来获得焦点
        FocusScope：创建焦点作用域
    
    3.定时器Timer
        interval：时间间隔，单位ms默认1000ms
        repeat：是否重复触发，如果为false，触发一次，running设置为false，默认false
        running：为true时开启定时器，默认false
        onTriggered()：定时器触发时会执行的信号处理函数
        定时器运行过程中属性被更改，时间重置
        
    4.使用Loader动态加载组件
        Loader元素用来动态加载可见的QML组件
            加载QML文件，使用source属性
            加载组件对象，使用sourceComponent属性
        从加载项目中发射信号可以使用Connections元素接收
        Item{
            width：100; height: 100
            Loader{
                id: myLoader
                source: "MyItem.qml"
            }
            Connections{
                target: myLoader.item
                onMessage: console.log(msg)
            }
        }
        
6.6图像、状态和动画
    1.渐变：
        QML使用Gradient项目来定义一个渐变
        渐变中的一组颜色用GradientStop子项目定义
    2.图片Image：用来声明式用户界面中显示图片
        source：URL
        fillMode：填充模式
        asynchronous：加载大图片异步加载
        sourceSize：真实像素数量
    3.边界图片BorderImage：通过缩放或者平铺创建超出图片的边界
        horizontalTileMode：水平缩放模式
        verticalTileMode：垂直缩放模式
        border：边界线
    4.动态图片AnimatedImage
        currentFrame：当前帧
        frameCount：总长度
        playing：开始
        paused：暂停
    5.缩放、旋转和平移
        Item元素
        scale：缩放
        rotation：旋转
        transformOrigin：缩放旋转原点，默认Center
        transform：Transform元素列表
            Rotation
                axis.x:X轴
                axis.y:Y轴
                axis.z:Z轴
                origin.x,origin.y：原点
            Scale
                origin.x,origin.y：原点
                xScale,yScale：比例因子
            Translate
                x,y：偏移量
    6.QML状态：
        states：State状态列表
        State
            PropertyChanges：为其他项目增加附加属性
            when：自动恢复状态
    7.QML动画
        PropertyAnimation on x(动画 on 属性)
            from：起点
            to：终点
            duration：间隔
            loops：循环次数，Animation.Infinite无限循环
        Behavior on x
            行为动画：特定属性值改变时应用的动画
            Behavior on x { PropertyAnimation { duration: 500}}
        onClicked:PropertyAnimation{...}
            在信号处理器中的动画
        独立动画
            默认没有运行，用running属性或start和stop明确运行
    8.切换：状态改变时的动画
        transitions: list[Transition]
    9.属性动画元素：PropertyAnimation子元素
        NumberAnimation
        colorAnimation
        RotationAnimation
        Vector3dAnimation
        SmoothedAnimation
        SpringAnimation
        ParentAnimation
        AnchorAnimation
    10.组合动画
        一旦独立动画放入SequentialAnimation或ParallelAnimation，就不能独立开启或停止
        ParallelAnimation
        SequentialAnimation
            PauseAnimation
    11.弹动效果Flickable元素
        将子项目设置在一个可以拖拽和弹动的界面上，使得子项目视图可以滚动
        clip: true隐藏超出区域的内容
        visibleArea.xPosition: 0.0~1.0-widthRatio
        visibleArea.widthRatio
        visibleArea.yPosition: 0.0~1.0-heightRatio
        visibleArea.heightRatio
    12.翻转效果Flipable元素
        同时使用Rotation，State，Transition等元素产生翻转效果
        Flipable
            front：正面
            back: 反面
            
6.7QML中的模型/视图
    1.ListModel
            ListElement：list项
    2.XmlListModel
        source
        query
        XmlRole
            query:"title/string()" "id/number()" 属性"@type/string()"
    3.VisualItemModel
        允许QML项目作为模型
    4.ListView：水平或垂直列表中排列条目，继承自Flickable项目
        model：指定model
        delegate：委托
        currentIndex：当前选择索引
        index: 索引
        ListView {
        id: view
        width: 180; height: 200
        Component {
            id: contactsDelegate
            Rectangle {
                id: wrapper
                width: 180
                height: contactInfo.height
                color: index % 2 == 0 ? "cyan" : "green";
                Text {
                    id: contactInfo
                    text: name + ": " + number
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: view.currentIndex = index
                }
            }
        }
        model: ListModel {
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
        }
        delegate: contactsDelegate
        focus: true
        }
    5.GridView：排列网格
        cellWidth
        cellHeight
    6.PathView：路径排列
        path
            PathLine,PathQuad,PathCubic
    7.WebView
            url

6.8QML和C++混合编程
    1.QQuickView：widget方式使用QML组件
        Qt4.x是QDeclarativeView
        Qt5.x是QQuickView
            view.setSource(QUrl::fromLocalFile("../application.qml"))
    2.QQmlApplicationEngine：QML引擎提供执行QML代码的环境
        Qt4.x是QDeclarativeEngine
        Qt5.x是QQmlEngine
            engine.load(QUrl(QStringLiteral("qrc:/main.qml")))
    3.QQmlComponent：一个组件封装了一个QML文件
    4.QQmlContext：允许应用程序将数据暴露给由引擎创建的QML组件
    5.从C++加载一个QML组件
        可使用QQmlComponent和QQuickView
        QObject * object = component.create()
        QObject * objcet = view.rootObject()
        读取和修改属性
        object->setProperty("width", 500)
        QQmlProperty(object, "width").write(500)
        QQuickItem * item = qobject_cast<QQuickItem *>(object)
        item->setWidth(500)
        绑定QML信号
        QObjcet::connect(item, SIGNAL(qmlSignal(QString), &myClass, SLOT(cppSlot(QString))));
        object->objectName()
        object->findChild<QObject *>("rect")
    6.在QML组件中嵌入C++对象
        view.rootContext->setContextProperty("data", &data)
        engine.rootContext->setContextProperty("data", &data)
        在QML文件就能直接读取和修改data
        text: data.getName()
        Connections{
            target: data
            //data有一个dataChanged()信号
            onDataChanged:console.log("data changed")
        }
    7.C++中调用QML组件函数
        QMetaObject::invokeMethod(...)
        QObject *object = component.create();
        QVariant returnValue;
        QVariant msg = "Hello from C++"
        QMetaObject::invokeMethod(object, "myQmlFunction",
            Q_RETURN_ARG(QVariant, returnValue),
            Q_ARG(QVariant, msg));
        Q_RETURN_ARG()和Q_ARG()参数必须指定为QVariant类型
    8.定义一个新的QML元素
        可以在QML中进行定义，也可以使用C++类来定义
        当使用C++类定义的元素创建一个QML对象时，就是创建了一个基于QObject的C++类实例并且设置了属性
        定义属性：
        class ImageViewer ：public QObject
        {
            Q_OBJECT
            Q_PROPERTY(QUrl source READ source WRITE setSource NOTIFY sourceChanged)
        public:
            void setSource(const QUrl &url);
            QUrl source() const;
        signals:
            void sourceChanged();
        };
        QML引擎注册：
            qmlRegisterType<ImageViewer>("MyLibrary", 1.0, "ImageViewer");
    9.QML中的全局对象
        帮助搜索Qt
        枚举变量：
            Qt::MouseButton
        类型：
            color,rect,point,size,vector3d
        date/time:
        动态对象创建：

补充：布局管理器
    GridLayout:和Grid定位器相比，可以使用如下附加属性：
        Layout.row
        Layout.column
        Layout.rowSpan
        Layout.columnSpan
        Layout.minimumWidth
        Layout.minimumHeight
        Layout.preferreWidth
        Layout.perferredHeight
        Layout.maximumWidth
        Layout.maximumHeight
        Layout.fillWidth
        Layout.fillHeight
        Layout.alignment
    和Grid定位器相比，GridLayout可以对内部布局进行管理，而Grid只能进行定位，简单就用Grid了
    ColumnLayout和RowLayout是GridLayout的一种特殊情况

    StackLayout

    一次只显示一个子项目，通过currentIndex指定