物联网实战--平台篇之(七)应用界面设计

  

目录

一、米家APP分析

二、应用展示

三、应用列表

四、新建应用

五、重命名应用

本项目的交流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++后端发送重命名请求了。

        应用相关的页面制作差不多就这些了，其他界面还没完成，所以首页显得比较空，后续再逐步完善，下一阶段是分组管理的了。        

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/620372.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

快速配置 Nginx 来实现 GPT 流式传输

快速配置 Nginx 来实现 GPT 流式传输

目录 1. Nginx 参考配置2. Nginx 核心参数3. 其他参数 场景：代理 ChatGPT、代理各种 GPT 工具套壳等。 1. Nginx 参考配置 支持 GPT 流式访问的配置如下，请根据实际需求适当取舍即可： server {listen 80;server_name chat.test.com; # 绑…
阅读更多...
PCIE协议-2-事务层规范-Message Request Rules-Vendor_Defined Messages

PCIE协议-2-事务层规范-Message Request Rules-Vendor_Defined Messages

2.2.8.6 厂商定义消息 厂商定义消息允许扩展PCI Express消息功能，可以作为PCI Express规范的一般扩展，也可以是厂商特定的扩展。本节通用地定义了与这些消息相关的规则。 厂商定义消息（见表2-25）使用图2-28中显示的头标格式。re…
阅读更多...
Nios实验使用串口输出“Hello Nios-II”字符到笔记本电脑

Nios实验使用串口输出“Hello Nios-II”字符到笔记本电脑

目录 实验过程 创建工程 修改程序 编译工程 运行项目 效果实现 总结 参考 实验过程 硬件设计见博主上篇博客 软件部分设计 下面使用 Nios II Software Build Tools for Eclipse 来完成当前项目的软件开发。 启动 Nios II SBT 按照下图所示点击 Nios II Software Build…
阅读更多...
计算机网络复习-传输层

计算机网络复习-传输层

概念 传输层是进程与进程之间的通信使用端口(Port)来标记不同的网络进程端口(Port)使用16比特位表示(0~65535) UDP协议详解 UDP：用户数据报协议数据报：应用层传输过来的一个完整的数据不合并，不拆分 UDP的头部 UDP特点 UDP是无连接协…
阅读更多...
【R语言篇】医学生福音，全球疾病负担数据库GBD 2021即将更新！！！

【R语言篇】医学生福音，全球疾病负担数据库GBD 2021即将更新！！！

今天介绍即将于5月16日更新的全球疾病负担数据库GBD 2021，相信数据一经发表，过不了多久pubmed又将涌现一大波疾病负担相关文章。 Global Burden of Disease Study 2021 (GBD 2021) Data Resources | GHDx 在查找GBD相关文献方面，我个人还是比…
阅读更多...
PS的文字点阵 文字边缘虚 为什么在Ps中打出来的字是带有锯齿状模糊的？

PS的文字点阵 文字边缘虚 为什么在Ps中打出来的字是带有锯齿状模糊的？

此方法主要针对低像素文字 关键部分 (4 封私信 / 80 条消息) 为什么在Ps中打出来的字是带有锯齿状模糊的？ - 知乎 (zhihu.com)https://www.zhihu.com/question/54412515
阅读更多...
【牛客】SQL211 获取当前薪水第二多的员工的emp_no以及其对应的薪水salary

【牛客】SQL211 获取当前薪水第二多的员工的emp_no以及其对应的薪水salary

1、描述 有一个薪水表salaries简况如下： 请你获取薪水第二多的员工的emp_no以及其对应的薪水salary， 若有多个员工的薪水为第二多的薪水，则将对应的员工的emp_no和salary全部输出，并按emp_no升序排序。 2、题目建表 drop table …
阅读更多...
8个手机宝藏App，建议收藏！

8个手机宝藏App，建议收藏！

AI故事视频生成，一站式生成小说漫画推文、儿童故事、民间故事等https://aitools.jurilu.com/ 1.地图车机版——百度地图 百度地图，作为新一代的人工智能地图，以其智能语音、智能导航系统、智能路线规划和智能推荐方案而著称。它不仅提供传统…
阅读更多...
MATLAB模拟退火算法、遗传算法、蚁群算法、粒子群算法

MATLAB模拟退火算法、遗传算法、蚁群算法、粒子群算法

概况 模拟退火算法、遗传算法、蚁群算法、粒子群算法等算法，都是属于概率算法，不绝对，不迅速，能用其它方式解决的问题，不要用这些相对复杂的算法，比如有明确的线性关系或者非线性对应关系。这里的概率算法…
阅读更多...
IP跳变是什么，有什么作用？

IP跳变是什么，有什么作用？

IP跳变，简单来说，就是用户在使用网络时，不固定使用一个IP地址，而是定期或根据需求切换到另一个IP地址。这种技术为用户在网络环境中提供了一定的灵活性和安全性。 首先，我们来看看IP跳变的具体实现方式。当用户需要切…
阅读更多...
CUDA-均值滤波算法

CUDA-均值滤波算法

作者：翟天保Steven 版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处 实现原理 均值滤波是一种常见的图像处理方法，用于去除图像中的噪声。其原理很简单：对图像中的每个像素&a…
阅读更多...
高频电源模块TL22010-T2整流模块TL22010-T3用途

高频电源模块TL22010-T2整流模块TL22010-T3用途

直流屏充电模块TL22010-T2电源模块TL22010-T3，整流模块TL11010-T3，其他TL系列型号有：TL11020-T3，TL11010-T2，TL11020-T2，TL22010-T，TL-22010-T，TL-11010-T，TL-22005-T&am…
阅读更多...
排序-选择排序（selection sort）

排序-选择排序（selection sort）

选择排序（selection sort）的工作原理非常简单：开启一个循环，每轮从未排序区间选择最小的元素，将其放到已排序区间的末尾。选择排序的主要特点包括： 时间复杂度： 无论最好、最坏还是平均情况&…
阅读更多...
【图像增强（空域）】基于灰度变换的图像增强及Matlab仿真

【图像增强（空域）】基于灰度变换的图像增强及Matlab仿真

1. 摘要： 空域内的图像增强就是调整灰度图像的明暗对比度，对图像中各个像素的灰度值直接进行处理。常用的方法包括：灰度变换增强和直方图增强。 2. 原理： 灰度变换增强是空域ne对图像进行增强的一种简单且直接的方法。灰度变换…
阅读更多...
26版SPSS操作教程（高级教程第二十章）

26版SPSS操作教程（高级教程第二十章）

目录 前言 粉丝及官方意见说明 第二十章一些学习笔记 第二十章一些操作方法 神经网络与支持向量机 人工神经网络（artificial neural network，ANN） 假设数据 具体操作 结果解释 对案例的进一步分析 结果解释 ​编辑 尝试将模型复…
阅读更多...
Pikachu 靶场 XXE 通关解析

Pikachu 靶场 XXE 通关解析

前言 Pikachu靶场是一种常见的网络安全训练平台，用于模拟真实世界中的网络攻击和防御场景。它提供了一系列的实验室环境，供安全专业人士、学生和爱好者练习和测试他们的技能。 Pikachu靶场的目的是帮助用户了解和掌握网络攻击的原理和技术，…
阅读更多...
软件测评中心详细介绍

软件测评中心详细介绍

软件产品已成为企业和个人工作中不可或缺的一部分。然而，面对市场上琳琅满目的软件产品，用户如何判断其质量、性能及是否满足自身需求呢？这时，软件测评中心的作用就显得尤为重要。本文将详细介绍软件测评中心的定义、功能及其重要…
阅读更多...
【全开源】商会招商项目系统基于FastAdmin+ThinkPHP+Uniapp（源码搭建/上线/运营/售后/维护更新）

【全开源】商会招商项目系统基于FastAdmin+ThinkPHP+Uniapp（源码搭建/上线/运营/售后/维护更新）

一款基于FastAdminThinkPHPUniapp开发的商会招商项目系统，是一个集PC和移动端功能于一体的解决方案，线上线下进行服务，围绕 活动报名、在线课程、项目大厅、线下签到、会员系统等。为商会提供了更加便捷高效的管理方式，提升了商会…
阅读更多...
令牌桶算法：如何优雅地处理突发流量？

令牌桶算法：如何优雅地处理突发流量？

令牌桶算法的介绍 在网络流量控制和请求限流中，令牌桶算法是一种常用的策略。那么，令牌桶算法到底是什么呢？它的工作原理又是怎样的呢？让我们一起来探索一下。 令牌桶算法，顾名思义，就是有一个存放令牌的…
阅读更多...
【Redis】Redis数据类型

【Redis】Redis数据类型

目录 Redis五种数据类型 String字符串类型 字符串中最常使用的命令 List列表类型 List命令 Set与Zset集合类型 Redis五种数据类型 String字符串类型 有效的字符串类型不仅可以是字符，还可以是数字，以上都是有效的字符串类型。 String最大容量为51…
阅读更多...
最新文章

Copyright @ 2022~2023