鱼C论坛

 找回密码
 立即注册
查看: 2530|回复: 1

[技术原创] QT动画制作(十七)

[复制链接]
发表于 2017-3-8 09:49:18 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 alltolove 于 2017-3-8 09:51 编辑

效果:
jdfw.gif
图片都是从论坛帖子里来的
知识点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.     MainForm {
  10.         anchors.fill: parent
  11.         a.onClicked: {one.visible=true;two.visible=false;three.visible=false;state="pic1"}
  12.         b.onClicked: {one.visible=false;two.visible=true;three.visible=false;state="pic2"}
  13.         c.onClicked: {one.visible=false;two.visible=false;three.visible=true;state="pic3"}
  14.         states: [//定义一个三个成员的状态数组
  15.             State {
  16.                 name: "pic1"
  17.                 PropertyChanges {
  18.                     target: img
  19.                     source:"http://xxx.fishc.com/forum/201702/28/084008zx2n7ntjgx7ljx7o.jpeg"
  20.                 }
  21.             },State {
  22.                 name: "pic2"
  23.                 PropertyChanges {
  24.                     target: img
  25.                     source:"http://xxx.fishc.com/forum/201702/28/084247t58i1id18678y98i.jpeg"
  26.                 }
  27.             },State {
  28.                 name: "pic3"
  29.                 PropertyChanges {
  30.                     target: img
  31.                     source:"http://xxx.fishc.com/forum/201702/28/084403e64zogg46xskjjbx.jpeg"
  32.                 }
  33.             }
  34.         ]
  35.         Image{
  36.             id:img
  37.             x:80
  38.             y:50
  39.             width:400
  40.             height:400
  41.         }
  42.     }
  43. }
复制代码

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.     Column{
  47.         spacing: 10
  48.     Button{id:a;style:buttonStyle;text:"图片1"}
  49.     Button{id:b;style:buttonStyle;text:"图片2"}
  50.     Button{id:c;style:buttonStyle;text:"图片3"}

  51.     }
  52. }
复制代码

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

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
不二如是 + 5 + 5 + 3 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2017-3-8 10:02:09 | 显示全部楼层
好吧,欲知图片详情,请看:被称为“巴西恶魔”的一种小鱼
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-28 03:04

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表