[英]QML Gridview overlapping cells
在 QmL GridView 中,当为单元格宽度应用不同的值时,单元格会重叠。
我的要求是第一列单元格宽度应为 150,其余列单元格宽度值应为 100。
我们如何实施?
在这里,我需要为列标题设置 150 的单元格宽度。 如何才能做到这一点? 我无法使用简单网格,因为我需要此应用程序的highlight 和 model 属性。
import QtQuick 2.12
import QtQuick.Window 2.12
Window
{
id: parent_win
visible: true
width: 800
height: 400
property int cur_row: 0
property int cur_col: 0
property int col_count: 0
property int row_count: 0
Rectangle {
id: modelrect
anchors.left: row_header.right
width: 600; height: 400
color: "white"
border.color: "red"
ListModel
{
id: appModel
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
}
GridView {
id : test
anchors.fill: parent
cellWidth: 100
cellHeight: 100
focus: true
model: appModel
highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" }
delegate: Item {
width: test.cellWidth
height: test.cellHeight
Image {
id: myIcon
y: 20; anchors.horizontalCenter: parent.horizontalCenter
//source: icon
}
Text {
anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
text: name
color: (name === "Heading") ? "blue" : "black"
}
MouseArea {
anchors.fill: parent
onClicked: parent.GridView.view.currentIndex = index
}
}
}
}
}
当前代码的输出
GridView 的设计使所有项目的大小相同。 相反,您应该使用 Grid 但正如您指出的那样缺乏突出显示和模型功能,但是您可以使用中继器和矩形来实现,如下所示:
import QtQuick 2.12
import QtQuick.Window 2.12
Window
{
id: parent_win
visible: true
width: 800
height: 400
ListModel
{
id: appModel
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Heading"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
}
Rectangle {
id: modelrect
anchors.fill: grid
width: 650; height: 400
color: "white"
border.color: "red"
}
Grid{
id : grid
property int currentIndex: 0
columns: 6
focus: true
Repeater{
id: repeater
model: appModel
Rectangle{
width: col == 0 ? 150 : 100
height: 100
property int row: index / grid.columns
property int col: index % grid.columns
focus: index == grid.currentIndex
color: focus ? "lightsteelblue": "transparent"
Keys.onPressed: {
var tmp_index = grid.currentIndex
if (event.key === Qt.Key_Down) {
tmp_index += grid.columns
}
else if (event.key === Qt.Key_Up) {
tmp_index -= grid.columns
}
else if (event.key === Qt.Key_Left) {
tmp_index -= 1
}
else if (event.key === Qt.Key_Right) {
tmp_index += 1
}
grid.currentIndex = Math.min(repeater.count - 1, Math.max(0, tmp_index))
}
Image {
id: myIcon
y: 20; anchors.horizontalCenter: parent.horizontalCenter
//source: icon
}
Text {
anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
text: name
color: (name === "Heading") ? "blue" : "black"
}
MouseArea {
anchors.fill: parent
onClicked: grid.currentIndex = index
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.