qml保姆级教程五:视图组件

已于 2024-01-06 11:46:24 修改
阅读量391 收藏 6
点赞数
分类专栏： QML 文章标签： 开发语言 qt c++
于 2023-10-06 07:56:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73548574/article/details/133581356
版权

💂 个人主页:pp不会算法v
🤟 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

QML系列教程

QML教程一：布局组件

文章目录

  • 列表视图ListView
    • 属性
    • 信号
    • 函数
    • 示例
  • 网格视图GridView
    • 属性
    • 信号
    • 函数
    • 示例
  • 表格视图TableView
    • 属性
    • 信号
    • 方法
    • 示例
  • 滚动视图ScrollView
    • 属性
    • 示例
  • 树形视图TreeView
    • 属性
    • 信号
    • 函数
    • 示例
  • 分页视图TabView
    • 属性
    • 函数
    • 示例
  • 拆分视图SplitView
    • 属性
    • 函数
    • 示例
  • 滑动视图SwipeView
    • 属性
    • 示例
  • 路径视图PathView
    • 属性
    • 信号
    • 函数
    • 示例

列表视图ListView

属性

属性名是否只读说明默认值
add添加元素时的过渡效果。无
addDisplaced添加元素时其他元素受到影响的过渡效果。无
cacheBuffer缓存区域大小，用于视图快速滑动时提高性能。0
count只读列表项数量。0
currentIndex当前选中项的索引。-1
currentItem当前选中项的Item对象。null
currentSection只读当前选中项所在分段的标签。“”
delegate定义每个列表项的组件。null
displaced删除元素时其他元素受到影响的过渡效果。无
displayMarginBeginning起始边缘显示区域大小。0
displayMarginEnd结束边缘显示区域大小。0
effectiveLayoutDirection只读由 layoutDirection 和 QT 的国际化功能决定的实际布局方向。Qt.LeftToRight
footer列表脚部的组件。null
footerItem只读列表脚部的Item对象。null
footerPositioning列表脚部的位置。ListView.End
header列表头部的组件。null
headerItem只读列表头部的Item对象。null
headerPositioning列表头部的位置。ListView.Beginning
highlight当前选中项的视觉效果。null
highlightFollowsCurrentItem当前选中项改变时，是否更新 highlightItem 的属性。true
highlightItem只读当前选中项的Item对象。null
highlightMoveDuration视觉效果移动时长。250
highlightMoveVelocity视觉效果移动速度。0
highlightRangeMode高亮模式。ListView.StrictlyEnforceRange
highlightResizeDuration视觉效果大小变化时长。50
highlightResizeVelocity视觉效果大小变化速度。0
keyNavigationEnabled是否响应键盘导航事件。true
keyNavigationWraps是否在到达列表边界时循环导航。false
layoutDirection布局方向。Qt.LeftToRight
model列表使用的模型对象。null
move移动元素时的过渡效果。无
moveDisplaced移动元素时其他元素受到影响的过渡效果。无
orientation列表方向。Qt.Vertical
populate初始化时添加元素的过渡效果。无
preferredHighlightBegin高亮条的起始位置。0
preferredHighlightEnd高亮条的结束位置。0
remove删除元素时的过渡效果。无
removeDisplaced删除元素时其他元素受到影响的过渡效果。无
section分段列表项属性的信息。无
section.property分段属性名。undefined
section.criteria分段标准。ListView.Direct
section.delegate定义每个分段的组件。null
section.labelPositioning分段列表中标签的位置。ListView.SectionLeading
snapMode滑动到指定位置时是否对齐。ListView.NoSnap
spacing列表项之间的间距。0
verticalLayoutDirection垂直布局方向。ListView.TopToBottom

在这里插入图片描述

信号

信号名说明
add()添加元素后触发。
remove()删除元素后触发。

函数

方法名说明
decrementCurrentIndex()将 currentIndex 属性值减一。
forceLayout()强制进行重新布局。
incrementCurrentIndex()将 currentIndex 属性值加一。
indexAt(real x, real y)返回指定坐标处的列表项索引。
itemAt(real x, real y)返回指定坐标处的列表项 Item 对象。
positionViewAtBeginning()将当前视图滚动至最开始位置。
positionViewAtEnd()将当前视图滚动至最末尾位置。
positionViewAtIndex(int index, PositionMode mode)将视图滚动至指定索引处。关于 PositionMode 枚举类型的取值意义，可查看 官方文档。

示例

    ListView {
        id:view
        highlight: Item{Rectangle { color: "lightsteelblue"; radius: 5 }}
        focus: true
        spacing:10
        width: parent.width
        height: parent.height*(2/3)
        model:10
        orientation: "Horizontal"
        delegate:
            Rectangle {
            width: view.width/4
            height: view.height
            color: "pink"
            Text {
               // anchors.centerIn: parent
                text: "rect" + index
            }
        }

在这里插入图片描述

网格视图GridView

属性

属性名类型描述
addTransition在GridView中添加项的过渡动画
addDisplacedTransition在GridView中添加位移项的过渡动画
cacheBufferint缓存项数量
cellHeightreal单元格高度
cellWidthreal单元格宽度
countint项数
currentIndexint当前项的索引
currentItemItem当前项
delegateComponent用于创建项的委托
displacedTransition移除GridView中的位移项的过渡动画
displayMarginBeginningint起始边距
displayMarginEndint结束边距
effectiveLayoutDirectionenumeration有效布局方向（从左到右或从右到左）
flowenumeration流程方向（水平、垂直或倾斜）
footerComponent页脚组件
footerItemItem页脚项
headerComponent页眉组件
headerItemItem页眉项
highlightComponent高亮项的委托
highlightFollowsCurrentItembool高亮项是否始终跟随当前项
highlightItemItem要高亮的项
highlightMoveDurationint高亮项移动过渡时间（以毫秒为单位）
highlightRangeModeenumeration高亮项模式，用于指定将哪些项考虑为高亮范围
keyNavigationEnabledbool是否启用键盘导航
keyNavigationWrapsbool当到达最后一项或第一项时，是否循环到另一端
layoutDirectionenumeration布局方向（从左到右或从右到左）
modelmodel数据模型
moveTransition移除GridView中的项的过渡动画
moveDisplacedTransition移除GridView中的位移项的过渡动画
populateTransition在GridView中填充所有项的过渡动画
preferredHighlightBeginreal高亮框开始位置的推荐值
preferredHighlightEndreal高亮框结束位置的推荐值
removeTransition移除GridView中的项的过渡动画
removeDisplacedTransition移除GridView中的位移项的过渡动画
snapModeenumeration自动对齐模式（禁用、开始、中间或结束位置）
verticalLayoutDirectionenumeration垂直布局方向（从上到下或从下到上）

在这里插入图片描述

信号

信号名描述
add()当在GridView中添加项时发出
remove()当在GridView中删除项时发出
currentIndexChanged(int index)当当前项的索引更改时发出

函数

函数名描述
forceLayout()强制对GridView进行重新布局
indexAt(real x, real y)返回位于指定坐标的项的索引
itemAt(real x, real y)返回位于指定坐标的项
moveCurrentIndexDown()将当前项向下移动一格
moveCurrentIndexLeft()将当前项向左移动一格
moveCurrentIndexRight()将当前项向右移动一格
moveCurrentIndexUp()将当前项向上移动一格
positionViewAtBeginning()将视图位置设置为第一项
positionViewAtEnd()将视图位置设置为最后一项
positionViewAtIndex(int index, PositionMode mode)将视图位置设置为指定索引处的项，使用指定的位置模式

示例

    GridView {
        width: 300; height: 200
        cellWidth: 80; cellHeight: 80
       
        model: ListModel {
            ListElement { name: "Alice"; number: "1234" }
            ListElement { name: "Bob"; number: "5678" }
            ListElement { name: "Charlie"; number: "91011" }
        }
        Component {
            id: contactsDelegate
            Rectangle {
                id: wrapper
                width:120
                height: 80
                color: GridView.isCurrentItem ? "black" : "red"
                Text {
                    id: contactInfo
                    text: name + ": " + number
                    color: wrapper.GridView.isCurrentItem ? "red" : "black"
                }
            }
        }

        delegate: contactsDelegate
        focus: true
    }

在这里插入图片描述

表格视图TableView

好的，以下是根据你提供的属性、信号和方法的详细表格，使用Markdown语法排版：

属性

属性名类型描述
columnSpacingreal列间距
columnWidthProvidervar列宽度提供者
columnsint列数
contentHeightreal内容高度
contentWidthreal内容宽度
delegateComponent项委托
modelmodel模型
reuseItemsbool是否重用项
rowHeightProvidervar行高度提供者
rowSpacingreal行间距
rowsint行数
viewTableView所属的TableView视图

信号

信号名描述
pooled()池化时触发的信号
reused()重用时触发的信号

方法

方法名描述
forceLayout()强制重新布局

示例

    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }
    TableView {
        TableViewColumn {
            role: "title"
            title: "Title"
            width: 100
        }
        TableViewColumn {
            role: "author"
            title: "Author"
            width: 200
        }
        model: libraryModel
    }

在这里插入图片描述

滚动视图ScrollView

属性

属性说明
contentChildren : list该列表包含已在QML中声明为视图的子项的所有项。
contentData : list该列表包含已在QML中声明为视图的子对象的所有对象。

示例

    ScrollView {
         width: 200
         height: 200
         clip: true

         Label {
             text: "ABC"
             font.pixelSize: 224
         }
     }

在这里插入图片描述

树形视图TreeView

属性

属性描述
currentIndex当前选中的 table view 单元格
itemDelegate表格单元格使用的代理组件
model用于显示表格数据的 model
rootIndex表示模型中一个项目的索引，它可作为 TableView 视图项的根索引
section指定表头的一般特性以及每个表头所代表的列或行的选择准则
selection存储当前所选项的模型。

信号

信号描述
activated(QModelIndex index)当用户双击或者按下 Enter 键时发出。
clicked(QModelIndex index)当用户单击一个单元格时发出
collapsed(QModelIndex index)当用户折叠一个项时发出
doubleClicked(QModelIndex index)当用户双击一个单元格时发出
expanded(QModelIndex index)当用户展开一个项时发出
pressAndHold(QModelIndex index)当用户按住一个项时发出

函数

函数描述
void collapse(QModelIndex index)折叠一个项
void expand(QModelIndex index)展开一个项
QModelIndex indexAt(int x, int y)返回在点 (x, y) 处找到的表格单元格的 QModelIndex；如果这个点不在任何一个表格单元格内，则返回无效的 QModelIndex
bool isExpanded(QModelIndex index)检查给定的索引是否已经展开

示例

    ListModel {
         id: fileSystemModel
         ListElement {
             fileName: "file1.txt"
             filePermissions: "rw"
         }
         ListElement {
             fileName: "file2.doc"
             filePermissions: "r"
         }
         ListElement {
             fileName: "file3.jpg"
             filePermissions: "r"
         }

     }

     TreeView {
         width: parent.width
         height: parent.height

         TableViewColumn {
             title: "Name"
             role: "fileName"
             width: 300
         }

         TableViewColumn {
             title: "Permissions"
             role: "filePermissions"
             width: 150
         }

         model: fileSystemModel
     }

分页视图TabView

属性

属性名类型描述
contentItemItemTabView 的内容项。
countint当前的标签页数量。
currentIndexint当前选中的标签页索引。
frameVisiblebool标签页内容周围边框的可见性。
tabPositionint标签的位置，默认为顶部。可选值为 Qt.TopEdge（顶部）和 Qt.BottomEdge（底部）。
tabsVisiblebool标签栏的可见性。

函数

函数名参数类型描述
addTabstring, Component添加一个指定标题和组件的新标签页。
getTabint返回指定索引处的 Tab 对象。
insertTabint, string, Component在指定索引处插入一个具有指定标题和组件的新标签页。
moveTabint, int将一个标签页从一个索引位置移动到另一个。
removeTabint移除并销毁指定索引处的标签页。

示例

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

在这里插入图片描述

拆分视图SplitView

SplitView是一个控件，用于水平或垂直排列项目，每个项目之间有一个可拖动的拆分器。
SplitView中始终有一个（并且只有一个）项目的Layout.fillWidth设置为true（或者Layout.fillHeight，如果方向为Qt.Vertical）。这意味着在布局其他项目时，该项目将获得所有剩余空间。默认情况下，SplitView的最后一个可见子项将具有此设置，但可以通过在另一个项上将fillWidth显式设置为true来更改此设置。
由于fillWidth项目将自动调整大小以适应额外的空间，因此将忽略对其宽度和高度属性的显式指定（但仍将尊重Layout.miminimumWidth和Layout.maxiumWidth）。其他项目的初始尺寸应通过其宽度和高度属性进行设置。一旦用户拖动项目的拆分器句柄，对该项目的宽度或高度的任何绑定分配都将被打断。
手柄可以属于左侧或上侧的项目，也可以属于右侧或下侧的项目： 如果fillWidth项在右侧：则句柄属于左侧项。
如果fillWidth项在左侧：句柄属于右侧项。

属性

属性名类型描述
handleDelegateComponent定义拖拽调整分割条操作时使用的图形元素。
orientationint分割条的方向。可选值为 Qt.Horizontal（水平方向）和 Qt.Vertical（竖直方向）。
resizingbool指定是否允许用户拖拽调整分割条大小。默认值为 true。

函数

函数名参数类型描述
addItemItem在 SplitView 中添加一个项。
removeItemItem从 SplitView 中移除一个项。

示例

 SplitView {
     anchors.fill: parent
     orientation: Qt.Horizontal

     Rectangle {
         width: 200
         Layout.maximumWidth: 400
         color: "lightblue"
         Text {
             text: "View 1"
             anchors.centerIn: parent
         }
     }
     Rectangle {
         id: centerItem
         Layout.minimumWidth: 50
         Layout.fillWidth: true
         color: "lightgray"
         Text {
             text: "View 2"
             anchors.centerIn: parent
         }
     }
     Rectangle {
         width: 200
         color: "lightgreen"
         Text {
             text: "View 3"
             anchors.centerIn: parent
         }
     }
 }

在这里插入图片描述

滑动视图SwipeView

允许滑动的多页窗口

属性

属性名是否只读说明默认值
horizontal只读是否为横向的滑动视图。无
interactive是否允许用户进行交互操作。true
orientation视图的方向，可选值为“Horizontal”和“Vertical”。“Horizontal”
vertical只读是否为纵向的滑动视图。无

示例

   SwipeView {
        id: view

        currentIndex: 1
        anchors.fill: parent

        Item {
            id: firstPage
            Text{
                anchors.centerIn:parent
                text:"第一页"
            }
        }
        Item {
            id: secondPage
            Text{
                anchors.centerIn:parent
                text:"第二页"
            }
        }
        Item {
            id: thirdPage
            Text{
                anchors.centerIn:parent
                text:"第三页"
            }
        }
    }

    //页面指示器
    PageIndicator {
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }

在这里插入图片描述

路径视图PathView

属性

属性名类型描述
cacheItemCountint缓存的项数量
countint项的总数
currentIndexint当前选中项的索引
currentItemItem当前选中的项
delegateComponent定义了每个项的视觉外观和布局
dragMarginreal拖拽操作的边距
draggingbool是否正在拖拽
flickDecelerationreal手势滑动减速度，用于控制滑动停止的速度
flickingbool是否正在进行手势滑动
highlightComponent高亮项的视觉外观
highlightItemItem高亮的项
highlightMoveDurationint高亮项移动的持续时间
highlightRangeModeenumeration高亮范围模式，定义了如何确定高亮项的范围
interactivebool是否可以与 PathView 进行交互
maximumFlickVelocityreal手势滑动的最大速度
modelmodel数据源模型
movementDirectionenumeration项之间的移动方向
movingbool是否正在进行项之间的移动
offsetreal视图相对于其内容的偏移量
pathPath定义路径视图的路径
pathItemCountint路径中的项的数量
preferredHighlightBeginreal高亮范围的起始位置，参考值为 0-1
preferredHighlightEndreal高亮范围的结束位置，参考值为 0-1
snapModeenumeration对齐模式，定义了如何对齐项

附加属性：

属性名类型描述
isCurrentItembool是否为当前选中的项
onPathbool指示项是否在路径上
viewPathView关联的 PathView 对象

信号

信号名描述
dragEnded()拖拽结束时发射
dragStarted()拖拽开始时发射
flickEnded()手势滑动结束时发射
flickStarted()手势滑动开始时发射
movementEnded()项移动结束时发射
movementStarted()项移动开始时发射

函数

函数名参数类型描述
decrementCurrentIndex()当前选中项索引减1
incrementCurrentIndex()当前选中项索引加1
indexAt(real x, real y)real, real返回指定位置处的索引
itemAt(real x, real y)real, real返回指定位置处的项
positionViewAtIndex(int index, PositionMode mode)int, PositionMode将视图滚动到指定索引位置

示例

    Rectangle
    {
        anchors.fill: parent
        Component
        {
            id: delegate
            Column
            {
                id: wrapper
                opacity: PathView.isCurrentItem ? 1 : 0.5
                Image
                {
                    anchors.horizontalCenter: nameText.horizontalCenter
                    width: 64; height: 64
                    source: icon
                }
                Text
                {
                    id: nameText
                    text: name
                    font.pointSize: 16
                }
            }
        }

        PathView
        {
            anchors.fill: parent
            model: ListModel
            {
                ListElement
                {
                    name: "1"
                    icon: "qrc:/qml.jpg"
                }
                ListElement
                {
                    name: "2"
                    icon: "qrc:/qml.jpg"
                }
                ListElement
                {
                    name: "3"
                    icon: "qrc:/qml.jpg"
                }
            }

            delegate: delegate
            path: Path
            {
                startX: 120; startY: 100
                PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
                PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
            }
        }
    }

在这里插入图片描述

pp不会算法^v^
关注
专栏目录
qml入门教程（21）：qml列表控件ListView用法介绍
琅嬛福地
12-04 1568
ListView 是 Qt Quick (QML) 中的列表控件，用于创建一个可以滚动的列表。每个列表项都是根据模型（Model）来创建的，它可以是静态的列表或者是动态的数据集合，例如从数据库中获取的数据。视图（View）将这些数据以列表的形式展现出来，而代理（Delegate）则定义了如何将每个数据项渲染到视图中。
cmake-qml-plugin-example：用CMake编写的QML插件示例
02-05
这是一个很好的教程和实例（ ， ， ）如何编写一个带QMAKE一个QML模块，但没有很多的例子来说明如何通过CMake做到这一点。 这个项目展示了如何创建一个基本的CMake QML插件，该插件将， 和导出到QML引擎。 项目结构...
【QT教程】QT6 QML界面布局艺术
QT界面开发界面美化
04-12 1636
QT6 QML界面布局艺术 使用AI技术辅助生成QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C++扩展开发视频课程免费QT视频课程 您可以看免费1000+个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费QT视频课程 QT界面美化视频免费看QT6_QML布局容器概述 QT6 QML布局容器概述 QT6 QML是Qt框架的最新版本，它提供了一套丰富的布局容器，用于在用户界面中排列和定位元素。这些布局容
QML TreeView 简单使用
YumOS的博客
06-15 3244
QML TreeView 是 Qt Quick 中的一个组件，用于显示树形结构的数据。它提供了一种以层次结构方式展示数据的方式，其中每个节点可以包含子节点。Model-View 架构：QML TreeView 遵循 Model-View 架构，其中数据模型（通常是 QAbstractItemModel 的子类）负责提供数据，而视图组件则负责显示和交互。数据模型提供了节点层次结构以及每个节点的数据。Delegate 委托：TreeView 使用委托来定义每个节点的外观和行为。
【QML之·组件】
最新发布
m0_66203017的博客
07-24 596
组件是QML中的一个重要概念，它是用户界面的构建块。组件是可重用的，可以在不同的界面中使用。每个组件都有自己的属性、信号和方法，可以通过绑定和事件处理来实现界面的动态更新和交互。QML中的组件可以包含其他组件，从而形成一个嵌套的层次结构。这样的组件层次结构可以帮助开发者更好地组织和管理用户界面的复杂性。组件之间可以通过属性绑定和信号槽机制进行通信，使得界面的更新和交互变得灵活和可扩展。通过定义自定义的组件，开发者可以将常见的界面元素（如按钮、文本框、列表等）封装为可重用的组件，以提高开发效率。
QML之TreeView的使用
qq_33271629的博客
03-20 1488
注: 测试环境为Opensuse 15.5 + Qt 6.6.2。如果有大神知道其他解决办法的，请评论区发出来。
qml中使用TreeView实现指定文件目录的显示
zyd976929992的博客
08-26 1044
使用qml的TreeView和QStandardItemModel子类实现文件系统指定的目录的显示功能
《快速掌握QML》第五章 组件
热爱代码
07-20 732
当项目中出现很多重复代码时，我们会选择把这些重复代码编写成一个函数，这样可以让代码更加精简。组件的作用就跟函数一样，我们把重复的元素提取出来，编成一个组件，这样就可以减少很多QML代码了，非常方便。.....................
TreeView QML类型
aggs1990的专栏
09-25 764
​提供树视图以显示QAbstractItemModel中的数据。更多。。。
qml-mvp-example:带有 QML 和 Widget 视图的 MVP 模式示例
07-03
这里特别提到了结合了 QML 和 Widget 视图，意味着项目同时使用了 Qt 的两种用户界面技术。 **描述解析：** 描述简单明了，再次强调这是一个包含 QML 和 Widget 视图的 MVP 模式示例。这暗示项目可能包含了如何在...
QML-UI-Animations:不同艺术家的各种UI概念的QML实现
05-01
QML-UI-动画 不同艺术家的各种UI概念的QML实现 登录的 enszgr创建的登录概念的实现： ://ens.ninja/login-concept.html 相关博客文章：http: 卡片菜单 Gal Shir创建的菜单概念的实现： : 向上滑动显示由 向上...
qml中treeview用法
11-01
qml中treeview的用法，界面跟后端数据交互，简单的教学例子
QT QML Quick Controls2（Swipe View滑动翻页以及隐藏面板）
03-30
为智能手机或桌面应用提供滑动翻页功能，将不同主题和子应用分别在不同页面上，还提供隐藏面板，将详细信息隐藏在其中。
vscode-qt-qml-vcpkg-template:VSCode Qt（QML）vcpkg模板
04-02
vscode-qt-qml-vcpkg-模板 优点 VSCode上的调试和代码格式化要快得多 快速运行windeploy 。 缺点 VSCode CMake的构建要比Qt Creator慢，但是，您可以同时使用VSCode和Qt Creator，只需掌握本质并丢弃残渣即可。 如果...
Qt6 QML TreeView 基本使用
龚建波
04-24 5720
Qt6.3 终于新增了一个 TreeView，之前 Controls1 中的 TreeView 废弃后，一直没出新的 TreeView 组件。先不说这个新的 TreeView 是继承自 TableView 的，光是看只有几百行源码，就感觉又是个半成品。此外，还附带提供了一个 TreeViewDelegate 默认的 delegate 实现。 TreeView 文档：https://doc.qt.io/qt-6/qml-qtquick-treeview.html TreeView 继承自 TableVie
qml中树形结构控件TreeView的使用，以及其继承QAbstractItemModel的model的使用方式
qq_23604781的博客
09-22 1532
qml中树形结构控件TreeView的使用，以及其继承QAbstractItemModel的model的使用方式
QML —— 示例 - Component自定义组件及加载（附完整源码）
wx微信公众号“码农总动员”，获取更多编程知识
01-08 1028
QML —— 示例 - Component自定义组件及加载（附完整源码）
QML类型：Component（组件）
友善啊，朋友的博客
09-29 7123
一、描述 组件是可重用、封装的 QML 类型，具有明确定义的接口。 组件通常由组件文件定义 - 即 .qml 文件，一个.qml文件就是一个组件。而 Component 类型本质上允许在 QML 文档中内联定义 QML 组件，而不是作为单独的 QML 文件。 例如，下面是一个被多个 Loader 对象使用的组件： import QtQuick 2.0 Item { width: 100; height: 100 Component { id: red
QML自定义一个TreeView，使用ListView递归
龚建波
05-26 8189
0.前言 在 Qt5 的 QtQuick.Controls 2.x 中还没有 TreeView 这个控件（在 Qt6 中出了一个继承自 TableView 的 TreeView），而且 QtQuick.Controls 1.x 中的也需要配合 C++ model 来自定义，对于一些简单的需求还要写 C++ model 就显得费事儿。 参照别人的自定义 TreeView 实现，我也使用 ListView 嵌套的方式做了一个简易的 TreeView，主要功能就是根据 json 结构来生成一个树状列表。 （
Qt教程：QML组件与Qt Quick Designer解析
"这篇资源是关于QML组件的学习材料，主要摘自《点集拓扑讲义》(熊金城编)的课后答案，同时包含了一篇介绍Qt Quick Designer和QML语言基础的文章。文章强调了QML组件在QT开发中的重要性，并通过实例展示了如何创建和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pp不会算法^v^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值