QT quick基础：组件gridview

已于 2024-01-17 09:02:25 修改
阅读量620 收藏 11
点赞数 6
分类专栏： qt quick 文章标签： qt 开发语言
于 2024-01-16 08:39:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuowalun8427/article/details/135494657
版权

组件gridview与android中gridview布局效果相同。
一、下面记录qt quick该组件的使用方法。
方法一：

// ContactModel.qml
import QtQuick 2.0

ListModel {

      ListElement {
          name: "1"
          portrait: "icons/ic_find.png"
      }
      ListElement {
          name: "2"
          portrait: "icons/ic_find.png"
      }
      ListElement {
          name: "3"
          portrait: "icons/ic_find.png"
      }
      ListElement {
          name: "4"
          portrait: "icons/ic_find.png"
      }

      ListElement {
          name: "5"
          portrait: "icons/ic_find.png"
      }
      ListElement {
          name: "6"
          portrait: "icons/ic_find.png"
      }
      ListElement {
          name: "7"
          portrait: "icons/ic_find.png"
      }
      ListElement {
          name: "8"
          portrait: "icons/ic_find.png"
      }
  }

// main.qml
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    id: main
    width: 720
    height: 360
    color: "#051f58"
    clip:true
    
    GridView {
          width: 628;
          height: 350
          cellWidth: 157;
          cellHeight: 154;
          anchors.left: parent.left
          anchors.leftMargin: 54
          anchors.top: parent.top
          anchors.topMargin: 35
          model: ContactModel {}
          delegate: Column {
              spacing: 10
              Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
              Text { text: name; anchors.horizontalCenter: parent.horizontalCenter;color: "#C6D0D6";font.pixelSize: 20;font.bold: true }
          }
      }
}

运行效果
在这里插入图片描述
方法二： 列表和代理分开。

// main.qml
import QtQuick 2.0
import QtQuick.Controls 2.3
import "../model"
import "../view"

Rectangle {
    id: mainPage1
    color: "#051f58"
    clip:true
    Component {
        id: contactDelegate
        Item {
            width: grid.cellWidth; height: grid.cellHeight

            Column {
                spacing: 10
                Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter;color: "#C6D0D6";font.pixelSize: 20;font.bold: true }
            }
        }
    }

    GridView {
        id:grid
        width: 628;
        height: 350
        cellWidth: 157;
        cellHeight: 154;
        anchors.left: parent.left
        anchors.leftMargin: 54
        anchors.top: parent.top
        anchors.topMargin: 35
        model: ContactModel {}
        delegate: contactDelegate;
    }
}

效果图如上。

我自己的需求，点击gridview的item，修改对应item的图片，并且改变该item的字体颜色。上述代码中，Image没有点击信号，gridview也没有点击事件，所以想到自定义一个可点击的图片按钮，相当于android 中ImageButton组件，替换上述代码中Image组件。

// ImageButton.qml
import QtQuick 2.0

Rectangle {
    id: bkgnd;
    property alias iconWidth: icon.width;
    property alias iconHeight: icon.height;
    property alias iconSource: icon.source;
    implicitWidth: iconWidth;
    implicitHeight: iconHeight;
    color: "transparent";

    signal clicked;

    Image {
        id: icon;
        anchors.left: parent.left;
        anchors.verticalCenter: parent.verticalCenter;
    }

    MouseArea {
        id: ma;
        anchors.fill: parent;
        hoverEnabled: true;
        onClicked: {
            bkgnd.clicked();
        }
    }

}

// ContactModel
import QtQuick 2.0
ListModel {

      ListElement {
          name: "Jim Williams"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png" // 添加点击时 图片效果
      }
      ListElement {
          name: "John Brown"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png"
      }
      ListElement {
          name: "Bill Smyth"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png"
      }
      ListElement {
          name: "Sam Wise"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png"
      }
      ListElement {
          name: "Jim Williams1"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png"
      }
      ListElement {
          name: "John Brown1"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png"
      }
      ListElement {
          name: "Bill Smyth1"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png"
      }
      ListElement {
          name: "Sam Wise1"
          portrait: "../icons/ic_find.png"
          portraitS:"../icons/ic_search.png"
      }
  }

// main.qml
import QtQuick 2.0
import QtQuick.Controls 2.3
import "../model"
import "../view"

Rectangle {
    id: mainPage1
    color: "#051f58"
    clip:true

    Component {
        id: contactDelegate
        Item {
            width: grid.cellWidth; height: grid.cellHeight

            Column {
                spacing: 10
                ImageButton {
                    onClicked: grid.currentIndex = index;
                    iconSource: grid.currentIndex === index ? portraitS :portrait; anchors.horizontalCenter: parent.horizontalCenter
                }
                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter;color: grid.currentIndex === index ?"#C6D0D6" : "gray";font.pixelSize: 20;font.bold: true }
            }
        }
    }

    GridView {
        id:grid
        width: 628;
        height: 350
        cellWidth: 157;
        cellHeight: 154;
        anchors.left: parent.left
        anchors.leftMargin: 54
        anchors.top: parent.top
        anchors.topMargin: 35
        model: ContactModel {}
        delegate: contactDelegate;
    }
}

注意：代码中，index及currentIndex变量是GridView组件自带的属性。当点击item时，index自动改变。例如当点击第3个位置时，index = 3。
效果图：
在这里插入图片描述
模拟物理按键，右键，点击该按键，图标向右移动。代码如下：

Button{
        id: button;
        anchors.bottom: parent.bottom
        width: 100;
        height: 50;
        text: "right button"
        onClicked: {
            grid.moveCurrentIndexRight();
            console.log(" test current = " + grid.currentIndex);

        }
    }

对应方法还有：
moveCurrentIndexDown()；
moveCurrentIndexLeft()
moveCurrentIndexUp()

二、上面记录因为Gridview没有Item的点击事件，所以自定义一个ImageButton实现Item点击。后面发现有ItemDelegate代码，可以和GridView一起使用，既可以完成与android中GridView相同效果。下面是代码：

// main.qml
 GridView {
            id:grid
            width: 1104;
            height: 536
            cellWidth: 276;
            cellHeight: 268;
            anchors.left: parent.left
            anchors.leftMargin: 88
            anchors.top: parent.top
            anchors.topMargin: 57

            model: ContactModel {}

            delegate: ItemDelegate {
                onClicked: {
                    console.log("test onclick");
                    grid.currentIndex = index;
                }

                Column {
                    spacing: 20
                    Image {
                        source: grid.currentIndex === index ? portraitS :portrait;
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Text { text: name; anchors.horizontalCenter: parent.horizontalCenter;color: grid.currentIndex === index ?"#C6D0D6" : "gray";font.pixelSize: 30; }
                }

            }

        }

效果：
在这里插入图片描述
效果图中背景色自带白色，不美观。下面通过自定义ItemDelegate去掉点击效果。

// GridViewItemDelegate.qml
import QtQuick 2.0
import QtQuick.Controls 2.3
ItemDelegate {
    background: null
}

将main.qml中ItemDelegate替换成GridViewItemDelegate，效果图：
在这里插入图片描述
现在没有背景颜色了。但是 通过上图，发现Item点击的范围特别小，我们需要设置Item的点击范围为一个cell的大小。下面代码设置点击范围。

// GridViewItemDelegate.qml
import QtQuick 2.0
import QtQuick.Controls 2.3
ItemDelegate {
//    background: null
    property int itemWidth: 100 // 默认值
    property int itemHeight: 100 // 默认值
    width: itemWidth
    height: itemHeight
}

// main.qml
GridView {
            id:grid
            width: 1104;
            height: 536
            cellWidth: 276;
            cellHeight: 268;
            anchors.left: parent.left
            anchors.leftMargin: 88
            anchors.top: parent.top
            anchors.topMargin: 57

            model: ContactModel {}

            delegate: GridViewItemDelegate {
                itemWidth: grid.cellWidth
                itemHeight: grid.cellHeight
                onClicked: {
                    console.log("test onclick");
                    grid.currentIndex = index;
                }

                Column {
                    spacing: 20
                    Image {
                        source: grid.currentIndex === index ? portraitS :portrait;
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Text { text: name; anchors.horizontalCenter: parent.horizontalCenter;color: grid.currentIndex === index ?"#C6D0D6" : "gray";font.pixelSize: 30; }
                }

            }

        }

效果图：
在这里插入图片描述
以上：ItemDelegate + Gridview 实现布局及点击按键效果。

wildlily8427
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML GridView 网格视图
青春不老，奋斗不止！
03-13 413
和 ListView 一样，GridView 也是基于 Flickable 的视图组件，它们的用法非常相似。不同的是，ListView 中的元素被存储在线性链表中，并以单列（或单行）的形式进行展示的，因此适用于垂直（或水平）列表的场景；而 GridView 中的元素则被存储在一个二维数组中，并以网格的形式进行展示的，因此更适用于具有二维结构或以网格方式呈现的场景，如相册图库、视频列表、工具导航等。
Qt/QML编程之路：Grid、GridLayout、GridView、Repeater（33）
码农17年的博客
01-13 460
GRID网格用处非常大，不仅在excel中，在GUI中，也是非常重要的一种控件。
如何：在GridView中进行计算
04-07
一个简单的演示，说明如何使用JavaScript在GridView中进行计算。
C#中gridview使用实例
01-28
C#中gridview使用实例，包括表头表尾设计、多层嵌套、分页排序、增除删改等应用实例
10. GridView控件的简单介绍
山间点烟雨
02-08 1281
在某种界面设计中，如果需要很多个类似的控件整齐的排列，类似方阵的一种数据展示，可以使用GridView控件来实现。
QGridView &QTableView
xiaoxiaoyu85的专栏
05-02 381
QTableView标题栏。
webview测试 Qt gridview 添加/删除控件
small house
10-15 194
有个需求，做一个多webview的展示，看下CPU占有率。顺便联系了下Qtgridview的增加和减少，以及滑动区域的使用。 点击“+”，会增加一个新的webviewwidget 点击“-”，会动态删除一个webviewwidget 网页可以加载几个备选的链接，也可以手动输入。 每一个webview都会开一个进程，静态还好，动态的非常耗资源。 ...
QML视图（GridView）
qq_45303986的博客
03-13 1021
GridView的用法和ListView相似，都是继承自Flickable，但GridView是将项目排列成网络。GridView.FlowLeftToRight (default) 从左到右流动。
Qt基于Qml使用GridView实现表情选择窗口
10-29 777
Qt基于Qml使用GridView实现表情选择窗口 通过states改变对象属性。
Qt小例子学习74 - qml的GridView 获取c++中的多个QImage
虾球
08-14 271
Qt小例子学习74 - qml的GridView 获取c++中的多个QImage Item.h #ifndef ITEM_H #define ITEM_H #include <QImage> #include <QObject> #include <QUuid> class Item : public QObject { Q_OBJECT Q_PROPERTY(QImage photo READ photo WRITE setPhoto NOTIFY
QMl实现GridView上下左右翻页
03-10
QT开发qml实现grideView的翻页效果
Android：控件GridView的使用实例
01-04
如果是列表（单列多行形式）的使用ListView，如果是多行多列网状形式的优先使用GridView。 <?xml version=1.0 encoding=utf-8?> <GridView xmlns:android=http://schemas.android.com/apk/res/android ...
Android开发之组件GridView简单使用方法示例
08-26
主要介绍了Android开发之组件GridView简单使用方法,涉及Android GridView组件图片浏览及保存图片等相关操作技巧,需要的朋友可以参考下
grid实战之微信钱包 腾讯服务界面
weixin_34273479的博客
11-29 547
网格布局简介 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。 有一些浏览器是不支持网格布局的，可以从caniuse这个网站查看各个浏览器是否支持这些css3中的新属性,绿色表示支持，红色表示不支持，另一种颜色表示部分支持，如图（查...
文本挖掘（四万字总结篇：爬虫 - 文本预处理 - 高频词统计 - 聚类 - 情感分析）
热门推荐
qq_45587352的博客
07-29 1万+
文本挖掘、K-means、word2vec
QML类型：GridView、XmlListModel、XmlListModelRole
hw5230的博客
07-12 542
GridView 继承自 Flickable。用作显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型中的数据。可以组合这些属性以生成各种布局。这些属性保存网格中每个单元格的宽度和高度。默认单元格大小为 100x100。此属性保存网格的流动方向。在视图中将 currentIndex 向下 / 向左 / 向上 / 向右移动一项。
Qt qml StackView and GridView and Loader
XiaoHG_CSDN的博客
05-09 368
Qt qml StackView and GridView main: loader component //main.qml import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.0 Window { id: root width: 800 height: 480 visible: true title: qsTr("Hello World") Rectangle
Qt ListView + Grid + GridView 使用注意事项
02-28 1480
ListView Auto Remove empty spaces when the delegate is not visible。 Grid Auto Remove empty spaces when the delegate is not visible。 GridView Leave empty spaces when the delegate is not visibl...
CMake是怎么找到Qt相关模块的
最新发布
FUHAILIANG_2015的博客
05-28 405
一般我们不会在CMakeLists里面硬编码CMAKE_PREFIX_PATH，推荐通过环境变量找到模块。深入了解find_package之后，我们就明白COMPONENTS其实是一个选项，列出来了必选的模块。当我们使用QT创建了一个CMake项目后，我们尝试使用CMake编译时，会遇到找不到Qt的模块的问题，Qt的模块是放在Qt/5.15.2/clang_64/lib/cmake，所以我们只需要配置。记得将QT_DIR环境变量放到PATH中，因为find_package会从PATH中寻找。
import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 400 height: 300 GridView { width: parent.width height: parent.height cellWidth: 100 cellHeight: 30 columnCount: 2 delegate: Text { text: model.name + " - " + model.age width: 100 height: 30 } model: ListModel { ListElement { name: "John"; age: 25 } ListElement { name: "Alice"; age: 30 } ListElement { name: "Bob"; age: 35 } } } } 运行显示 Cannot assign to non-existent property "columnCount"
07-11
很抱歉，我之前给出的代码存在一些问题。在QML中，GridView没有columnCount属性来指定列数。相反，GridView会根据提供的model自动计算列数。以下是修正后的代码示例： ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 400 height: 300 GridView { width: parent.width height: parent.height cellWidth: 100 cellHeight: 30 delegate: Text { text: model.name + " - " + model.age width: 100 height: 30 } model: ListModel { ListElement { name: "John"; age: 25 } ListElement { name: "Alice"; age: 30 } ListElement { name: "Bob"; age: 35 } } } } ``` 这样，你可以使用GridView来创建一个简单的表格，并在每个单元格中显示姓名和年龄的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值