Rectangle {
    Image {
        source: "3.png";
    }
    BorderImage {
        x:150;
        source: "3.png";
        width: 200; height: 200;
        border.left: 35; border.top: 35;
        border.right: 35; border.bottom: 35;
    }
    BorderImage {
        x:400;
        source: "3.png";
        width: 200; height: 200;
        border.left: 45; border.top: 45;
        border.right: 45; border.bottom: 45;
    }
    BorderImage {
        x:650;
        source: "3.png";
        width: 200; height: 200;
        horizontalTileMode: BorderImage.Repeat
        border.left: 35; border.top: 35;
        border.right: 35; border.bottom: 35;
    }
    BorderImage {
        x:900;
        source: "3.png";
        width: 200; height: 200;
        horizontalTileMode: BorderImage.Round
        border.left: 35; border.top: 35;
        border.right: 35; border.bottom: 35;
    }
}

BorderImage.Stretch - Scales the image to fit to the available area.
BorderImage.Repeat  - Tile the image until there is no more space. May crop the last image.
BorderImage.Round   - Like Repeat, but scales the images down to ensure that the last image is not cropped.

Image.Null       - no image has been set  
Image.Ready    - the image has been loaded  
Image.Loading  - the image is currently being loaded  
Image.Error      - an error occurred while loading the image  

Rectangle {
    width: animation.width;
    height: animation.height + 8;
    color: "black";
    AnimatedImage {
        id: animation;
        source: "4.gif";
    }
    Rectangle {
        // 下句报错"depends on non-NOTIFYable properties:
        //              QQuickAnimatedImage::frameCount"
        // rectangle不显示
//        property int frames: animation.frameCount; // 报错语句
        width: 4; height: 8
//        x: (animation.width - width) * animation.frames / frames;  // 报错语句
        x: (animation.width - width) * animation.currentFrame / animation.frameCount
        y: animation.height
        color: "red"
    }

Rectangle {
    visible: true;
    width: 360;
    height: 320;
    color: "white";
    Image {
        id:image
        source: "./6.png"
        x:350
    }
    AnimatedSprite {
        id: animated;
        width: image.width/3;  // 显示窗口宽度
        height: image.height/2; // 显示窗口高度
        anchors.centerIn: parent;
        source: "6.png";
        frameWidth: image.width/4;
        frameHeight: image.height/3;
        frameDuration: 200;
        frameCount: 16;
        frameX: 0;
        frameY: 0;
        onCurrentFrameChanged: {
            info.text = "%1/%2".arg(animated.currentFrame).arg(animated.frameCount);
        }
    }
    Row{
        spacing: 4;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        Text {
            id: info;
            width: 60;
            height: 24;
            color: "red";
            verticalAlignment: Text.AlignVCenter;
            horizontalAlignment: Text.AlignRight;
        }
        Button {
            width: 60;
            height: 24;
            text: (animated.paused == true) ? "Play" : "Pause";
            onClicked: (animated.paused == true) ? animated.resume() : animated.pause();
        }
        Button {
            width: 70;
            height: 24;
            text: "Advance";
            onClicked: animated.advance();
        }
        Button {
            width: 70;
            height: 24;
            text: "Restart";
            onClicked: animated.restart();
        }
        Button {
            width: 60;
            height: 24;
            text: "Quit";
            onClicked: Qt.quit();
        }
    }
}

void MainWindow::initQmlWidget()
{
    // 初始化quick窗口
    _pQuickView = new QQuickView();
    _pQuickView->setSource(QUrl("./qml/start.qml"));
    _pQuickWidget = QWidget::createWindowContainer(_pQuickView, this);
    _pQuickWidget->hide();
    // 用于与qml交互
    _pQmlContext = _pQuickView->rootContext();
    // 显示qml
    _pQuickWidget->show();
    // 代码补充处： QtGui 与 qml 退出信号关联
    QObject::connect(_pQuickView->engine(), SIGNAL(quit()), qApp, SLOT(quit()));
}

Rectangle {
    visible: true;
    width: 240;
    height: 200;
    color: "black";
    Image {
        x:100;
        id: image1;
        source: "./11.png";
    }
    SpriteSequence {
        id: sequence;
        width: 100;
        height: 100;
        interpolate: true;
        running: false;
        sprites: [
            Sprite {
                name: "down";
                source: image1.source;
                frameCount: 4;
                frameWidth: image1.width/4;
                frameHeight: image1.height/4;
                frameRate: 10;
            },
            Sprite {
                name: "left";
                source: image1.source;
                frameCount: 4;
                frameY: image1.height/4;
                frameWidth: image1.width/4;
                frameHeight: image1.height/4;
                frameRate: 10;
            },
            Sprite {
                name: "right";
                source: image1.source;
                frameCount: 4;
                frameY: image1.height/4*2;
                frameWidth: image1.width/4;
                frameHeight: image1.height/4;
                frameRate: 10;
            },
            Sprite {
                name: "up";
                source: image1.source;
                frameCount: 4;
                frameY: image1.height/4*3;
                frameWidth: image1.width/4;
                frameHeight: image1.height/4;
                frameRate: 10;
            }
        ]
    }
    focus: true; // 不获取焦点是无法获取键盘的
    Keys.onPressed: { // 当持续按住up时，将会变成多次连击，不断pressed和release
        switch(event.key)
        {
        case Qt.Key_Up: // false时，跳转到"up"，此时无法不跑，再将SpriteSequence.running设置true
            sequence.jumpTo("up");
            sequence.running = true;
            text.text = "按下方向键上，正在向上走路";
            break;
        case Qt.Key_Down:
            sequence.jumpTo("down");
            sequence.running = true;
            text.text = "按下方向键下，正在向下走路";
            break;
        case Qt.Key_Left:
            sequence.jumpTo("left");
            sequence.running = true;
            text.text = "按下方向键左，正在向左走路";
            break;
        case Qt.Key_Right:
            sequence.jumpTo("right");
            sequence.running = true;
            text.text = "按下方向键右，正在向右走路";
            break;
        default:
            ;
        }
    }
    Keys.onReleased: {
        sequence.running = false;
        text.text = "请按方向键走路：上、下、左、右";
    }
    Text {
        id: text;
        y:200;
        anchors.horizontalCenter: parent.horizontalCenter;
        text:"请按方向键走路：上、下、左、右";
    }
}