目录
本项目的交流QQ群:701889554
物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html
物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html
本项目资源文件https://download.csdn.net/download/ypp240124016/89301894
一、米家APP分析
以上是米家APP关于应用管理的截图，还有其它的，感觉没必要那么复杂了，我们就缩减下，主要就是当前应用展示、应用列表展示、新建应用和重命名相关功能就行了。那么，以下是现阶段的界面设计。
二、应用展示
工程添加如上图所示，已登录页面代码如下：
import QtQuick 2.7
import "../base"
//已登录home画面
Rectangle
{
property var currAppID: 0
property var currAppName: "当前应用"
gradient: Gradient
{
GradientStop { position: 0.0; color: "#CFD5E6" }
GradientStop { position: 1.0; color: "#F5F6F8" }
}
TextButton01 //当前项目名称
{
id:id_appManButton
height: 40
width: parent.width*0.6
anchors
{
left:parent.left
leftMargin:10
top:parent.top
topMargin:10
}
textValue: currAppName
onSiqClickedLeft:
{
id_appManDialog.open()
theCenterMan.updateAppListName()//更新应用列表名称
}
}
Image//向下图标
{
width: height
height: id_appManButton.height*0.5
mipmap: true
anchors
{
verticalCenter:id_appManButton.verticalCenter
left:id_appManButton.left
leftMargin:id_appManButton.contentWidth+10
}
source: "qrc:/mainImgRC/images/home/down.png"
}
AppManDialog//项目管理弹框
{
id:id_appManDialog
onSiqNewApp:
{
id_appNewDialog.funOpen("新应用")
}
onSiqRenameApp:
{
id_appRenameDialog.funOpen(currAppName)
}
}
AppNewDialog//新建应用编辑框
{
id:id_appNewDialog
}
AppRenameDialog//应用重命名编辑框
{
id:id_appRenameDialog
onSiqOkClicked:
{
if(text)
{
theCenterMan.requestRenameApp(currAppID, text)
}
funClose()
}
}
Connections
{
target: theCenterMan
onSiqUpdateCurrAppName:
{
// console.log("curr app id=", app_id)
// console.log("curr app name=", app_name)
currAppID=app_id
currAppName=app_name
}
}
}
其中，TextButton01是一个文本按钮，其内容就是当前应用名称，点击这个按钮后会弹出应用列表对话框，可以进行应用切换、新建应用和重命名应用等操作。应用名称是C++后端CenterMan类通过siqUpdateCurrAppName发送过来更新的。
三、应用列表
import QtQuick 2.7
import QtQuick.Controls 2.14
import "../base"
//应用管理弹框
Popup {
signal siqNewApp()
signal siqRenameApp()
property var rowHeight: 40
id:id_popup
visible: false
implicitWidth: parent.width*0.6
implicitHeight: rowHeight*(id_listModel.count+2)+id_popup.topPadding+id_popup.bottomPadding
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnReleaseOutside
x:10
y:20
background: Rectangle
{
radius:15
}
Rectangle//分割横线
{
id:id_lineRect
width: parent.width*0.8
height: 1
color:"#F0F0F0"
anchors
{
horizontalCenter:parent.horizontalCenter
bottom:parent.bottom
bottomMargin:rowHeight*2
}
}
TextButton01//新建按钮
{
id:id_newButton
height: 40
width: parent.width
anchors
{
left:parent.left
leftMargin:10
// bottom:parent.bottom
top:id_lineRect.bottom
}
textValue: "新建"
onSiqClickedLeft:
{
id_popup.close()
siqNewApp()
}
Image//新建图标
{
width: height
height: parent.height*0.6
mipmap: true
anchors
{
verticalCenter:parent.verticalCenter
right:parent.right
rightMargin:15
}
source: "qrc:/mainImgRC/images/home/new.png"
}
}
TextButton01//重命名按钮
{
id:id_renameButton
height: id_newButton.height
width: parent.width
anchors
{
left:parent.left
leftMargin:10
top:id_newButton.bottom
}
textValue: "重命名"
onSiqClickedLeft:
{
id_popup.close()
siqRenameApp()
}
Image//重命名图标
{
width: height
height: parent.height*0.6
mipmap: true
anchors
{
verticalCenter:parent.verticalCenter
right:parent.right
rightMargin:15
}
source: "qrc:/mainImgRC/images/home/rename.png"
}
}
Column
{
width: parent.width
anchors
{
top:parent.top
bottom:id_lineRect.top
}
spacing: 0
Repeater
{
model: ListModel{
id:id_listModel
}
Rectangle{
height: rowHeight
width: parent.width
color: select ? "#c6ede8" :"transparent"
radius: 5
TextButton01//应用按钮
{
id:id_appButton
height: 40
width: parent.width*0.8
anchors
{
left:parent.left
leftMargin:10
verticalCenter:parent.verticalCenter
}
textValue: app_name
onSiqClickedLeft:
{
id_popup.close()
theCenterMan.selectCurrApp(app_id)
}
Image//打勾图标
{
id:id_selectImage
width: height
height: parent.height*0.8
mipmap: true
visible:select
anchors
{
verticalCenter:parent.verticalCenter
left:parent.right
}
source: "qrc:/mainImgRC/images/home/select.png"
}
}
}
}
}
Connections
{
target: theCenterMan
onSiqUpdateAppListName:
{
if(index===0)
{
id_listModel.clear()
}
app_name=app_name+"("+app_id+")"
id_listModel.append({"app_name":app_name, "app_id":app_id, "select":select})
}
}
}
这是一个弹框组件，先看下布局，它的宽度是手机屏幕宽度的0.6倍，高度是根据应用数量自动调节的，这里每个应用高度固定为rowHeight=40，那么总高度计算方式为：
H=rowHeight*(id_listModel.count+2)+id_popup.topPadding+id_popup.bottomPadding
其中+2是指新建和重命名按钮，后面两个Padding是Popup组件的上下边框宽度。
剩下的主要是看单元格的内容，用Column和Repeater配合ListModel对列表进行修饰和操作。单元格内容也很简单，一个矩形背景，被选中的话有背景色，然后是一个文本按钮，点击后会触发切换动作，最后是打勾图标，只有被选中了的才会显示。ListModel的内容主要是应用名称、应用ID和选择状态三个，更新列表的时候会先清空原来的内容，再一个个添加进来。
四、新建应用
新建和重命名对话框类似，所以有个基本编辑模块，代码如下：
import QtQuick 2.7
import QtQuick.Controls 2.14
Popup {
property var titleText: "标题"
signal siqCancelClicked()
signal siqOkClicked(var text)
id:id_popup
visible: false
implicitWidth: parent.width
implicitHeight: 230
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnReleaseOutside
anchors.centerIn: Overlay.overlay
background: Rectangle
{
radius:10
}
Text {//标题文字
id:id_titleText
height: 40
width: parent.width
anchors
{
top:parent.top
topMargin:10
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pointSize: height*0.4
font.family: "宋体"
text: titleText
color: "black"
}
BaseText01
{
id:id_inputText
height: 50
width: parent.width*0.8
anchors
{
horizontalCenter:parent.horizontalCenter
top:id_titleText.bottom
topMargin:10
}
placeholderText: "请输入内容"
maximumLength: 30
focus: true
}
BaseButton02//取消按钮
{
id:id_cancelButton
height: id_inputText.height
width: id_inputText.width*0.4
releaseColor: "#F0F0F0"
pressedColor: "#F0F0F0"
anchors
{
left:id_inputText.left
top:id_inputText.bottom
topMargin:20
}
buttonText: "取消"
buttonColor:"#303030"
onSiqClickedLeft:
{
siqCancelClicked()
}
}
BaseButton02//确定按钮
{
id:id_okButton
height: id_cancelButton.height
width: id_cancelButton.width
anchors
{
verticalCenter:id_cancelButton.verticalCenter
right:id_inputText.right
}
buttonText: "确定"
onSiqClickedLeft:
{
siqOkClicked(id_inputText.text)
}
}
function funOpen(default_text)
{
id_inputText.text=default_text
id_popup.open()
}
function funClose()
{
id_popup.close()
}
}
包括标题、输入文本框、取消和确定按钮，对于新建对话框，只需要继承这个模块，标题和确认按钮做个性化处理即可，代码如下：
import QtQuick 2.0
import "../base"
//新建应用对话框
BaseEditDialog {
titleText: "新建应用"
onSiqCancelClicked:
{
funClose()
}
onSiqOkClicked:
{
if(text)
{
theCenterMan.requestNewApp(text)
}
funClose()
}
}从代码可以看出，点击取消就是关闭对话框，不会有其他操作；当点击确定后，如果文本内容有效，会调用C++后端进行新建应用请求。
五、重命名应用
重命名也是类似于新建应用的操作，继承于BaseEditDialog，代码如下：
import QtQuick 2.0
import "../base"
//重命名应用对话框
BaseEditDialog {
titleText: "重命名应用"
onSiqCancelClicked:
{
funClose()
}
}没有确认按钮对应的操作，那是因为重命名需要应用ID和应用名称，这个在已登录页面那里有，所以这个动作我们就在那里处理了，还是比较灵活的，具体代码如下：
AppRenameDialog//应用重命名编辑框
{
id:id_appRenameDialog
onSiqOkClicked:
{
if(text)
{
theCenterMan.requestRenameApp(currAppID, text)
}
funClose()
}
}
这里修改的名称只能是当前应用的，点击确定后前端就调用C++后端发送重命名请求了。
应用相关的页面制作差不多就这些了，其他界面还没完成，所以首页显得比较空，后续再逐步完善，下一阶段是分组管理的了。