qt - 矩形内的 QML 包装委托
问题描述
如何将我为列表视图制作的自定义委托包装在一个矩形内,以便自定义背景并将角半径添加到我的列表视图项目?目前我有下图中左侧显示的内容。我的目标是右侧的列表视图,同时保持当前的 TextWrapping 和当前解决方案中没有看到的内容。
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Frame {
anchors.centerIn: parent
anchors.fill: parent
ListView {
implicitWidth: parent.width
implicitHeight: parent.height
clip: true
spacing: 12
model: ListModel {
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works. This should word wrap quite a lot of times."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car"
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
}
delegate: RowLayout {
width: parent.width
Rectangle {
id: newsicon
width: 16
height: 16
color: "steelblue"
Layout.alignment: Qt.AlignTop
}
ColumnLayout {
Layout.fillWidth: true
spacing: 4
TextArea {
selectByMouse: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
id: messageText
text: model.description
wrapMode: TextEdit.WordWrap
readOnly: true
topPadding: 0
bottomPadding: 0
background: null
}
Label {
id: dateText
text: "Dec 20, 2019"
font.italic: true
font.pointSize: 8
color: "grey"
}
}
}
ScrollBar.vertical: ScrollBar {
active: true
}
}
}
解决方案
基本上,您需要做的就是将您的委托的 RowLayout 封装在一个充当背景颜色的 Rectangle 中:
delegate: Rectangle {
id: delegateBackground
color:"lightgreen"
radius: 10
width: parent.width
height: contentContainer.height + 20
Item {
id: contentContainer
width: parent.width - 20
height: column.height
anchors.centerIn: delegateBackground
RowLayout {
width: parent.width
Rectangle {
id: newsicon
width: 16
height: 16
color: "steelblue"
Layout.alignment: Qt.AlignTop
}
ColumnLayout {
id: column
Layout.fillWidth: true
spacing: 4
TextEdit {
selectByMouse: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
id: messageText
text: model.description
wrapMode: TextEdit.WordWrap
readOnly: true
}
Label {
id: dateText
text: "Dec 20, 2019"
font.italic: true
font.pointSize: 8
color: "grey"
}
}
}
}
}
您会注意到,我还添加了一个不可见的 Item 作为容器,以将 RowLayout 保存在背景中,以便边缘周围有边距,正如您在图形中所指示的那样。
推荐阅读
- jenkins - 如何在不消耗 jenkins 执行器的情况下使 jenkins 声明性管道 waitForWebhook?
- android - Push API 如何在内部工作?
- php - Laravel 6+ Uniq id generation Only in number with Additional Logic
- ruby-on-rails - 后控制器需要后
- python - 使用 pynput 在随机位置自动单击鼠标(用于网络浏览器游戏)
- python - 在 powershell 中运行 python 文件
- java - 在 JSR 303 bean 验证单元测试中,如何检查违反了哪些约束
- clojure - Clojure 调用一系列函数并存储它们的返回值
- django - 如何通过 id 在 Django 中加入两个模型?
- vue.js - 更改网址后立即停止观看