如何解决如何在可滚动列表中显示文本和图像?
我有一个页面,我想在一个可滚动列表中按图像分开放置文本以测试 Qt,但是如果我想这样做,我必须硬定义每个图像和文本的 Y,但我不知道如何要通过正确的 YI 必须分配的好方法来获得它。此外,我的 ScrollView 不起作用(我无法垂直滚动)。
页面:
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
id: page
width: window.width
height: window.height
title: qsTr("Text & Images")
ScrollView {
width: parent.width
height: parent.height
ListView {
Image {
source: "/images/test1.png"
anchors.horizontalCenter: parent.horizontalCenter
height: Image.height
}
Repeater {
model: 5
Label {
text: qsTr(txts["text" + (index + 1)])
anchors.horizontalCenter: parent.horizontalCenter
y: index * 400
}
Image {
source: "/images/test" + (index + 2) + ".png"
anchors.horizontalCenter: parent.horizontalCenter
y: index * 400 + 200
fillMode: Image.PreserveAspectFit
}
}
}
}
}
如果我不设置 Y,所有图像都以 y:0 显示。
有没有人知道一个组件可以像其他语言一样自动执行此操作?
编辑:我可以动态显示图像和文本,但滚动条不起作用并且弄乱了所有的 ColumnLayout。
我尝试将 this 改编到我的代码中。
ColumnLayout {
anchors.fill: parent
ListView {
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.vertical: ScrollBar {}
Image {
source: "/images/test1.png"
}
Repeater {
model: 5
Label {
text: qsTr(txts["text" + (index + 1)])
}
Image {
source: "/images/test" + (index + 2) + ".png"
}
}
}
}
解决方法
我使用了 Image
而不是 Rectangle
,但这应该是您的目标,对吧?
import QtQuick 2.12
import QtQuick.Controls 2.15
Rectangle {
width: 320
height: 240
color: "lightGray"
ListView {
id: myListView
anchors.fill: parent
ScrollBar.vertical: ScrollBar {
id: control
active: true
interactive: true
padding: 0
size: 1.0
position: 1.0
contentItem: Rectangle {
id: controlHandle
implicitWidth: 10
implicitHeight: 4
radius: width / 2
color: "yellow"
}
background: Rectangle {
id: controlTrack
color: "green"
}
}
header: Rectangle {
width: myListView.width
height: 40
color: "darkGray"
Text {
anchors.centerIn: parent
text: "Header"
}
}
model: 20
delegate: Item {
width: myListView.width
height: childrenRect.height
Column {
Rectangle {
width: myListView.width
height: 60
color: "gray"
Text {
anchors.centerIn: parent
text: "This is image #" + modelData
}
}
Text { text: "Subtitle " + modelData }
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。