目錄基礎網格演示代碼排列方向演示代碼三個方向屬性工程下載GridView 和 ListView 的使用方式有點像通過model提供數據、delegate定義每一項的外觀。區(qū)別在于 GridView 把所有項構建成二維網格橫向、豎向兩個方向都隨意排列做應用宮格、相冊縮略圖、圖片墻都很順手。這篇先用最基礎的寫法展示 GridView 如何構建二維網格接著展示flow、layoutDirection、verticalLayoutDirection三個方向屬性是什么效果?；A網格一組興趣標簽鋪成網格每項占滿一個固定大小的格子卡片之間留出間隙。演示代碼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 } } } } } } // 狀態(tài)提示 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 布局：網格排布與排列方向
目錄基礎網格演示代碼排列方向演示代碼三個方向屬性工程下載GridView 和 ListView 的使用方式有點像通過model提供數據、delegate定義每一項的外觀。區(qū)別在于 GridView 把所有項構建成二維網格橫向、豎向兩個方向都隨意排列做應用宮格、相冊縮略圖、圖片墻都很順手。這篇先用最基礎的寫法展示 GridView 如何構建二維網格接著展示flow、layoutDirection、verticalLayoutDirection三個方向屬性是什么效果?；A網格一組興趣標簽鋪成網格每項占滿一個固定大小的格子卡片之間留出間隙。演示代碼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 } } } } } } // 狀態(tài)提示 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