QML GridView 布局：网格排布与排列方向-北京尧图网络

目录基础网格演示代码排列方向演示代码三个方向属性工程下载GridView 和 ListView 的使用方式有点像通过model提供数据、delegate定义每一项的外观。区别在于 GridView 把所有项构建成二维网格横向、竖向两个方向都随意排列做应用宫格、相册缩略图、图片墙都很顺手。这篇先用最基础的写法展示 GridView 如何构建二维网格接着展示flow、layoutDirection、verticalLayoutDirection三个方向属性是什么效果。基础网格一组兴趣标签铺成网格每项占满一个固定大小的格子卡片之间留出间隙。演示代码import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... // 内容卡片 Rectangle { Layout.fillWidth: true Layout.fillHeight: true color: #fafafa radius: 8 border.color: #e0e0e0 border.width: 1 GridView { id: grid anchors.fill: parent anchors.margins: 10 clip: true cellWidth: 80 cellHeight: 80 model: ListModel { ListElement { name: 音乐 } ListElement { name: 电影 } ListElement { name: 读书 } ListElement { name: 旅行 } ListElement { name: 摄影 } ListElement { name: 编程 } ListElement { name: 运动 } ListElement { name: 美食 } ListElement { name: 游戏 } ListElement { name: 绘画 } ListElement { name: 烘焙 } ListElement { name: 露营 } } // delegate 占满整个单元格内部卡片再留出间距 delegate: Item { required property int index required property string name width: grid.cellWidth height: grid.cellHeight Rectangle { anchors.fill: parent anchors.margins: 4 radius: 8 color: #FFFFFF border.color: #e0e0e0 border.width: 1 Column { anchors.centerIn: parent spacing: 4 Text { anchors.horizontalCenter: parent.horizontalCenter text: name color: #333 font.pointSize: 12 font.bold: true } Text { anchors.horizontalCenter: parent.horizontalCenter text: index 1 color: #999 font.pointSize: 9 } } } } } } // 状态提示 Text { Layout.fillWidth: true text: 共 grid.count 项 font.pointSize: 10 color: #666 } } }格子的大小由cellWidth和cellHeight决定delegate 的根元素把宽高直接绑到这两个值上就等于占满整个格子。卡片本身另套一层 Rectangle用 anchors.margins 留出 4px 间隙相邻两项才不会挤在一起。model 用 ListModel 描述每个ListElement定义一个 name 字段delegate 里用required property string name取出来。index是网格自动给每项编的位置从0开始这里加1后显示在名字下面方便对照顺序。count是只读属性直接读就是总项数底部那行统计就是这么来的。适用场景应用宫格入口、兴趣标签墙、图片缩略图总览。排列方向同样的网格用三个开关切换flow、layoutDirection、verticalLayoutDirection能拼出好几种排布。演示代码import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... // 控制条 RowLayout { Layout.fillWidth: true spacing: 12 // flow 可选 FlowLeftToRight / FlowTopToBottom CheckBox { id: flowCheck text: 先竖排 font.pointSize: 10 } // layoutDirection 可选 LeftToRight / RightToLeft CheckBox { id: rtlCheck text: 水平反向 font.pointSize: 10 } // verticalLayoutDirection 可选 TopToBottom / BottomToTop CheckBox { id: bottomUpCheck text: 垂直反向 font.pointSize: 10 } Item { Layout.fillWidth: true } Text { text: 共 grid.count 项 font.pointSize: 10 color: #666 } } // 内容卡片 Rectangle { Layout.fillWidth: true Layout.fillHeight: true color: #fafafa radius: 8 border.color: #e0e0e0 border.width: 1 GridView { id: grid anchors.fill: parent anchors.margins: 10 clip: true cellWidth: 70 cellHeight: 60 flow: flowCheck.checked ? GridView.FlowTopToBottom : GridView.FlowLeftToRight layoutDirection: rtlCheck.checked ? Qt.RightToLeft : Qt.LeftToRight verticalLayoutDirection: bottomUpCheck.checked ? GridView.BottomToTop : GridView.TopToBottom model: 40 delegate: Item { required property int index width: grid.cellWidth height: grid.cellHeight Rectangle { anchors.fill: parent anchors.margins: 4 radius: 8 color: #FFFFFF border.color: #e0e0e0 border.width: 1 Text { anchors.centerIn: parent text: index 1 color: #333 font.pointSize: 12 font.bold: true } } } } } } }flow管主方向GridView.FlowLeftToRight 是默认值先横着排满一行再换下一行换成 GridView.FlowTopToBottom 后变成先竖着排满一列再排下一列滚动方向也跟着从纵向换成横向。layoutDirection 管水平方向切到 Qt.RightToLeft 时格子从右边开始摆放verticalLayoutDirection 管垂直方向GridView.BottomToTop 让内容从底部往上填。verticalLayoutDirection有个地方要留意它只有在内容超过一屏时才看得出来。内容没占满视图的时候BottomToTop 和 TopToBottom 显示得一模一样所以这个例子把项数放到了 40专门撑出纵向滚动勾上「垂直反向」才能看到内容从底部开始排。另外model这里直接写了数字 40是 GridView 的简写方式表示有 40 项delegate 里只能拿到index。三个方向属性属性控制什么取值flow先横排还是先竖排GridView.FlowLeftToRight/GridView.FlowTopToBottomlayoutDirection水平排列方向Qt.LeftToRight/Qt.RightToLeftverticalLayoutDirection垂直排列方向GridView.TopToBottom/GridView.BottomToTop工程下载我的 Qt 版本Qt 6.12操作系统Windows 11GitHubQML 示例合集V2.0 - qml_gridview

QML GridView 布局：网格排布与排列方向

相关推荐

数字转换罗马数字

风塔设备管理系统备件管理模块详解：从料号、库位到在用备件与寿命预警

硬件底层揭秘：从信号到操作系统

更多资讯

eNSP综合组网实验：VLAN、单臂路由与静态路由全流程

企业级Kubernetes集群落地指南：从容器到编排的完整实践

Python家庭财务系统源码实战：从解压到月度结账闭环

ASP.NET WebForms家庭财务系统源码解析与部署指南

YOLOv8魔改与部署实战：从Backbone到TensorRT的完整指南

C#高性能Modbus TCP：零拷贝、内存池与管道化架构实践

今日更新

电商智能运营体系从0到1：架构设计、落地步骤与避坑指南

压缩空气储能与热网热惯性联合优化调度：热电联产系统建模与求解

若依框架AI代码生成不稳定？用Agent Skill三层结构+五步法搞定

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？