格排布與排列方向)
目錄基礎(chǔ)網(wǎng)格演示代碼排列方向演示代碼三個(gè)方向?qū)傩怨こ滔螺dGridView 和 ListView 的使用方式有點(diǎn)像通過model提供數(shù)據(jù)、delegate定義每一項(xiàng)的外觀。區(qū)別在于 GridView 把所有項(xiàng)構(gòu)建成二維網(wǎng)格橫向、豎向兩個(gè)方向都隨意排列做應(yīng)用宮格、相冊縮略圖、圖片墻都很順手。這篇先用最基礎(chǔ)的寫法展示 GridView 如何構(gòu)建二維網(wǎng)格接著展示flow、layoutDirection、verticalLayoutDirection三個(gè)方向?qū)傩允鞘裁葱Ч?。基礎(chǔ)網(wǎng)格一組興趣標(biāo)簽鋪成網(wǎng)格每項(xiàng)占滿一個(gè)固定大小的格子卡片之間留出間隙。演示代碼import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略標(biāo)題組件 TitleSeparator ... // 內(nèi)容卡片 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: 運(yùn)動(dòng) } ListElement { name: 美食 } ListElement { name: 游戲 } ListElement { name: 繪畫 } ListElement { name: 烘焙 } ListElement { name: 露營 } } // delegate 占滿整個(gè)單元格內(nèi)部卡片再留出間距 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 項(xiàng) font.pointSize: 10 color: #666 } } }格子的大小由cellWidth和cellHeight決定delegate 的根元素把寬高直接綁到這兩個(gè)值上就等于占滿整個(gè)格子?？ㄆ旧砹硖滓粚?Rectangle用 anchors.margins 留出 4px 間隙相鄰兩項(xiàng)才不會(huì)擠在一起。model 用 ListModel 描述每個(gè)ListElement定義一個(gè) name 字段delegate 里用required property string name取出來。index是網(wǎng)格自動(dòng)給每項(xiàng)編的位置從0開始這里加1后顯示在名字下面方便對照順序。count是只讀屬性直接讀就是總項(xiàng)數(shù)底部那行統(tǒng)計(jì)就是這么來的。適用場景應(yīng)用宮格入口、興趣標(biāo)簽墻、圖片縮略圖總覽。排列方向同樣的網(wǎng)格用三個(gè)開關(guān)切換flow、layoutDirection、verticalLayoutDirection能拼出好幾種排布。演示代碼import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略標(biāo)題組件 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 項(xiàng) font.pointSize: 10 color: #666 } } // 內(nèi)容卡片 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 是默認(rèn)值先橫著排滿一行再換下一行換成 GridView.FlowTopToBottom 后變成先豎著排滿一列再排下一列滾動(dòng)方向也跟著從縱向換成橫向。layoutDirection 管水平方向切到 Qt.RightToLeft 時(shí)格子從右邊開始擺放verticalLayoutDirection 管垂直方向GridView.BottomToTop 讓內(nèi)容從底部往上填。verticalLayoutDirection有個(gè)地方要留意它只有在內(nèi)容超過一屏?xí)r才看得出來。內(nèi)容沒占滿視圖的時(shí)候BottomToTop 和 TopToBottom 顯示得一模一樣所以這個(gè)例子把項(xiàng)數(shù)放到了 40專門撐出縱向滾動(dòng)勾上「垂直反向」才能看到內(nèi)容從底部開始排。另外model這里直接寫了數(shù)字 40是 GridView 的簡寫方式表示有 40 項(xiàng)delegate 里只能拿到index。三個(gè)方向?qū)傩詫傩钥刂剖裁慈≈礷low先橫排還是先豎排GridView.FlowLeftToRight/GridView.FlowTopToBottomlayoutDirection水平排列方向Qt.LeftToRight/Qt.RightToLeftverticalLayoutDirection垂直排列方向GridView.TopToBottom/GridView.BottomToTop工程下載我的 Qt 版本Qt 6.12操作系統(tǒng)Windows 11GitHubQML 示例合集V2.0 - qml_gridview QML GridView 布局：網(wǎng)格排布與排列方向
目錄基礎(chǔ)網(wǎng)格演示代碼排列方向演示代碼三個(gè)方向?qū)傩怨こ滔螺dGridView 和 ListView 的使用方式有點(diǎn)像通過model提供數(shù)據(jù)、delegate定義每一項(xiàng)的外觀。區(qū)別在于 GridView 把所有項(xiàng)構(gòu)建成二維網(wǎng)格橫向、豎向兩個(gè)方向都隨意排列做應(yīng)用宮格、相冊縮略圖、圖片墻都很順手。這篇先用最基礎(chǔ)的寫法展示 GridView 如何構(gòu)建二維網(wǎng)格接著展示flow、layoutDirection、verticalLayoutDirection三個(gè)方向?qū)傩允鞘裁葱Ч?。基礎(chǔ)網(wǎng)格一組興趣標(biāo)簽鋪成網(wǎng)格每項(xiàng)占滿一個(gè)固定大小的格子卡片之間留出間隙。演示代碼import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略標(biāo)題組件 TitleSeparator ... // 內(nèi)容卡片 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: 運(yùn)動(dòng) } ListElement { name: 美食 } ListElement { name: 游戲 } ListElement { name: 繪畫 } ListElement { name: 烘焙 } ListElement { name: 露營 } } // delegate 占滿整個(gè)單元格內(nèi)部卡片再留出間距 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 項(xiàng) font.pointSize: 10 color: #666 } } }格子的大小由cellWidth和cellHeight決定delegate 的根元素把寬高直接綁到這兩個(gè)值上就等于占滿整個(gè)格子?？ㄆ旧砹硖滓粚?Rectangle用 anchors.margins 留出 4px 間隙相鄰兩項(xiàng)才不會(huì)擠在一起。model 用 ListModel 描述每個(gè)ListElement定義一個(gè) name 字段delegate 里用required property string name取出來。index是網(wǎng)格自動(dòng)給每項(xiàng)編的位置從0開始這里加1后顯示在名字下面方便對照順序。count是只讀屬性直接讀就是總項(xiàng)數(shù)底部那行統(tǒng)計(jì)就是這么來的。適用場景應(yīng)用宮格入口、興趣標(biāo)簽墻、圖片縮略圖總覽。排列方向同樣的網(wǎng)格用三個(gè)開關(guān)切換flow、layoutDirection、verticalLayoutDirection能拼出好幾種排布。演示代碼import QtQuick import QtQuick.Controls import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略標(biāo)題組件 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 項(xiàng) font.pointSize: 10 color: #666 } } // 內(nèi)容卡片 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 是默認(rèn)值先橫著排滿一行再換下一行換成 GridView.FlowTopToBottom 后變成先豎著排滿一列再排下一列滾動(dòng)方向也跟著從縱向換成橫向。layoutDirection 管水平方向切到 Qt.RightToLeft 時(shí)格子從右邊開始擺放verticalLayoutDirection 管垂直方向GridView.BottomToTop 讓內(nèi)容從底部往上填。verticalLayoutDirection有個(gè)地方要留意它只有在內(nèi)容超過一屏?xí)r才看得出來。內(nèi)容沒占滿視圖的時(shí)候BottomToTop 和 TopToBottom 顯示得一模一樣所以這個(gè)例子把項(xiàng)數(shù)放到了 40專門撐出縱向滾動(dòng)勾上「垂直反向」才能看到內(nèi)容從底部開始排。另外model這里直接寫了數(shù)字 40是 GridView 的簡寫方式表示有 40 項(xiàng)delegate 里只能拿到index。三個(gè)方向?qū)傩詫傩钥刂剖裁慈≈礷low先橫排還是先豎排GridView.FlowLeftToRight/GridView.FlowTopToBottomlayoutDirection水平排列方向Qt.LeftToRight/Qt.RightToLeftverticalLayoutDirection垂直排列方向GridView.TopToBottom/GridView.BottomToTop工程下載我的 Qt 版本Qt 6.12操作系統(tǒng)Windows 11GitHubQML 示例合集V2.0 - qml_gridview