QT quick基础：组件gridview

组件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 实现布局及点击按键效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/329221.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

《Kali渗透基础》16. 密码攻击

《Kali渗透基础》16. 密码攻击

kali渗透 1：身份认证2：密码破解2.1：应用场景2.2：方法简介 3：字典生成工具3.1：Crunch3.2：CUPP3.3：Cewl3.4：JTR 4：密码破解工具4.1：在线密码破解4.1…
阅读更多...
AIOps探索 | 基于大模型构建高效的运维知识及智能问答平台（2）

AIOps探索 | 基于大模型构建高效的运维知识及智能问答平台（2）

前面分享了平台对运维效率提升的重要性和挑战以及基于大模型的平台建设解决方案，新来的朋友点这里，一键回看精彩原文。 基于大模型构建高效的运维知识及智能问答平台（1）https://mp.csdn.net/mp_blog/creation/editor/135223109 …
阅读更多...
【vscode】6、调试 shell

【vscode】6、调试 shell

文章目录 经常在 IDE 下使用 高级语言后，往往并不习惯 shell 编程，因为没有酷炫的界面。但现在 vscode 可以很方便的调试 shell 脚本。 配置方法如下： vscode 下载 Bash Debug 插件 mac 升级 bash 版本（因为此 vscode 插件需要 b…
阅读更多...
腾讯云的域名使用阿里云服务器配置

腾讯云的域名使用阿里云服务器配置

因为近期云服务器到期了，之前的域名已经完成了备案不想轻易回收。于是就换了个厂商，从腾讯云换到了阿里云。但是因为两个厂商不互通。我又不想把域名转入到阿里云。所以就开启了配置之路，一路磕磕绊绊。给大家整理一份顺序，一步到…
阅读更多...
深入解析：如何使用Java、SpringBoot、Vue.js和MySQL构建课表管理系统

深入解析：如何使用Java、SpringBoot、Vue.js和MySQL构建课表管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍：自己非常喜欢研究技术问题！专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目：有源码或者技术上的问题欢迎在评论区一起讨论交流！ ⚡⚡ Java实战 |…
阅读更多...
Jira 宣布Data Center版涨价5%-15%，6年内第8次提价

Jira 宣布Data Center版涨价5%-15%，6年内第8次提价

近日，Atlassian官方面向合作伙伴发布2024年涨价通知： 自2024年2月15日起，旗下核心产品Jira Software、Confluence、Jira Service Management的DC版本（Data Center版本）价格提高5%-15%（涨幅与坐席数阶梯相关…
阅读更多...
Pod控制器：

Pod控制器：

Pod控制器： Pv pvc 动态PV Pod控制器：工作负载。WordLoad，用于管理pod的中间层 ，确保pod资源符合预期的状态 预期状态： 副本数容器的重启策略镜像的拉取策略 Pod出现故障时的重启等等 Pod控制器的类型&#xff1a…
阅读更多...
[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-17 串讲

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-17 串讲

本文仅供学习使用 本文参考： B站：DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-17 串讲
阅读更多...
uniapp + node.js 开发问卷调查小程序

uniapp + node.js 开发问卷调查小程序

前后端效果图 后端&#xff1a;nodejs 12.8 ; mongoDB 4.0 前端&#xff1a;uniapp 开发工具&#xff1a;HBuilderX 3.99 前端首页代码 index.vue <!-- 源码下载地址 https://pan.baidu.com/s/1AVB71AjEX06wpc4wbcV_tQ?pwdl9zp --><template><view class&q…
阅读更多...
ubuntu系统（10）：使用samba共享linux主机中文件

ubuntu系统（10）：使用samba共享linux主机中文件

目录 一、samba安装步骤 1、Linux主机端操作 &#xff08;1&#xff09;安装sabma &#xff08;2&#xff09;修改samba配置文件 &#xff08;3&#xff09;为user_name用户设置samba访问的密码 &#xff08;4&#xff09;重启samba服务 2、Windows端 二、使用 1、代码…
阅读更多...
CMake TcpServer项目 生成静态库.a / 动态库.so

CMake TcpServer项目 生成静态库.a / 动态库.so

CMake 实战构建TcpServer项目 静态库/动态库-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/135608829?spm1001.2014.3001.5501 在这篇博客的基础上&#xff0c;我们把头文件放在include里边&#xff0c;把源文件放在src里边&#xff0c;重新构建 hehedali…
阅读更多...
网页设计（一）开发环境配置与HTML基础

网页设计（一）开发环境配置与HTML基础

一、使用HBuilderX创建项目和文件 加粗样式HX创建HTML文档的模板位置 template.html模板内容 1.创建HTML项目 创建项目引导界面 新建项目窗口 Web-2009030199项目所在位置图 2.在项目下新建prj_1_2.html文件 创建文件引导界面 新建html文件界面 3.新建prj_1_2.ht…
阅读更多...
什么是DNS（域名系统）

什么是DNS（域名系统）

域名系统&#xff08;DNS&#xff09;像是互联网的电话簿&#xff0c;将人们容易记住的网址转换成计算机能理解的IP地址。 没有DNS&#xff0c;我们就需要记住复杂的数字序列来访问网站 DNS的基本概念 定义&#xff1a;DNS是一个分布式数据库&#xff0c;它将域名&#xff08…
阅读更多...
智能小程序小部件(Widget)导航、地图、画布等组件，以及开放能力、原生组件说明

智能小程序小部件(Widget)导航、地图、画布等组件，以及开放能力、原生组件说明

智能小程序小部件(Widget)导航、地图、画布等组件&#xff0c;以及开放能力、原生组件说明。 导航组件 navigator 页面链接&#xff0c;控制小程序的跳转。navigator 子节点的背景色应为透明色。 属性说明 属性名类型默认值必填说明urlstring是跳转地址deltanumber1否当 …
阅读更多...
【开发实践】前端jQuery+gif图片实现载入界面

【开发实践】前端jQuery+gif图片实现载入界面

一、需求分析 载入界面&#xff08;Loading screen&#xff09;是指在计算机程序或电子游戏中&#xff0c;当用户启动应用程序或切换到新的场景时&#xff0c;显示在屏幕上的过渡界面。它的主要作用是向用户传达程序正在加载或准备就绪的信息&#xff0c;以及提供一种视觉上的反…
阅读更多...
Vue3中provide,inject使用

Vue3中provide,inject使用

一&#xff0c;provide,inject使用&#xff1a; 应用场景&#xff1a;向孙组件传数据 应用Vue3碎片&#xff1a; ref&#xff0c;reactive&#xff0c;isRef&#xff0c;provide, inject 1.provide,inject使用 a.爷组件引入 import {ref,provide} from vue const drinkListre…
阅读更多...
Spring Boot 中实现定时任务(quartz)功能实战

Spring Boot 中实现定时任务(quartz)功能实战

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…
阅读更多...
BuildRoot配置RTL8822CE WIFIBT模块（WIFI部分）

BuildRoot配置RTL8822CE WIFIBT模块（WIFI部分）

TinkerBoard2主板自带的无线模块为RTL8822CE&#xff0c;PCIe接口 之前在风火轮下载的Linux源码编译出来的BuildRoot根文件系统没有相关的驱动文件 [rootrk3399:/]# find . -name *.ko [rootrk3399:/]# lsmod Module Size Used by Not tainted [rootrk33…
阅读更多...
第二百七十一回

第二百七十一回

文章目录 1. 概念介绍2. 实现方法2.1 主要步骤2.1 注意事项 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何加载网络图片"相关的内容&#xff0c;本章回中将介绍如何加载本地图片.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在上一章回…
阅读更多...
Scrum敏捷研发管理解决方案

Scrum敏捷研发管理解决方案

Leangoo领歌是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo领歌上手快、实施成本低&#xff0c;可帮助企业快速落地敏捷&#xff0c;提质增效、缩短周期、加速创新…
阅读更多...
最新文章

Copyright @ 2022~2023