QT动画制作（十七）

alltolove

效果：

图片都是从论坛帖子里来的
知识点1：学会连接网络图片
知识点2：像CSS样式表一样给各种控件制定样式
代码如下：
main.qml文件：

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MainForm {
        anchors.fill: parent
        a.onClicked: {one.visible=true;two.visible=false;three.visible=false;state="pic1"}
        b.onClicked: {one.visible=false;two.visible=true;three.visible=false;state="pic2"}
        c.onClicked: {one.visible=false;two.visible=false;three.visible=true;state="pic3"}
        states: [//定义一个三个成员的状态数组
            State {
                name: "pic1"
                PropertyChanges {
                    target: img
                    source:"http://xxx.fishc.com/forum/201702/28/084008zx2n7ntjgx7ljx7o.jpeg"
                }
            },State {
                name: "pic2"
                PropertyChanges {
                    target: img
                    source:"http://xxx.fishc.com/forum/201702/28/084247t58i1id18678y98i.jpeg"
                }
            },State {
                name: "pic3"
                PropertyChanges {
                    target: img
                    source:"http://xxx.fishc.com/forum/201702/28/084403e64zogg46xskjjbx.jpeg"
                }
            }
        ]
        Image{
            id:img
            x:80
            y:50
            width:400
            height:400
        }
    }
}

MainForm.ui.qml文件：

import QtQuick 2.5
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.3//想用自定义样式必须引入
Item {
    property alias one: one
    property alias two: two
    property alias three:three
    property alias a: a
    property alias b: b
    property alias c: c
    width: 360
    height: 360
    Text {
        id:one
        anchors.horizontalCenter: parent.horizontalCenter
        text: "图1"
        font.family: "仿宋"
        font.pixelSize: 24
        visible: false
    }
    Text {
        id:two
        anchors.horizontalCenter: parent.horizontalCenter
        text: "图2"
        font.family: "仿宋"
        font.pixelSize: 24
        visible:false
    }
    Text {
        id:three
        anchors.horizontalCenter: parent.horizontalCenter
        text: "图3"
        font.family: "仿宋"
        font.pixelSize: 24
        visible:false
    }
    property Component buttonStyle:ButtonStyle{//定制一个样式
        background:Rectangle{
            implicitWidth: 50
            implicitHeight: 30
            border.width: 2
            border.color: "green"
            color:"yellow"
        }
    }

    Column{
        spacing: 10
    Button{id:a;style:buttonStyle;text:"图片1"}
    Button{id:b;style:buttonStyle;text:"图片2"}
    Button{id:c;style:buttonStyle;text:"图片3"}

    }
}

Preview: 明天介绍怎么用菜单栏

不二如是

好吧，欲知图片详情，请看：被称为“巴西恶魔”的一种小鱼