Вы задавали разные вопросы, поэтому в этом случае я отвечу на все вопросы, но в следующем случае вам придется создать сообщение для каждого вопроса, как указано в руководствах по SO.
В вашем случаеТребуется 3 элемента:
Загрузить изображение в GridView: Желательно реализовать модель, в этом случае реализовать ее на основе QStandardItemModel с пользовательскимролями и устанавливают соединения с делегатом.
Filter : для этого вы можете использовать DelegateModel или QSortFilterProxyModel, в этом случае используйте второй параметр, так как онреализует фильтрацию по ролям и регулярным выражениям.
Анимация при наведении курсора: Прежде всего необходимо определить, когда мышь входит или выходит из элемента, и для этогоMouseArea используется для запуска сигналов входа и выхода. Затем мы используем Поведение, чтобы установить анимацию при изменении свойства "y". И тогда необходимо устанавливать соответствующие конечные значения только при срабатывании сигналов. Я удалил «anchors.bottom: parent.bottom», так как якорь не позволяет изменять свойство.
С другой стороны, если вы создаете qml для делегата, в этом нет необходимости. использовать Компонент, так как сам по себе он является компонентом, с другой стороны, вы должны включить свойство «клип», чтобы рисование элементов не выходило за пределы его собственной области.
Учитывая вышеизложенное, решение состоит в том,:
├── images
│ └── android.png
├── main.py
└── qml
├── main.qml
└── ThumbDelegate.qml
main.py
import os
import sys
from PySide2 import QtCore, QtGui, QtWidgets, QtQml
class CustomModel(QtGui.QStandardItemModel):
TitleRole = QtCore.Qt.UserRole + 1000
UrlRole = QtCore.Qt.UserRole + 1001
def __init__(self, parent=None):
super().__init__(parent)
self.setItemRoleNames(
{CustomModel.TitleRole: b"title", CustomModel.UrlRole: b"thumbnail"}
)
@QtCore.Slot(str, QtCore.QUrl)
def addItem(self, title, url):
it = QtGui.QStandardItem()
it.setData(title, CustomModel.TitleRole)
it.setData(url, CustomModel.UrlRole)
self.appendRow(it)
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
current_dir = os.path.dirname(os.path.realpath(__file__))
model = CustomModel()
# add items
for (
text
) in "amputate arena accept architecture astonishing advertise abortion apple absolute advice".split():
title = text
image_path = os.path.join(current_dir, "images", "android.png")
model.addItem(title, QtCore.QUrl.fromLocalFile(image_path))
proxy_filter = QtCore.QSortFilterProxyModel()
proxy_filter.setSourceModel(model)
proxy_filter.setFilterRole(CustomModel.TitleRole)
engine = QtQml.QQmlApplicationEngine()
engine.rootContext().setContextProperty("proxy_filter", proxy_filter)
filename = os.path.join(current_dir, "qml", "main.qml")
engine.load(QtCore.QUrl.fromLocalFile(filename))
if not engine.rootObjects():
sys.exit(-1)
engine.quit.connect(app.quit)
sys.exit(app.exec_())
main.qml
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
ApplicationWindow {
id: mainWindowId
visible: true
width: 1280
height: 720
title: qsTr("Image Hover Effect")
Rectangle {
anchors.fill: parent
ColumnLayout {
anchors.fill: parent
spacing: 0
TextField{
id: filterTextFieldId
Layout.fillWidth: true
Layout.preferredHeight: 40
font {
family: "SF Pro Display"
pixelSize: 22
}
color: "dodgerblue"
onTextChanged: proxy_filter.setFilterRegExp(text)
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "gold"
GridView {
clip: true
id: thumbViewId
anchors.fill: parent
anchors.margins: 25
cellWidth: 260
cellHeight: 260
model: proxy_filter
delegate: ThumbDelegate {
source: model.thumbnail
title: model.title
}
focus: true
}
}
}
}
}
ThumbDelegate.qml
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
Rectangle {
id: root
width: 256
height: 256
color: 'green'
clip: true
property alias source: thumbImageId.source
property alias title: label.text
Image {
id: thumbImageId
asynchronous: true
anchors.fill: parent
}
Rectangle {
id: base
width: parent.width
height: 50
color: 'grey'
y: root.height
Behavior on y { NumberAnimation {duration: 500} }
Label {
id: label
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 10
font.family: 'SF Pro Display'
font.pointSize: 22
color: 'white'
}
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: base.y = root.height - base.height
onExited: base.y = root.height
}
}
Обновление:
Видя, что вы обновили свой вопрос, необходимо только изменить код Python,qml-код должен совпадать с тем, который я предложил в предыдущей части моего ответа.
*. py
import os
import sys
from PySide2 import QtCore, QtGui, QtWidgets, QtQml
class InventoryModel(QtCore.QAbstractListModel):
TitleRole = QtCore.Qt.UserRole + 1000
ThumbnailRole = QtCore.Qt.UserRole + 1001
def __init__(self, entries, parent=None):
super().__init__(parent)
self._entries = entries
def rowCount(self, parent=QtCore.QModelIndex()):
return 0 if parent.isValid() else len(self._entries)
def data(self, index, role=QtCore.Qt.DisplayRole):
if 0 <= index.row() < self.rowCount() and index.isValid():
item = self._entries[index.row()]
if role == InventoryModel.TitleRole:
return item["title"]
elif role == InventoryModel.ThumbnailRole:
return item["thumbnail"]
def roleNames(self):
roles = dict()
roles[InventoryModel.TitleRole] = b"title"
roles[InventoryModel.ThumbnailRole] = b"thumbnail"
return roles
def appendRow(self, n, t):
self.beginInsertRows(QtCore.QModelIndex(), self.rowCount(), self.rowCount())
self._entries.append(dict(title=n, thumbnail=t))
self.endInsertRows()
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
current_dir = os.path.dirname(os.path.realpath(__file__))
entries = [
{"title": "Zero", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/zero.png"},
{"title": "One", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/one.png"},
{"title": "Two", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/two.png"},
{"title": "Three", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/three.png"},
{"title": "Four", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/four.png"},
{"title": "Five", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/five.png"},
{"title": "Six", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/six.png"},
{"title": "Seven", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/seven.png"},
{"title": "Eight", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/eight.png"},
{"title": "Nine", "thumbnail": "file:///E:/Tech/QML/projects/Test_005/nine.png"},
]
assetModel = InventoryModel(entries)
engine = QtQml.QQmlApplicationEngine()
proxy_filter = QtCore.QSortFilterProxyModel()
proxy_filter.setSourceModel(assetModel)
proxy_filter.setFilterRole(InventoryModel.TitleRole)
engine.rootContext().setContextProperty("proxy_filter", proxy_filter)
engine.load(QtCore.QUrl.fromLocalFile('E:/Tech/QML/projects/Test_005/main.qml'))
if not engine.rootObjects():
sys.exit(-1)
engine.quit.connect(app.quit)
sys.exit(app.exec_())