devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

物联网实战--平台篇之(九)分组界面设计

作者：小丑西瓜9 | 2024-05-18 11:37:51

赞

踩

物联网实战--平台篇之(九)分组界面设计

目录

一、界面设计

二、项目工程概览

三、分组切换

四、分组管理

五、新建分组

六、编辑分组

 本项目的交流QQ群:701889554

物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html

物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html

本项目资源文件 https://download.csdn.net/download/ypp240124016/89317308

一、界面设计

                

上图是米家APP关于分组管理的界面，主页面是选项卡+视图的模式，分组管理可以删除和排序，重命名它需要单机某个分组再进入一层界面进行操作，我们做些省略，下图是模仿的界面。

                

             

     

二、项目工程概览

以下是针对这部分界面的项目代码结构图，主要分为两部分，一是分组切换页面——GroupTabView，二是分组管理页面——GroupEditView，其它都是对话框类型的，下面对这些内容做具体讲解。

三、分组切换

        分组就是下图红框里的内容，每个名称都是一个选项卡，下面对应的界面内容也会跟着切换，原本想着用QT自带的TabView来实现，后面发现达不到想要的效果，实际上米家APP里的选项卡和页面内容是分开的，是通过当前页面值关联起来的。所以后面就自己实现了这个过程，相对比较啰嗦点。

  1. import QtQuick 2.7
  2. import QtQuick.Controls 2.12
  3. import "../base"
  4. Rectangle
  5. {
  6.     color: "transparent"
  7.     ListView//滑动tab bar
  8.     {
  9.         id:id_tabBarView
  10.         clip:true
  11.         orientation: ListView.Horizontal
  12.         height: 40
  13.         anchors
  14.         {
  15.             left:parent.left
  16.             right:id_listButton.left
  17.         }
  18.         model: ListModel{
  19.             id:id_tabBarModel
  20.         }
  21.         delegate: Rectangle{
  22.             height: 40
  23.             width: id_titleText.contentWidth+15
  24.             color: "transparent"
  25.             Text{
  26.                 id:id_titleText
  27.                 height: parent.height
  28.                 width: 20
  29.                 anchors.centerIn: parent
  30.                 font.family: Qt.platform.os === "windows" ? "宋体" : "黑体"
  31.                 font.pointSize: 18
  32.                 font.bold: id_tabBarView.currentIndex===id
  33.                 text: group_name
  34.                 verticalAlignment: Text.AlignVCenter
  35.                 horizontalAlignment: Text.AlignHCenter
  36.             }
  37.             MouseArea
  38.             {
  39.                 anchors.fill: parent
  40.                 onClicked: 
  41.                 {
  42.                     id_tabBarView.currentIndex=id
  43.                 }
  44.             }
  45.         }
  46.         onCurrentIndexChanged: 
  47.         {
  48.             id_mainView.currentIndex=currentIndex
  49.         }
  50.     }
  51.     
  52.     GroupNewDialog
  53.     {
  54.         id:id_groupNewDialog
  55.     }
  56.     
  57.     GroupManDialog
  58.     {
  59.         id:id_groupManDialog
  60.         onSiqNewGroup: //新建分组
  61.         {
  62.             id_groupNewDialog.funOpen("新分组")
  63.         }
  64.         onSiqManGroup: //分组管理
  65.         {
  66.             theAccountMan.setHomeCurrView("home-group")
  67.         }
  68.         onSiqOpenGroup: 
  69.         {
  70.             id_tabBarView.currentIndex=id
  71.             id_mainView.currentIndex=id
  72.         }
  73.     }
  74.     
  75.     Rectangle{  //列表按钮
  76.         id:id_listButton
  77.         height: id_tabBarView.height*0.8
  78.         width: height*1.5
  79.         anchors
  80.         {
  81.             right:parent.right
  82.             rightMargin:15
  83.             verticalCenter:id_tabBarView.verticalCenter
  84.         }
  85.         
  86.         radius: height/2
  87.         color: "#BFC5D6"
  88.         ImageButton01{
  89.             anchors.centerIn: parent
  90.             height: parent.height*0.85
  91.             width: height
  92.             source: "qrc:/mainImgRC/images/home/list.png"
  93.             onSiqClickedLeft: 
  94.             {
  95.                 id_groupManDialog.open()
  96.             }
  97.         }
  98.     }
  99.  
  100.     SwipeView {  //主页面切换
  101.          id: id_mainView
  102.          width: parent.width
  103.          anchors
  104.          {
  105.             top:id_tabBarView.bottom
  106.             bottom:parent.bottom
  107.          }
  108.          Repeater {
  109.              model: ListModel{
  110.              id:id_mainModel
  111.              }
  112.     
  113.              Rectangle {
  114.               color: "transparent"
  115.               Text{
  116.                 anchors.centerIn: parent
  117.                 font.pointSize: 18
  118.                 text: id
  119.               }
  120.           }
  121.          }
  122.          onCurrentIndexChanged: {
  123.              id_tabBarView.currentIndex=currentIndex
  124.          }
  125.      }
  126.       Component.onCompleted: 
  127.       {
  128.             for(var i=0; i<1; i++)
  129.             {
  130.                 id_tabBarModel.append({"id":i, "group_name":"全部"})
  131.                 id_mainModel.append({"id":i, "group_name":"全部"})
  132.             }
  133.       }
  134.     
  135.       Connections
  136.       {
  137.           target: theCenterMan
  138.           onSiqAddGroup:
  139.           {
  140.                 if(index===0)
  141.                 {
  142.                     id_tabBarModel.clear()
  143.                     id_mainModel.clear()
  144.                     id_tabBarModel.append({"id":0, "group_name":"全部"})
  145.                     id_mainModel.append({"id":0, "group_name":"全部"})
  146.                 }
  147.                 index=id_tabBarModel.count
  148.                 id_tabBarModel.append({"id":index, "group_name":group_name})
  149.                 id_mainModel.append({"id":index, "group_name":group_name})
  150.           }
  151.           onSiqRenameGroup:
  152.           {
  153.               for(var i=1; i<id_tabBarModel.count; i++)
  154.               {
  155.                   var group_name=id_tabBarModel.get(i).group_name
  156.                   if(group_name===old_name)
  157.                   {
  158.                       id_tabBarModel.setProperty(i, "group_name", new_name)
  159.                       id_mainModel.setProperty(i, "group_name", new_name)
  160.                       break
  161.                   }
  162.               }
  163.           }
  164.           onSiqDelGroup:
  165.           {
  166.               for(var i=1; i<id_tabBarModel.count; i++)
  167.               {
  168.                   if(group_name===id_tabBarModel.get(i).group_name)
  169.                   {
  170.                       id_tabBarModel.remove(i)
  171.                       id_mainModel.remove(i)
  172.                       break
  173.                   }
  174.               }
  175.           }
  176.       }
  177. }
  178.  
  179.  
  180.  
  181.  
  182.

        分组切换具体代码如上所示，主要分为Tab和View两部分，Tab用一个ListView，这样就可以实现滑动而不切换的效果了，如果是QT的TabView，点一下就会切换过去，没法用。

        ListView核心就两个内容，模型和单元格，即model和delegate两个属性，模型一般采用ListModel，通过操作ListModel实例就可以改变单元格的内容以及增减单元格等操作了。delegate就是单元格具体内容了，在这里主要就是文本，另外背景的矩形要改成透明的，这样APP的背景色才能透出来，还有一个是鼠标，点击后会触发切换，tab切换后又会联动下方的主视图切换，这样两者就关联起来了。

        主页面是一个SwipeView ，这个是之前常用的模块了，后面这个页面是要承载设备显示用的，暂时没什么用处，就显示个页码。

四、分组管理

        在tab的右边有一个按钮，是触发分组管理用的，下面是分组管理的具体代码，是一个对话框，显示内容有三个——新建分组、编辑分组和各分组的显示。其中分组显示采用一个ListView列表视图，显示组名和组内设备数量。

  1. import QtQuick 2.7 
  2. import QtQuick.Controls 2.14 
  3. import "../base"
  4. //分组管理弹框
  5.  
  6. Popup { 
  7.     signal siqNewGroup()
  8.     signal siqManGroup()
  9.     signal siqOpenGroup(var id, var group_name)
  10.     property var rowHeight: 40
  11.     id:id_popup
  12.     visible: false
  13.     implicitWidth: parent.width*0.6
  14.     implicitHeight: rowHeight*(id_listModel.count+2)+id_popup.topPadding+id_popup.bottomPadding
  15.     modal: true
  16.     focus: true
  17.     closePolicy: Popup.CloseOnEscape | Popup.CloseOnReleaseOutside
  18.     
  19.     x:parent.width*0.3
  20.     y:10
  21.     
  22.     
  23.     background: Rectangle
  24.     {
  25.         
  26.         radius:15
  27.     }
  28.     Rectangle//分割横线
  29.     {
  30.         id:id_lineRect
  31.         width: parent.width*0.8
  32.         height: 1
  33.         color:"#F0F0F0"
  34.         anchors
  35.         {
  36.             horizontalCenter:parent.horizontalCenter
  37.             bottom:parent.bottom
  38.             bottomMargin:rowHeight*2
  39.         }
  40.     }
  41.     TextButton01//新建按钮
  42.     {
  43.         id:id_newButton
  44.         height: rowHeight
  45.         width: parent.width
  46.         anchors
  47.         {
  48.             left:parent.left
  49.             leftMargin:10
  50.             top:id_lineRect.bottom
  51.         }
  52.         textValue: "新建"
  53.         onSiqClickedLeft: 
  54.         {
  55.             id_popup.close()
  56.             siqNewGroup()
  57.         }
  58.         Image//新建图标
  59.         {
  60.             width: height
  61.             height: parent.height*0.6  
  62.             mipmap: true
  63.             anchors
  64.             {
  65.                 verticalCenter:parent.verticalCenter
  66.                 right:parent.right
  67.                 rightMargin:15
  68.             }
  69.             source: "qrc:/mainImgRC/images/home/new.png"
  70.         }
  71.     }
  72.     
  73.     TextButton01//分组管理
  74.     {
  75.         id:id_manButton
  76.         height: id_newButton.height
  77.         width: parent.width
  78.         anchors
  79.         {
  80.             left:parent.left
  81.             leftMargin:10
  82.             top:id_newButton.bottom
  83.         }
  84.         textValue: "管理"
  85.         onSiqClickedLeft: 
  86.         {
  87.             id_popup.close() 
  88.             siqManGroup()
  89.         } 
  90.         Image//管理图标
  91.         {
  92.             width: height
  93.             height: parent.height*0.5  
  94.             mipmap: true
  95.             anchors
  96.             {
  97.                 verticalCenter:parent.verticalCenter
  98.                 right:parent.right
  99.                 rightMargin:17
  100.             }
  101.             source: "qrc:/mainImgRC/images/home/man.png"
  102.         }
  103.     }
  104.     
  105.     ListView
  106.     {
  107.         clip: true
  108.         width: parent.width
  109.         anchors
  110.         {
  111.             top:parent.top
  112.             bottom:id_lineRect.top
  113.         }
  114.         model: ListModel{
  115.             id:id_listModel
  116.         }
  117.         
  118.         delegate: Rectangle{
  119.             height: rowHeight
  120.             width: parent.width
  121.             TextButton01//分组按钮
  122.             {
  123.                 id:id_groupButton
  124.                 height: rowHeight
  125.                 width: parent.width-20
  126.                 anchors
  127.                 {
  128.                     left:parent.left
  129.                     leftMargin:10
  130.                     verticalCenter:parent.verticalCenter
  131.                 }
  132.                 textValue: group_name
  133.                 onSiqClickedLeft: //打开某个分组
  134.                 {
  135.                     id_popup.close()
  136.                     siqOpenGroup(id, group_name)
  137.                 }
  138.                 Text{
  139.                     id:id_totalNumText
  140.                     height: parent.height
  141.                     width: 30
  142.                     anchors{
  143.                         right: parent.right
  144.                         verticalCenter: parent.verticalCenter
  145.                     }
  146.                     color: "#808080"
  147.                     font.family: "宋体"
  148.                     font.pointSize: 18
  149.                     text: total_num
  150.                     verticalAlignment: Text.AlignVCenter
  151.                     horizontalAlignment: Text.AlignHCenter
  152.                 }
  153.             }
  154.         }
  155.     }
  156.     
  157.     Component.onCompleted: 
  158.     {
  159.           for(var i=0; i<1; i++)
  160.           {
  161.               id_listModel.append({"id":i, "group_name":"全部", "total_num":0})
  162.           }
  163.     }
  164.     
  165.     Connections
  166.     {
  167.         target: theCenterMan
  168.         onSiqAddGroup:
  169.         {
  170.               if(index===0)
  171.               {
  172.                   id_listModel.clear()
  173.                   id_listModel.append({"id":0, "group_name":"全部", "total_num":total_num})
  174.               }
  175.               index=id_listModel.count
  176.               id_listModel.append({"id":index, "group_name":group_name, "total_num":total_num})
  177.         }
  178.         onSiqRenameGroup:
  179.         {
  180.             for(var i=1; i<id_listModel.count; i++)
  181.             {
  182.                 var group_name=id_listModel.get(i).group_name
  183.                 if(group_name===old_name)
  184.                 {
  185.                     id_listModel.setProperty(i, "group_name", new_name)
  186.                     break
  187.                 }
  188.             }
  189.         }
  190.         onSiqDelGroup:
  191.         {
  192.             for(var i=1; i<id_listModel.count; i++)
  193.             {
  194.                 if(group_name===id_listModel.get(i).group_name)
  195.                 {
  196.                     id_listModel.remove(i)
  197.                     break
  198.                 }
  199.             }
  200.         }
  201.     }
  202.     
  203. }

五、新建分组

        点击 新建按钮后，会弹出新建对话框，可以输入组名进行新建操作。

六、编辑分组

        编辑分组比较复杂，包含了删除、重命名和排序，其中重点是排序功能，具体代码如下。这里面主要难点是一个分组排序的拖拽功能，核心思想是—— 单元格内分为两部分，一个是拖拽有效区id_dragRect，一个是拖拽显示区dropRectangle，当鼠标捕捉到拖拽信号后，就把拖拽区的父组件从单元格修改为根矩形组件，然后取消布局，这样拖拽区就可以被拉动了；接着是放掉后检测当前坐标，看下在哪个单元格上就跟其做交换即可，最后配合ListView的move和moveDisplaced动画，产生交换效果就完成了，具体实现看代码。

  1. import QtQuick 2.7
  2. import QtQuick.Controls 2.0
  3. import "../base"
  4.  
  5. //分组编辑界面
  6.  
  7. Rectangle {
  8.     id:id_rootRect
  9.     
  10.     focus: true
  11.     MsgDialog01
  12.     { 
  13.         id:id_msgDialog
  14.     }
  15.     
  16.     Keys.onPressed: 
  17.     {
  18.         if(event.key === Qt.Key_Back)
  19.         {
  20.             console.log("phone Key_Back!")
  21.             event.accepted = true;
  22.             theAccountMan.setHomeCurrView("home-logined")
  23.         }
  24.     }
  25.     
  26.     ImageButton01//返回按钮
  27.     {
  28.         id:id_backButton
  29.         source: "qrc:/mainImgRC/images/login/back.png"
  30.         
  31.         anchors
  32.         {
  33.             left:parent.left
  34.             leftMargin:20
  35.             top:parent.top
  36.             topMargin:20            
  37.         }
  38.         onSiqClickedLeft: 
  39.         {
  40.             theAccountMan.setHomeCurrView("home-logined")
  41.         }
  42.     }
  43.     ImageButton01{
  44.         id:id_okButton
  45.         source: "qrc:/mainImgRC/images/home/ok.png"
  46.         height: 35
  47.         anchors
  48.         {
  49.             right:parent.right
  50.             rightMargin:20
  51.             verticalCenter:id_backButton.verticalCenter
  52.         }
  53.         onSiqClickedLeft: //完成
  54.         {
  55.             var str_list=[]
  56.             for(var i=1; i<id_listModel.count; i++)
  57.             {
  58.                 str_list[i]=id_listModel.get(i).group_name
  59.             }
  60.             theCenterMan.requestOrderGroup(str_list)
  61.         }
  62.     }
  63.     
  64.     GroupRenameDialog//重命名
  65.     {
  66.         id:id_renameDialog
  67.         onSiqOkClicked: 
  68.         {
  69.             if(text)
  70.             {
  71.                 if(text==="全部")
  72.                 {
  73.                     id_msgDialog.funOpen("不能使用\"全部\"作为组名!")
  74.                     return
  75.                 }
  76.                 theCenterMan.requestRenameGroup(oldName, text)
  77.             }
  78.             funClose()
  79.         }
  80.     }
  81.     GroupDelDialog //删除分组对话框
  82.     {
  83.         id:id_delGroupDialog
  84.         onSiqOkClicked: 
  85.         {
  86.             theCenterMan.requestDelGroup(groupName)
  87.             funClose()
  88.         }
  89.     }
  90.     
  91.     ListView{
  92.         property int dragItemIndex: -1
  93.         id:id_editListView
  94.         clip: true
  95.         width: parent.width
  96.         anchors
  97.         {
  98.             top:id_backButton.bottom
  99.             bottom:parent.bottom
  100.         }
  101.         model: ListModel{
  102.             id:id_listModel
  103.         }
  104.         move:Transition {
  105.             NumberAnimation { properties: "x,y"; duration: 200 }
  106.         }
  107.         moveDisplaced:Transition {
  108.             NumberAnimation { properties: "x,y"; duration: 200 }
  109.         }
  110.         delegate: Rectangle{
  111.             id:id_unionRect
  112.             height: 60
  113.             width: parent.width
  114.             Rectangle
  115.             {
  116.                 id:id_dragRect
  117.                 height: id_unionRect.height
  118.                 width: id_unionRect.width
  119.                 color: id_moveMouseArea.drag.active ? "transparent" : "white"
  120.                 MouseArea
  121.                 {
  122.                     id:id_moveMouseArea
  123.                     enabled: id>0
  124.                     anchors.fill: parent
  125.                     drag.target: id_dragRect
  126.                     drag.axis: Drag.YAxis
  127.                     drag.onActiveChanged: {
  128.                         if (id_moveMouseArea.drag.active) {
  129.                             id_editListView.dragItemIndex = index;
  130. //                            console.log("index=", index)
  131.                         }
  132.                         id_dragRect.Drag.drop();
  133.                     }
  134.                 }
  135.                 states: [
  136.                     State {
  137.                         when: id_dragRect.Drag.active
  138.                         ParentChange {
  139.                             target: id_dragRect
  140.                             parent: id_rootRect
  141.                         }
  142.     
  143.                         AnchorChanges {
  144.                             target: id_dragRect
  145.                             anchors.horizontalCenter: undefined
  146.                             anchors.verticalCenter: undefined
  147.                         }
  148.                     }
  149.                 ]
  150.                 Drag.active: id_moveMouseArea.drag.active
  151.                 Drag.hotSpot.x: id_dragRect.width / 2
  152.                 Drag.hotSpot.y: id_dragRect.height / 2
  153.                 
  154.                 ImageButton01{
  155.                     id:id_delButton
  156.                     source: "qrc:/mainImgRC/images/home/del.png"
  157.                     height: 25
  158.                     width: height
  159.                     visible: id>0
  160.                     anchors
  161.                     {
  162.                         verticalCenter:parent.verticalCenter
  163.                         left:parent.left
  164.                         leftMargin:20
  165.                     }
  166.                     onSiqClickedLeft: //删除
  167.                     {
  168.                         id_delGroupDialog.groupName=group_name
  169.                         id_delGroupDialog.funOpen()
  170.                     }
  171.                 }
  172.                 
  173.                 Text{  //组名文本
  174.                     id:id_groupText
  175.                     height: 40
  176.                     anchors{
  177.                         left: id_delButton.right
  178.                         leftMargin: 10
  179.                         right: id_totalNumText.left
  180.                         verticalCenter: parent.verticalCenter
  181.                     }
  182.                     color: "black"
  183.                     font.family: Qt.platform.os === "windows" ? "宋体" : "黑体"
  184.                     font.pointSize: 18
  185.                     font.bold: id_moveMouseArea.pressed
  186.                     text: group_name
  187.                     verticalAlignment: Text.AlignVCenter
  188.                     horizontalAlignment: Text.AlignLeft
  189.                     elide: Text.ElideRight 
  190.                 }
  191.        
  192.                 Text{ //数量文本
  193.                     id:id_totalNumText
  194.                     height: 30
  195.                     width: 30
  196.                     anchors{
  197.                         right: id_renameButton.left
  198.                         rightMargin: 5
  199.                         verticalCenter: parent.verticalCenter
  200.                     }
  201.                     color: "#808080"
  202.                     font.family: "宋体"
  203.                     font.pointSize: 18
  204.                     text: total_num
  205.                     verticalAlignment: Text.AlignVCenter
  206.                     horizontalAlignment: Text.AlignLeft
  207.                     elide: Text.ElideRight 
  208.                 }
  209.                 ImageButton01{ 
  210.                     id:id_renameButton
  211.                     source: "qrc:/mainImgRC/images/home/rename.png"
  212.                     height: 25
  213.                     width: height
  214.                     visible: id>0                
  215.                     anchors
  216.                     {
  217.                         verticalCenter:parent.verticalCenter
  218.                         right:parent.right
  219.                         rightMargin:20
  220.                     }
  221.                     onSiqClickedLeft: //重命名
  222.                     {
  223.                         id_renameDialog.oldName=group_name
  224.                         id_renameDialog.funOpen(group_name)
  225.                     }
  226.                 }
  227.              
  228.                 
  229.             }
  230.            DropArea {
  231.            id: dropArea
  232.            anchors.fill: parent
  233.            onDropped:{
  234. //               console.log("onDropped")
  235.                var other_index = id_editListView.indexAt(id_moveMouseArea.mouseX + id_unionRect.x, id_moveMouseArea.mouseY + id_unionRect.y);
  236. //               console.log("index:",index,"other_index:",other_index,"listView.dragItemIndex:",id_editListView.dragItemIndex);
  237.                if(other_index>0)
  238.                {
  239.                    id_listModel.move(id_editListView.dragItemIndex,other_index, 1);
  240.                }
  241.            }
  242.            
  243.            Rectangle {
  244.                    id: dropRectangle
  245.  
  246.                    anchors.fill: parent
  247.                    color: "transparent"
  248.  
  249.                    states: [
  250.                        State {
  251.                            when: dropArea.containsDrag
  252.                            PropertyChanges {
  253.                                 target: dropRectangle
  254.                                 color: "lightsteelblue"
  255.                                 opacity:0.3
  256.                            }
  257.                        }
  258.                    ]
  259.                }//end Rectangle
  260.  
  261.            }//end drop
  262.             
  263.         }
  264.     }
  265.     Component.onCompleted: 
  266.     {
  267.           for(var i=0; i<1; i++)
  268.           {
  269.               id_listModel.append({"id":i, "group_name":"全部", "total_num":0})
  270.           }
  271.     }
  272.     Connections
  273.     {
  274.         target: theCenterMan
  275.         onSiqAddGroup:
  276.         {
  277.               if(index===0)
  278.               {
  279.                   id_listModel.clear()
  280.                   id_listModel.append({"id":0, "group_name":"全部", "total_num":total_num})
  281.               }
  282.               index=id_listModel.count
  283.               id_listModel.append({"id":index, "group_name":group_name, "total_num":total_num})
  284.         }
  285.         onSiqRenameGroup:
  286.         {
  287.             for(var i=1; i<id_listModel.count; i++)
  288.             {
  289.                 var group_name=id_listModel.get(i).group_name
  290.                 if(group_name===old_name)
  291.                 {
  292.                     id_listModel.setProperty(i, "group_name", new_name)
  293.                     break
  294.                 }
  295.             }
  296.         }
  297.         onSiqDelGroup:
  298.         {
  299.             for(var i=1; i<id_listModel.count; i++)
  300.             {
  301.                 if(group_name===id_listModel.get(i).group_name)
  302.                 {
  303.                     id_listModel.remove(i)
  304.                     break
  305.                 }
  306.             }
  307.         }
  308.     }
  309.     
  310. }

        删除和重命名就是相关对话框内容了，没有很复杂的内容，具体看代码。

  1. import QtQuick 2.7 
  2. import QtQuick.Controls 2.14 
  3.  
  4. Popup {
  5.     
  6.     property var titleText: "标题"
  7.     property var cancelText: "取消"
  8.     property var okText: "确定"
  9.     property var cancelColor: "#303030"
  10.     property var okColor: "#303030"
  11.     
  12.     signal siqCancelClicked()
  13.     signal siqOkClicked()
  14.     id:id_popup
  15.     visible: false
  16.     implicitWidth: parent.width
  17.     implicitHeight: 200
  18.     modal: true
  19.     focus: true
  20.     closePolicy: Popup.CloseOnEscape | Popup.CloseOnReleaseOutside
  21.     anchors.centerIn: Overlay.overlay
  22.     
  23.     background: Rectangle
  24.     {
  25.         radius:10
  26.     }
  27.     
  28.     Text {//标题文字
  29.         id:id_titleText
  30.         height: 40
  31.         width: parent.width*0.8
  32.         anchors
  33.         {
  34.             top:parent.top
  35.             topMargin:10
  36.             horizontalCenter:parent.horizontalCenter
  37.         }
  38.         verticalAlignment: Text.AlignVCenter
  39.         horizontalAlignment: Text.AlignHCenter
  40.         font.pointSize: height*0.4
  41.         font.family: "宋体"
  42.         text: titleText
  43.         color: "black"
  44.     }
  45.     
  46.     
  47.     BaseButton02//取消按钮
  48.     { 
  49.         id:id_cancelButton
  50.         height: 50
  51.         width: parent.width*0.4
  52.         releaseColor: "#F0F0F0"
  53.         pressedColor: "#F0F0F0"
  54.         anchors
  55.         {
  56.             left:parent.left
  57.             leftMargin:20
  58.             bottom:parent.bottom
  59.             bottomMargin:20
  60.         }
  61.         buttonText: cancelText
  62.         buttonColor:cancelColor
  63.         onSiqClickedLeft: 
  64.         {
  65.             siqCancelClicked()
  66.         }
  67.     }
  68.     BaseButton02//确定按钮
  69.     { 
  70.         id:id_okButton
  71.         height: id_cancelButton.height
  72.         width: id_cancelButton.width
  73.         releaseColor: "#F0F0F0"
  74.         pressedColor: "#F0F0F0"
  75.         anchors
  76.         {
  77.             verticalCenter:id_cancelButton.verticalCenter
  78.             right:parent.right
  79.             rightMargin:20
  80.         }
  81.         buttonText: okText
  82.         buttonColor:okColor
  83.         onSiqClickedLeft: 
  84.         {
  85.             siqOkClicked()
  86.         }
  87.     }
  88.     
  89.     function funOpen()
  90.     {
  91.         id_popup.open()
  92.     }
  93.     
  94.     function funClose()
  95.     {
  96.         id_popup.close()
  97.     }
  98. }
  99.  
  1. import QtQuick 2.0
  2. import "../base"
  3.  
  4. //删除警示对话框
  5.  
  6.  
  7. BaseWarnDialog {
  8.     
  9.     titleText: "确认删除分组吗?"
  10.     property var groupName: ""
  11.     
  12.     okText: "删除"
  13.     okColor: "#F00000"
  14.     onSiqCancelClicked: 
  15.     {
  16.         funClose()
  17.     }
  18.     
  19.     
  20. }
  1. import QtQuick 2.0
  2. import "../base"
  3.  
  4. //重命名分组对话框
  5.  
  6.  
  7. BaseEditDialog {
  8.     
  9.     titleText: "重命名分组"
  10.     property var oldName: ""
  11.     onSiqCancelClicked: 
  12.     {
  13.         funClose()
  14.     }
  15.     
  16.     
  17. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/588116
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号