QT动画制作（十七）

alltolove

效果：

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

1. import QtQuick 2.5
   
2. import QtQuick.Window 2.2
   
3. import QtQuick.Controls 1.2
   
4. Window {
   
5.     visible: true
   
6.     width: 640
   
7.     height: 480
   
8.     title: qsTr("Hello World")
   
9. 
   
10.     MainForm {
    
11.         anchors.fill: parent
    
12.         a.onClicked: {one.visible=true;two.visible=false;three.visible=false;state="pic1"}
    
13.         b.onClicked: {one.visible=false;two.visible=true;three.visible=false;state="pic2"}
    
14.         c.onClicked: {one.visible=false;two.visible=false;three.visible=true;state="pic3"}
    
15.         states: [//定义一个三个成员的状态数组
    
16.             State {
    
17.                 name: "pic1"
    
18.                 PropertyChanges {
    
19.                     target: img
    
20.                     source:"http://xxx.fishc.com/forum/201702/28/084008zx2n7ntjgx7ljx7o.jpeg"
    
21.                 }
    
22.             },State {
    
23.                 name: "pic2"
    
24.                 PropertyChanges {
    
25.                     target: img
    
26.                     source:"http://xxx.fishc.com/forum/201702/28/084247t58i1id18678y98i.jpeg"
    
27.                 }
    
28.             },State {
    
29.                 name: "pic3"
    
30.                 PropertyChanges {
    
31.                     target: img
    
32.                     source:"http://xxx.fishc.com/forum/201702/28/084403e64zogg46xskjjbx.jpeg"
    
33.                 }
    
34.             }
    
35.         ]
    
36.         Image{
    
37.             id:img
    
38.             x:80
    
39.             y:50
    
40.             width:400
    
41.             height:400
    
42.         }
    
43.     }
    
44. }
    

复制代码

MainForm.ui.qml文件：

1. import QtQuick 2.5
   
2. import QtQuick.Controls 1.2
   
3. import QtQuick.Controls.Styles 1.3//想用自定义样式必须引入
   
4. Item {
   
5.     property alias one: one
   
6.     property alias two: two
   
7.     property alias three:three
   
8.     property alias a: a
   
9.     property alias b: b
   
10.     property alias c: c
    
11.     width: 360
    
12.     height: 360
    
13.     Text {
    
14.         id:one
    
15.         anchors.horizontalCenter: parent.horizontalCenter
    
16.         text: "图1"
    
17.         font.family: "仿宋"
    
18.         font.pixelSize: 24
    
19.         visible: false
    
20.     }
    
21.     Text {
    
22.         id:two
    
23.         anchors.horizontalCenter: parent.horizontalCenter
    
24.         text: "图2"
    
25.         font.family: "仿宋"
    
26.         font.pixelSize: 24
    
27.         visible:false
    
28.     }
    
29.     Text {
    
30.         id:three
    
31.         anchors.horizontalCenter: parent.horizontalCenter
    
32.         text: "图3"
    
33.         font.family: "仿宋"
    
34.         font.pixelSize: 24
    
35.         visible:false
    
36.     }
    
37.     property Component buttonStyle:ButtonStyle{//定制一个样式
    
38.         background:Rectangle{
    
39.             implicitWidth: 50
    
40.             implicitHeight: 30
    
41.             border.width: 2
    
42.             border.color: "green"
    
43.             color:"yellow"
    
44.         }
    
45.     }
    
46. 
    
47.     Column{
    
48.         spacing: 10
    
49.     Button{id:a;style:buttonStyle;text:"图片1"}
    
50.     Button{id:b;style:buttonStyle;text:"图片2"}
    
51.     Button{id:c;style:buttonStyle;text:"图片3"}
    
52. 
    
53.     }
    
54. }
    

复制代码

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

不二如是

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