GridView中的行的背景色根据条件来显示不同的颜色和Button按钮半透明的方法

本文介绍如何在ASP.NET中通过GridView的ItemDataBound事件改变单元格背景颜色,包括根据不同条件设置不同颜色的方法,并展示了如何使按钮背景变为半透明。
  1. //以下代码必须写在GridView中的ItemDataBound事件中
  2. if (e.Item.Cells[6].Text =="红色" 
  3. {
  4.     //当评分种类为不满意时背景色为红色
  5.     e.Item.Cells[6].Attributes.Add("style""background-color:#FF9999");
  6. }
  7. else if (e.Item.Cells[6].Text == "绿色"
  8. {
  9.     //当评分种类为没有评时背景色为绿色
  10.     //在此调用Color方法时必须引用命名空间using System.Drawing;
  11.     e.Item.BackColor = Color.Green;
  12. }  
  13. //让Button背景色半透明的方法
  14. btnSlect.BackColor = Color.Transparent; //使用Color必须引用命名空间using System.Drawing;
import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.2 import "../general" Rectangle { id:photoRect visible: true width: parent.width height: parent.height color: "black"//"#2F2F2F" signal updateImagsSig() signal sendImagsSig(var imgIndex) signal backToImageSig() // 关键优化1:使用ListModel替代普通数组(支持数据变化通知) ListModel { id: imageModel // 替代原images数组,作为GridView的模型 } // ====================== 新增:删除确认弹窗 ====================== Rectangle { id: deleteConfirmDlg visible: false // 默认隐藏,通过按钮点击显示 width: 500 // 固定宽度 height: 200 // 固定高度 anchors.centerIn: parent // 居中显示 color: "#2F2F2F" // 深灰色背景 radius: 10 // 圆角 border.color: "#666" border.width: 1 z:2 // 半透明遮罩(覆盖整个窗口,防止点击其他区域) Rectangle { id: modalMask anchors.fill: parent color: "black" opacity: 0.5 visible: deleteConfirmDlg.visible // 与弹窗同步显示 } // 弹窗内容 ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 20 // 提示文本 Text { text: "Confirm to delete the selected images?" color: "white" font.pointSize: 20 font.family: "等线 Light" horizontalAlignment: Text.AlignHCenter } // 按钮 RowLayout { Layout.fillWidth: true spacing: 40 Layout.alignment: Qt.AlignHCenter // 按钮居中排列 // 取消按钮(修复color属性错误) Button { text: "Cancel" Layout.preferredWidth: 100 font.pointSize: 20 font.family: "等线 Light" // 关键修复:通过background属性设置背景色 background: Rectangle { anchors.fill: parent radius: 5 // 圆角 color: "#666" // 原color属性移至此处 border.color: "#444" // 边框颜色(可选) border.width: 1 } // 设置文本颜色(避免与背景色冲突) contentItem: Text { text: parent.text font: parent.font color: "white" // 白色文本 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } onClicked: deleteConfirmDlg.visible = false } // 确认按钮(同样修复color属性错误) Button { text: "Confirm" Layout.preferredWidth: 100 font.pointSize: 20 background: Rectangle { anchors.fill: parent radius: 5 color: "#E74C3C" // 红色背景 border.color: "#B03A2E" // 深边框(可选) border.width: 1 } contentItem: Text { text: parent.text font: parent.font color: "white" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } onClicked: { deleteSelectedImages() deleteConfirmDlg.visible = false } } } } } // ====================== 弹窗结束 ====================== // Main container Rectangle { anchors.fill: parent color: "black" anchors.topMargin: 100 anchors.leftMargin: 140 RowLayout { anchors.fill: parent spacing: 10 // GridView(关键优化:绑定ListModel) GridView { id: imageGridView // 添加id,用于后续访问滚动属性 Layout.fillWidth: true Layout.fillHeight: true cellWidth: 420 cellHeight: 420 flow: GridView.FlowLeftToRight model: imageModel // 改为绑定ListModel delegate: Item { // 选中状态绑定优化 id: deleItem // 关键修复:通过GridView.view访问父GridView的cellWidth/cellHeight属性 width: GridView.view.cellWidth // 原错误:直接使用cellWidth → 改为GridView.view.cellWidth height: GridView.view.cellHeight // 原错误:直接使用cellHeight → 改为GridView.view.cellHeight Rectangle { id: rect1 // 调整rect1的尺寸(基于父Item的宽高) width: parent.width - 50 // parent.width 是Item的width(即GridView.view.cellWidth) height: parent.height - 50 // parent.height 是Item的height(即GridView.view.cellHeight) color: "white" border.color:model.selected? "#00FF00" : "white" border.width: model.selected? 15:10 property bool selected: model.selected Image { id: deteSingleImage anchors.fill: parent anchors.margins: model.selected?5:3; cache: false asynchronous: true // 关键优化3:使用model.source替代images[index].source(避免数组索引问题) source: model.source + "?t=" + Date.now() fillMode: Image.PreserveAspectCrop } // 选中遮罩(关键优化:visible直接绑定selected状态) // Rectangle { // id: selectMask // width: parent.width // height: parent.height // color: "#00FF00" // opacity: 0.3 // visible: rect1.selected // 单张图独立控制可见性 // } MouseArea { anchors.fill: parent onDoubleClicked: { photoRect.sendImagsSig(model.index) // 传递ListModel中的索引 console.log("onDoubleClicked****************************") } onClicked: { // 关键优化4:通过ListModel的setProperty修改属性(触发局部刷新) imageModel.setProperty(model.index, "selected", !model.selected) } } } } ScrollBar.vertical: ScrollBar { width: 20 active: true interactive: true } } } } // 删除按钮(逻辑优化) Button { id: deleteBtn x:1800 y:50 text: "DELETE" //Layout.preferredWidth: 120 font.pointSize: 16 onClicked: deleteConfirmDlg.visible = true // 点击显示弹窗 } MouseArea{ id : backArea height: 50 width: photoRect.width anchors.top: photoRect.top enabled: false property var firstPosY: 100 onPressed: { firstPosY = mouseY } onReleased: { var currentMouseY = mouseY if(currentMouseY>300&&firstPosY<50) { photoRect.backToImageSig() } } } CustomBackDlg { id:toPhotosDlg height: 100 width: 800 x:photoRect.width/2-width/2 y:5 normalImage: "../../../res/images/back2_off.png" // 未选中时的星星图标 checkedImage: "../../../res/images/back2_on.png" // 选中时的填充星星图标 iconWidth: 64 iconHeight: 64 checked: false // 初始状态 opacity: 1 imageRotaAngle: 0 desc: "ShootingWindow" textUpPos :0 function backToImageAlbum() { photoRect.backToImageSig(); } Component.onCompleted: { toPhotosDlg.backSig.connect(toPhotosDlg.backToImageAlbum) } // id:toPhotosDlg // height: 90 // width: 800 // x:photoRect.width/2-width/2 // y:photoRect.height-toPhotosDlg.height // normalImage: "../../../res/images/back2_off.png" // 未选中时的星星图标 // checkedImage: "../../../res/images/back2_on.png" // 选中时的填充星星图标 // iconWidth: 64 // iconHeight: 64 // checked: false // 初始状态 // opacity: 1 // imageRotaAngle: 180 // desc: "ShootingWindow" // textUpPos :1 // function backToImageAlbum() // { // photoRect.backToImageSig(); // //console.log("backToPhotoAlbum") // } // Component.onCompleted: { // toPhotosDlg.backSig.connect(toPhotosDlg.backToImageAlbum) // // toPhotosDlg.backSig.connect(imageArea.showDetecSig) // } } Component.onCompleted: { photoRect.updateImagsSig() } // 新增:控制滚动到顶部的函数 function scrollToTop() { imageGridView.contentY = 0; // 设置垂直滚动偏移量为0(回到顶部) } // 重置选中状态(优化为遍历ListModel) function resetSelection() { for (var i = 0; i < imageModel.count; i++) { imageModel.setProperty(i, "selected", false) } } // 删除选中项(优化为反向遍历ListModel) function deleteSelectedImages() { // 反向遍历避免索引错乱(ListModel删除后索引自动调整) for (var i = imageModel.count - 1; i >= 0; i--) { if (imageModel.get(i).selected) { console.log(imageModel.get(i).source) imageModel.remove(i) } } } function setImages(values) { imageModel.clear(); // 清空原有数据 if (!values || !Array.isArray(values)) { return; } // 遍历数组并添加元素到ListModel for (var i = 0; i < values.length; i++) { var path = values[i]; if (typeof path === "string") { imageModel.append({ // 向ListModel添加元素(自动触发模型更新) source: path, selected: false }); } } } // Component to add more functionalities (like back button, etc.) can be added here } Linux系统下触摸单张图像时,有时会刷新缓慢,以及单次点击某一张图像后(此时图像应当改变它的边框的颜色尺寸),迅速点击另一张图像,此时触发的是doubleclicked信号,但是实际上我点击的并不是同一张图,请帮我解决上述问题,请用Qt5.6的QML实现
最新发布
09-16
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值