[英]QML Gridview overlapping cells
In QmL GridView when applying different values for cellwidth, the cells are getting overlapped.在 QmL GridView 中,当为单元格宽度应用不同的值时,单元格会重叠。
My requirement is first column cellwidth should be 150 and the rest of the columns cell width value should be 100.我的要求是第一列单元格宽度应为 150,其余列单元格宽度值应为 100。
How can we implement the same?我们如何实施?
here i need a cellwidth of 150 for the column headings .在这里,我需要为列标题设置 150 的单元格宽度。 how can this be done?
如何才能做到这一点? i can't use the simple grid as i need the highlight and model property for this application.
我无法使用简单网格,因为我需要此应用程序的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
}
}
}
}
}
output of the current code当前代码的输出
GridView is designed so that all items are the same size. GridView 的设计使所有项目的大小相同。 Instead you should use Grid but as you point out the lack of highlighting and model functionality but that you can achieve using a Repeater and a rectangle as I show below:
相反,您应该使用 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.