qt - QML Gridview重叠单元格
问题描述
在 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,但正如您指出缺乏突出显示和模型功能,但是您可以使用 Repeater 和矩形来实现,如下所示:
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
}
}
}
}
}
推荐阅读
- python - 从对象数组中获取所有对象的特定属性的数组
- angular - 类型定义中的感叹号
- tensorflow - 如何在我的代码中使用张量核心而不是 cuda 核心?
- java - 在枚举中添加长方法是不好的设计吗?
- javascript - 调用 e.preventDefault() 后提交复选框表单
- html - 当显示设置为内联时,边距顶部不起作用
- javascript - 使用Router和Links在同一个地方渲染所有组件
- ruby - Savon ruby gem 的“dh 键太小”
- sql - 在 FK user_id 上为促销添加 UNIQUE 约束会阻止用户两次声称促销吗?
- spring-boot - 通过邮递员发送二维字节数组(多个文件)作为多部分请求