首页 > 其他分享 >024-第三代软件开发-TabView

024-第三代软件开发-TabView

时间:2023-10-29 13:08:05浏览次数:38  
标签:软件开发 title color TabView 024 currentIndex Tab QML


024-第三代软件开发-TabView_TabView

第三代软件开发-TabView


文章目录

  • 第三代软件开发-TabView
  • 项目介绍
  • TabView
  • 官方示例
  • 项目实际使用



关键字:

Qt

Qml

TabView

关键字4

关键字5

项目介绍

欢迎来到我们的 QML & C++ 项目!这个项目结合了 QML(Qt Meta-Object Language)和 C++ 的强大功能,旨在开发出色的用户界面和高性能的后端逻辑。

在项目中,我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件,我们能够迅速开发出丰富多样的界面效果和动画效果。同时,我们利用 QML 强大的集成能力,轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

在后端方面,我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言,能够提供卓越的性能和可扩展性。我们的团队致力于优化代码,减少资源消耗,以确保我们的项目在各种平台和设备上都能够高效运行。

无论您是对 QML 和 C++ 开发感兴趣,还是需要我们为您构建复杂的用户界面和后端逻辑,我们都随时准备为您提供支持。请随时联系我们,让我们一同打造现代化、高性能的 QML & C++ 项目!

重要说明☝

TabView

最近搭框架的时候,非常喜欢使用TabView,为啥呢,感觉方面,领导不喜欢了,OK,增加一页,currentIndex值改一下OK,那天领导心血来潮想换回来的时候,在改一下currentIndex值改一下OK,哈哈哈。说是这么说,不过按照我的代码洁癖,没用的代码是不会出现在项目工程里面的。

回归整体,官方对TabView的描述如下

TabView provides tab-based navigation model for your application. For example, the following snippet uses tabs to present rectangles of different color on each tab page

TabView 为您的应用程序提供基于选项卡的导航模型。 例如,以下代码片段使用选项卡在每个选项卡页上呈现不同颜色的矩形

官方示例

TabView {
     Tab {
         title: "Red"
         Rectangle { color: "red" }
     }
     Tab {
         title: "Blue"
         Rectangle { color: "blue" }
     }
     Tab {
         title: "Green"
         Rectangle { color: "green" }
     }
 }


024-第三代软件开发-TabView_Qml_02

在项目里面,肯定是不能这么用的,是不是,怎么也得和美工小姐姐友好交流一下,所以样式少不了,不过TabView 是Quick 1 带的产物,所以样式上,我们还是可以看到使用了style

TabView {
     id: frame
     anchors.fill: parent
     anchors.margins: 4
     Tab { title: "Tab 1" }
     Tab { title: "Tab 2" }
     Tab { title: "Tab 3" }

     style: TabViewStyle {
         frameOverlap: 1
         tab: Rectangle {
             color: styleData.selected ? "steelblue" :"lightsteelblue"
             border.color:  "steelblue"
             implicitWidth: Math.max(text.width + 4, 80)
             implicitHeight: 20
             radius: 2
             Text {
                 id: text
                 anchors.centerIn: parent
                 text: styleData.title
                 color: styleData.selected ? "white" : "black"
             }
         }
         frame: Rectangle { color: "steelblue" }
     }
 }

如果到这里就结束,那估计看官们得在评论去骂死我,以前还百度百度呢,现在都直接把官方文档放进来就收费了,不过,官方文档确实香,强烈推荐!

项目实际使用

我在项目中用起来很简单,我现在就两个模块,一个登录模块,一个主核心模块,等登录成功了,就给我切换到主模块,当主模块发送退出信号的时候,就切回到登录模块,就这么简单,看看我的代码

/*
      主UI框架
     */
    TabView
    {
        id:tabview_mainFrame
        anchors.fill: parent
        frameVisible: false
        tabsVisible: false
        currentIndex: 0
        Tab
        {
            id: loginTab
            /**
              登录窗口
              */
            Login
            {
                id:login_Component
                anchors.fill: parent
                visible: true
                onSignalEnterMainWindow: tabview_mainFrame.currentIndex = 1;
            }
        }
        Tab
        {
            /**
              主窗口
              */
            MainWindow
            {
                id:mainwindow_Component
                anchors.fill: parent
                onSignalReturnLogin: tabview_mainFrame.currentIndex = 0;
                onSignalLockScreen:
                {
                    tabview_mainFrame.currentIndex = 0;
                    tabview_mainFrame.getTab(tabview_mainFrame.currentIndex).item.lockScreen()
                }
                onSignalCloseSystem:
                {
                    keymonitor.closeSystem()
                }
            }
        }
    }

这里就说一点,就是在Tab1中,我们是无法通过ID访问Tab2中的控件的,因为Tab不是一上来全部都创建出来,只有当显示的时候,才会创建,所以要想夸Tab访问,需要使用getTab(index).item访问

这里咱们找个大冤种抄下作业



024-第三代软件开发-TabView_TabView_03

内容也不多,咱们直接抄过来吧

属性别名方式

property alias tab_1: tab_1
...
tabView.tab_1.title = "UUUUU";

使用属性contentItem+children方式

tabView.contentItem.children[0].title = “UUUUU”;

使用成员函数getTab()方式

tabView.getTab(tabView.currentIndex).title = "UUUUU";

这里这位博主在语句的结尾还加了**;**,其实咱们在QML中是如果你一行只有一条语句是不用加的,当然,加上也没有啥问题。


024-第三代软件开发-TabView_TabView_04


标签:软件开发,title,color,TabView,024,currentIndex,Tab,QML
From: https://blog.51cto.com/DreamLife/8079844

相关文章

  • 022-第三代软件开发-QCustomPlot核心迁移
    第三代软件开发-QCustomPlot核心迁移文章目录第三代软件开发-QCustomPlot核心迁移项目介绍先说点GitHubCopilotQCustomPlot核心迁移QQuickPaintedItemXXX_QCustomChart关键字:Qt、Qml、QCustomPlot、GitHubCopilo、关键字5项目介绍欢迎来到我们的QML&C++项目!这个项目......
  • 027-第三代软件开发_ComboBox
    第三代软件开发_ComboBox文章目录第三代软件开发_ComboBox项目介绍ComboBox实际使用关键字:Qt、Qml、ComboBox、delegate、Connections项目介绍欢迎来到我们的QML&C++项目!这个项目结合了QML(QtMeta-ObjectLanguage)和C++的强大功能,旨在开发出色的用户界面和高性能的......
  • 2023-2024-1 20231308 《计算机基础与程序设计》第五周学习总结
    2023-2024-120231308《计算机基础与程序设计》第五周学习总结作业信息这个作业属于哪个课程2023-2024-1-计算机基础与程序设计这个作业要求在哪里2023-2024-1计算机基础与程序设计第五周作业这个作业的目标<关于机器语言与汇编语言,pep9的相关应用,循坏算法的了解......
  • 2023-2024-1 20231403 《计算机基础与程序设计》第五周学习总结
    作业信息这个作业属于哪个课程<班级的链接>(如2022-2023-1-计算机基础与程序设计)这个作业要求在哪里(2023-2024-1计算机基础与程序设计第五周作业)这个作业的目标自学《计算机科学概论》第6章,《C语言程序设计》第4章作业正文https://www.cnblogs.com/lsrmy/p/177......
  • 2023-2024-1 20231416 《计算机基础与程序设计》第五周总结
    作业信息作业属于哪个课程https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP作业要求在哪里https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP/homework/13009作业的目标自学《计算机科学概论》第6章和《C语言程序设计》第4章作业正文 https://www......
  • 2023-2024-1 20231306 《计算机基础与程序设计》第五周学习总结
    这个作业属于哪个课程2023-2024-1-计算机基础与程序设计这个作业要求在哪里2023-2024-1计算机基础与程序设计第五周作业)这个作业的目标Pep/9虚拟机、机器语言与汇编语言、算法与伪代码测试:黑盒,白盒作业正文https://www.cnblogs.com/zwywuhu/p/17785563.html......
  • 2023-2024-1 20231329《计算机程序与设计》第五周学习总结
    作业信息这个作业属于哪个课程https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP这个作业要求在哪里https://www.cnblogs.com/rocedu/p/9577842.html#WEEK05这个作业的目标计算机科学概论第6章并完成云班课测试《C语言程序设计》第4章并完成云班课测试......
  • 2023-2024-1-20231317<<计算机基础与程序设计>>第五周学习总结
    《计算机基础与程序设计》第五周学习总结作业信息这个作业属于哪个课程<班级的链接>(2023-2024-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(如2023-2024-1计算机基础与程序设计第五周作业)这个作业的目标<学习《C语言第五章选择控制结构、第六章循......
  • 2023-2024-1 20211306 密码系统设计与实现课程学习笔记7
    20211306密码系统设计与实现课程学习笔记7任务详情自学教材第4章,提交学习笔记知识点归纳以及自己最有收获的内容,选择至少2个知识点利用chatgpt等工具进行苏格拉底挑战,并提交过程截图,提示过程参考下面内容“我在学***X知识点,请你以苏格拉底的方式对我进行提问,一次一个问题......
  • 2023-2024-1 20231312《计算机基础与程序设计》第5周学习总结
    作业信息这个作业属于哪个课程<班级的链接>2023-2024-1-计算机基础与程序设计|-这个作业要求在哪里<作业要求链接>2023-2024-1计算机基础与程序设计第四周作业|这个作业的目标《计算机基础概论》第6章《C语言程序设计》第4章|作业正文作业链接教材学习......