• 1336阅读
  • 10回复

养生编程之眼见不为实(2) [复制链接]

上一主题 下一主题
离线yanhubin
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2019-08-15
当你看到上一篇中看到的最终实现效果,你想到了什么?


倔强青铜:诶呦,不错哦!不知道用什么写的,怎么实现的?听说是qml
秩序白银:ImageText 配合anchors锚定parent或id应该能完成这个页面!
荣耀黄金:有GradientBuff加持,layer.enabled给layer披上DropShadow外衣阴影就出来,根本不想着找设计贴图,除非是妹子(不管好不好看)!
尊贵铂金:这个拖动只要有MouseArea没有什么搞不定的,我也行,dragdragdrag!呦呦,Check now炫酷界面来一套!
永恒钻石:ListView 有个delegate代理商儿子,找来ListModel 做个伴,你侬、我侬真高效!
至尊星耀:Animation团队带着NumberAnimationRotationAnimation玩连连看,动画效果666!
最强王者:要想锄头挥的好,还要ParticleSystem来帮忙,港独再猖狂,摆出粒子加农炮,射你一脸,直叫你灰飞烟面!

请问看官,现在你是什么段位?请你告诉我,让我们红尘作伴活得潇潇洒洒!策马奔腾共享人世繁华!
接下来我就来按步组装这台叫你飞灰烟面的粒子加农炮。

一、被海寒偏爱的ListView的一家
我很爱ListView一家,因为大多数的软件都会用到它,对于列表,尤其是触摸普及的时代,可拖拽的ListView再合适不过。
于是我找来了ListView强塞给主Window做儿子,又给它找好了代理,免得业务忙不过来!
  1. import QtQuick 2.13                //细胞
  2. import QtQuick.Window 2.13   //细胞
  3. Window {
  4.     visible: true    //可以抛头露脸
  5.     width: 480     //腰围480
  6.     height: 800    //身高800
  7.     color: "#F4F4F4"  //上点底色才有底气
  8.     ListModel {          
  9.         id: contactModel      //找算命先生取个名字
  10.         ListElement {           //我们都有眼睛、鼻子、多做、嘴巴,但长的都不一样
  11.             name: "Bill Smith"
  12.             pic: "http://img5.duitang.com/uploads/item/201411/29/20141129010249_dh32E.thumb.700_0.jpeg"
  13.             signature: "Rest in the Hope."
  14.             time: "12:11"
  15.         }
  16.         ListElement {
  17.             name: "John Brown"
  18.             pic: "http://b-ssl.duitang.com/uploads/item/201805/13/20180513224039_tgfwu.png"
  19.             signature: "Save your heart for someone who cares."
  20.             time: "10:01"
  21.         }
  22.         ListElement {
  23.             name: "Sam Wise"
  24.             pic: "http://b-ssl.duitang.com/uploads/item/201504/27/201504270412_cyndt.jpeg"
  25.             signature: "Always waiting for you."
  26.             time: "08:25"
  27.         }
  28.     }
  29.     //ListView就是我,我就是ListView,今天上有老下有小的主角
  30.     ListView {
  31.         anchors.fill: parent        //爸对不住了,我要填满你
  32.         model: contactModel    //找好团队,就是你contactModel了
  33.         delegate: Rectangle {    //代理商
  34.             id: contactDelegateBg_rect
  35.             width: 480; height: 100    //高100;腰围480的代理商,原来是个矮胖子
  36.         }
  37.     }
  38. }
好了,基本成员都到了,看看长什么样子


诶呦,大白胖子,怎么眼睛、鼻子啥都没有,没有我们就给它画上!
  1. Item {                 //给你画个隐形圈,免得你跑出去
  2.                 id: contactDelegate_item    
  3.                 height: parent.height     //就跟父亲一样大小吧
  4.                 width: parent.width
  5.               
  6.                 Item {
  7.                     id: pic_item
  8.                     anchors{           //依次对齐,这样就不会乱跑了,不管以后胖矮高瘦,我都可以长的比例协调
  9.                         left: parent.left
  10.                         top: parent.top
  11.                         bottom: parent.bottom
  12.                     }
  13.                     width: height
  14.                     Image {
  15.                         id: pic_img
  16.                         source: pic
  17.                         anchors.centerIn: parent       //你父亲为中心,父亲就是榜样,向他看齐
  18.                         width: parent.width*2/3
  19.                         height: width
  20.                     }
  21.                 }
  22.                 Item {
  23.                     anchors{
  24.                         left: pic_item.right
  25.                         right: parent.right
  26.                         top: parent.top
  27.                         topMargin: pic_item.height/8
  28.                         bottom: parent.verticalCenter
  29.                     }
  30.                     Text {        //我的名字就放这里了
  31.                         anchors{
  32.                             verticalCenter: parent.verticalCenter
  33.                             left: parent.left
  34.                             leftMargin: parent.topMargin
  35.                             right: time_text.left
  36.                         }
  37.                         text: name
  38.                         font.pixelSize: 30   //名字得大一点,这样大家才看得到
  39.                     }
  40.                     Text {        //做什么都得有时间观念,海寒老师告诉我这很重要
  41.                         id: time_text
  42.                         anchors{
  43.                             verticalCenter: parent.verticalCenter
  44.                             right: parent.right
  45.                             rightMargin: 20
  46.                         }
  47.                         font.pixelSize: 20
  48.                         text: time
  49.                     }
  50.                 }
  51.                 Item {            //个性签名,我有我的个性
  52.                     anchors{
  53.                         left: pic_item.right
  54.                         right: parent.right
  55.                         top: parent.verticalCenter
  56.                         bottom: parent.bottom
  57.                         bottomMargin: pic_item.height/8
  58.                     }
  59.                     Text {
  60.                         anchors{
  61.                             verticalCenter: parent.verticalCenter
  62.                             left: parent.left
  63.                             leftMargin:  parent.topMargin
  64.                             right: parent.right
  65.                             rightMargin:  parent.topMargin
  66.                         }
  67.                         text: signature
  68.                         font.pixelSize: 20
  69.                         color: "#BBBBBB"
  70.                     }
  71.                 }
  72.             }
画完妆再看看,不错,有鼻子有脸了


诶呦,还不错哦,不过得有退出机制,哪天看那个不顺眼,就开除,先偷偷藏起来,藏右边吧!
  1. Item {
  2.                 id: contactDelegateDel_item
  3.                 x: contactDelegate_item.x + parent.width   //得屁股后面跟牢
  4.                 anchors{              //跟父亲一样顶天立地
  5.                     top: parent.top
  6.                     bottom: parent.bottom
  7.                 }
  8.                 width: height
  9.                 Rectangle{
  10.                     anchors.centerIn: parent     //向父亲中心看齐
  11.                     height: parent.height*3/5
  12.                     width: height
  13.                     radius: height/5           //方脸不好看,削圆润点
  14.                     color: "#ec534e"          //抹成红色,是这条街上最靓的仔
  15.                     layer.enabled: true        //给你讲个鬼故事,灯下没影子。然后UI妹子就不给图了。那就自己加个影子,才不稀罕阴影图
  16.                     layer.effect: DropShadow {        
  17.                         transparentBorder: true    //绘制边框阴影
  18.                         color: "#50ec534e";    //因子上个色,再若隐若现一点,完美
  19.                         radius: 30.0             //模糊点才像影子的样子
  20.                         horizontalOffset: 0;   //左右就不偏了
  21.                         verticalOffset: 10;     //向下偏一点,这样显得高
  22.                         samples: 25;
  23.                         smooth: true;        //不同灯光下,大大小小还是得有
  24.                     }
  25.                     Image{      //垃圾桶就是我,我就是垃圾桶,要记得垃圾分类哦!
  26.                         id: del_img
  27.                         anchors.centerIn: parent
  28.                         width: parent.width*2/5
  29.                         height: width      
  30.                         source: "qrc:/images/del.png"   //这就是我的真身
  31.                         mipmap: true     //抗锯齿,有棱角太危险
  32.                     }
  33.                 }
  34.             }
好了,你找到我了吗?没有?因为我在右边藏起来了!好吧,那我把你拽出来看看。给contactDelegate_item加个拖拽,就是你了MouseArea
  1. MouseArea {
  2.                     anchors.fill: parent
  3.                     property real m_mouseX          
  4.                     onPressed: {
  5.                         m_mouseX = mouse.x     //跟小狗狗学习下,按下的时候六点钟标记,总能找到回家的路,虽然这里不是用来找回去的路
  6.                         contactDelegateBg_rect.color = "#F7F9FE"    //使劲按我了总得给你点颜色看看
  7.                     }
  8.                     onReleased: {
  9.                         if (m_mouseX > mouse.x) {    //如果我放手在你左边,我们就离的更远了
  10.                             parent.x = drag.minimumX    //左移动大小给父
  11.                         }
  12.                     }
  13.                     drag.target: parent    //拖拽目标锁定为父亲
  14.                     drag.axis: Drag.XAxis     //横向拖拽
  15.                     drag.minimumX: -height    //最大拖拽距离就跟删除一样宽吧
  16.                     drag.maximumX: 0      //右边就不要拖过去了,比较左边啥都没有
  17.                 }
这下应该可以看到你了


众里寻她千百度,暮然回首那人却在灯火阑珊处!

好了,初学qml的基本实现,到这里就差不多了,下一篇我们讲解中级篇,使用好动画,让应用动感起来!




只看该作者 1楼 发表于: 2019-08-16
可以上传整个工程吗
离线yanhubin

只看该作者 2楼 发表于: 2019-08-16
回 又一个暑假 的帖子
又一个暑假:可以上传整个工程吗[表情] (2019-08-16 08:43) 

最后一篇我会把整个工厂附上
离线lsyzsl

只看该作者 3楼 发表于: 2019-08-19
喜欢大佬们这种精神,紧跟其后学习,争取有朝一日也能像大神们一样。
离线圣域天子

只看该作者 4楼 发表于: 2019-08-20
我比较喜欢用 QTreeWidget, 简单方便,支持 List 的同时,还支持 Tree
离线toby520

只看该作者 5楼 发表于: 2019-08-21
回 圣域天子 的帖子
圣域天子:我比较喜欢用 QTreeWidget, 简单方便,支持 List 的同时,还支持 Tree  (2019-08-20 09:58) 

不是一个级别的界面 QWidget 做动画 费力不讨好
qml做动画 天生的使命
QtQML多多指教开发社区 http://qtclub.heilqt.com
将QtCoding进行到底
关注移动互联网,关注金融
开发跨平台客户端,服务于金融行业
专业定制界面
群号:312125701   373955953(qml控件定做)
离线nigoole

只看该作者 6楼 发表于: 2019-08-22
   解说独到,通俗易懂!~大神也~
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线crazy

只看该作者 7楼 发表于: 2019-08-25
,啥都不说 了,赞
C/C++/Qt爱好者
邮箱:kevinlq0912@163.com
企鹅:2313828706
博客:http://kevinlq.com/
离线lsyzsl

只看该作者 8楼 发表于: 2019-08-26
    pic: "http://img5.duitang.com/uploads/item/201411/29/20141129010249_dh32E.thumb.700_0.jpeg"
我为什么不能加载网络图片,楼主可否解答?
离线圣域天子

只看该作者 9楼 发表于: 2019-08-27
回 toby520 的帖子
toby520:不是一个级别的界面 QWidget 做动画 费力不讨好
qml做动画 天生的使命 (2019-08-21 12:26) 

QML 中没有类似的 tree 啊?
离线XChinux

只看该作者 10楼 发表于: 2019-08-27
利用ListModel, ListView,自己做个Tree也可以。
我们就是这样实现的树形。
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
快速回复
限100 字节
 
上一个 下一个