带有 ScrollView+TextArea 的自定义 QML 组件：TextArea 无法正确滚动
Custom QML component with a ScrollView+TextArea: TextArea not scrollable correctly
我有一个自定义 QML 组件，我想将其用于文本编辑。当我将它添加到我的主应用程序时，滚动非常... "broken"：滚动条没有反映内容的正确高度并且在我滚动时尺寸缩小。当我到达示例文本（10 段）的底部时，它会跳回顶部。有什么问题吗？
Reproducible test case Qt project。下面复制了两个 QML 文件：
自定义小部件（Instance.qml）：
import QtQuick 2.12
import QtQuick.Controls 2.5
ScrollView {
property string myText
clip: true
contentHeight: height
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
TextArea {
id: textArea
text: myText
selectByMouse: true
wrapMode: "WrapAtWordBoundaryOrAnywhere"
renderType: Text.NativeRendering
background: Rectangle {
border.width: 1
border.color: "black"
}
}
}
main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout {
id: errorsColumn
anchors.fill: parent
ScrollView {
id: errorsScrollView
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
contentWidth: parent.width
contentHeight: errorsRepeaterColumn.height
Column {
id: errorsRepeaterColumn
anchors.left: parent.left
anchors.right: parent.right
spacing: 5
add: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 500 }
}
Repeater {
model: 10
Button {
Layout.fillWidth: true
Layout.maximumHeight: 300
text: "I'm item " + index
onClicked: resultsPageEditor.state = "VISIBLE"
}
}
}
}
InstanceEditor {
id: resultsPageEditor
myText: "1 Numquam ducimus facilis quo eum perspiciatis sint alias soluta. Sit cupiditate dolorem perspiciatis quia fugit. Voluptas molestiae eius molestiae. Dolorum ipsam ipsum corporis provident nobis.
2 In assumenda suscipit incidunt et quas vero dicta. Ut et dolorem aut. Odio quo eveniet aut soluta harum molestias cumque vel. Nisi quis sed quaerat sapiente eos quaerat qui et. Numquam delectus ad delectus.
3 Enim rem et nihil nobis omnis voluptatem odit sed. Nemo rerum autem ipsa quia non quia. Praesentium molestiae iusto modi sint. Qui laboriosam eum quaerat aut cum perspiciatis. Qui iusto quisquam aut assumenda velit excepturi fugit rerum.
4 Veritatis est ut inventore sed eos. Dolorem perferendis mollitia illum vel dignissimos est. Iste explicabo quidem est.
5 Qui ad qui omnis molestias occaecati dolorum. Corrupti fuga voluptatibus voluptas laboriosam libero et sit. Omnis sed ut quia animi rerum voluptatem. Totam et impedit consequatur excepturi minus. Optio voluptatibus cumque neque sit blanditiis.
6 Autem quam laborum aut illum non nam eius debitis. Dolorem nostrum et molestiae eos. Dolorum architecto praesentium dignissimos corporis dignissimos.
7 Repudiandae autem autem animi. Praesentium exercitationem voluptate fugit voluptas cum voluptas. Perferendis eos aut modi corporis ratione et rerum.
8 Exercitationem amet itaque hic voluptas sunt hic eaque asperiores. Rerum corporis iure placeat possimus dolorem. Aut esse tempora odio quo provident laboriosam ut aut. Quam natus vero iusto qui quia qui ad. Quas quos vitae adipisci consequatur.
9 Perferendis inventore voluptas distinctio. Aspernatur sit magnam mollitia doloribus eum. Temporibus aut sunt nihil perferendis quisquam quidem tempora. Magni quia nihil sequi.
10 Est rerum et illum. Repellendus cumque aut voluptate qui omnis rem. Ut optio amet eius. Nemo ex et voluptatem adipisci dolorem molestiae. Maxime sint sint dolorem ut reiciendis sed dolor modi. Ipsa perferendis recusandae laboriosam."
Layout.fillWidth: true
height: 0
states: [
State {
name: "HIDDEN"
PropertyChanges { target: resultsPageEditor; height: 0 }
},
State {
name: "VISIBLE"
PropertyChanges { target: resultsPageEditor; height: 250 }
}
]
state: "HIDDEN"
transitions: [
Transition {
from: "*"; to: "VISIBLE"
NumberAnimation { properties: "height"; easing.type: Easing.InBack; duration: 500 }
},
Transition {
from: "*"; to: "HIDDEN"
NumberAnimation { properties: "height"; easing.type: Easing.InBack; duration: 500 }
}
]
}
}
}
您应该让 ScrollView 管理内容大小。第二个问题是您将 Instance 放在布局中。您应该使用 implicitHeight 来处理项目的大小。
这应该会如您所愿：
Instance {
id: resultsPageEditor
myText: "1 Numquam ducimus facilis quo eum perspiciatis sint alias soluta. Sit cupiditate dolorem perspiciatis quia fugit. Voluptas molestiae eius molestiae. Dolorum ipsam ipsum corporis provident nobis.
2 In assumenda suscipit incidunt et quas vero dicta. Ut et dolorem aut. Odio quo eveniet aut soluta harum molestias cumque vel. Nisi quis sed quaerat sapiente eos quaerat qui et. Numquam delectus ad delectus.
3 Enim rem et nihil nobis omnis voluptatem odit sed. Nemo rerum autem ipsa quia non quia. Praesentium molestiae iusto modi sint. Qui laboriosam eum quaerat aut cum perspiciatis. Qui iusto quisquam aut assumenda velit excepturi fugit rerum.
4 Veritatis est ut inventore sed eos. Dolorem perferendis mollitia illum vel dignissimos est. Iste explicabo quidem est.
5 Qui ad qui omnis molestias occaecati dolorum. Corrupti fuga voluptatibus voluptas laboriosam libero et sit. Omnis sed ut quia animi rerum voluptatem. Totam et impedit consequatur excepturi minus. Optio voluptatibus cumque neque sit blanditiis.
6 Autem quam laborum aut illum non nam eius debitis. Dolorem nostrum et molestiae eos. Dolorum architecto praesentium dignissimos corporis dignissimos.
7 Repudiandae autem autem animi. Praesentium exercitationem voluptate fugit voluptas cum voluptas. Perferendis eos aut modi corporis ratione et rerum.
8 Exercitationem amet itaque hic voluptas sunt hic eaque asperiores. Rerum corporis iure placeat possimus dolorem. Aut esse tempora odio quo provident laboriosam ut aut. Quam natus vero iusto qui quia qui ad. Quas quos vitae adipisci consequatur.
9 Perferendis inventore voluptas distinctio. Aspernatur sit magnam mollitia doloribus eum. Temporibus aut sunt nihil perferendis quisquam quidem tempora. Magni quia nihil sequi.
10 Est rerum et illum. Repellendus cumque aut voluptate qui omnis rem. Ut optio amet eius. Nemo ex et voluptatem adipisci dolorem molestiae. Maxime sint sint dolorem ut reiciendis sed dolor modi. Ipsa perferendis recusandae laboriosam."
Layout.fillWidth: true
Layout.alignment: Qt.AlignBottom
states: [
State {
name: "HIDDEN"
PropertyChanges { target: resultsPageEditor; implicitHeight: 0; }
},
State {
name: "VISIBLE"
PropertyChanges { target: resultsPageEditor; implicitHeight: 250; }
}
]
state: "HIDDEN"
transitions: [
Transition {
from: "*"; to: "VISIBLE"
NumberAnimation { properties: "implicitHeight"; easing.type: Easing.InBack; duration: 500 }
},
Transition {
from: "*"; to: "HIDDEN"
NumberAnimation { properties: "implicitHeight"; easing.type: Easing.InBack; duration: 500 }
}
]
}
ScrollView {
property string myText
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
onImplicitHeightChanged: textArea.update()
TextArea {
id: textArea
text: myText
selectByMouse: true
wrapMode: "WrapAtWordBoundaryOrAnywhere"
renderType: Text.NativeRendering
background: Rectangle {
anchors.fill: parent
border.width: 1
border.color: "black"
color: "red"
}
}
}
在 MacOS 中，我看到当 ScrollView 调整大小时 TextArea 的内容显示不正确。这就是为什么我把行 onImplicitHeightChanged: textArea.update()。但是，在我的 Linux.
上没有它也能正常工作
我有一个自定义 QML 组件，我想将其用于文本编辑。当我将它添加到我的主应用程序时，滚动非常... "broken"：滚动条没有反映内容的正确高度并且在我滚动时尺寸缩小。当我到达示例文本（10 段）的底部时，它会跳回顶部。有什么问题吗？
Reproducible test case Qt project。下面复制了两个 QML 文件：
自定义小部件（Instance.qml）：
import QtQuick 2.12
import QtQuick.Controls 2.5
ScrollView {
property string myText
clip: true
contentHeight: height
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
TextArea {
id: textArea
text: myText
selectByMouse: true
wrapMode: "WrapAtWordBoundaryOrAnywhere"
renderType: Text.NativeRendering
background: Rectangle {
border.width: 1
border.color: "black"
}
}
}
main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout {
id: errorsColumn
anchors.fill: parent
ScrollView {
id: errorsScrollView
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
contentWidth: parent.width
contentHeight: errorsRepeaterColumn.height
Column {
id: errorsRepeaterColumn
anchors.left: parent.left
anchors.right: parent.right
spacing: 5
add: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 500 }
}
Repeater {
model: 10
Button {
Layout.fillWidth: true
Layout.maximumHeight: 300
text: "I'm item " + index
onClicked: resultsPageEditor.state = "VISIBLE"
}
}
}
}
InstanceEditor {
id: resultsPageEditor
myText: "1 Numquam ducimus facilis quo eum perspiciatis sint alias soluta. Sit cupiditate dolorem perspiciatis quia fugit. Voluptas molestiae eius molestiae. Dolorum ipsam ipsum corporis provident nobis.
2 In assumenda suscipit incidunt et quas vero dicta. Ut et dolorem aut. Odio quo eveniet aut soluta harum molestias cumque vel. Nisi quis sed quaerat sapiente eos quaerat qui et. Numquam delectus ad delectus.
3 Enim rem et nihil nobis omnis voluptatem odit sed. Nemo rerum autem ipsa quia non quia. Praesentium molestiae iusto modi sint. Qui laboriosam eum quaerat aut cum perspiciatis. Qui iusto quisquam aut assumenda velit excepturi fugit rerum.
4 Veritatis est ut inventore sed eos. Dolorem perferendis mollitia illum vel dignissimos est. Iste explicabo quidem est.
5 Qui ad qui omnis molestias occaecati dolorum. Corrupti fuga voluptatibus voluptas laboriosam libero et sit. Omnis sed ut quia animi rerum voluptatem. Totam et impedit consequatur excepturi minus. Optio voluptatibus cumque neque sit blanditiis.
6 Autem quam laborum aut illum non nam eius debitis. Dolorem nostrum et molestiae eos. Dolorum architecto praesentium dignissimos corporis dignissimos.
7 Repudiandae autem autem animi. Praesentium exercitationem voluptate fugit voluptas cum voluptas. Perferendis eos aut modi corporis ratione et rerum.
8 Exercitationem amet itaque hic voluptas sunt hic eaque asperiores. Rerum corporis iure placeat possimus dolorem. Aut esse tempora odio quo provident laboriosam ut aut. Quam natus vero iusto qui quia qui ad. Quas quos vitae adipisci consequatur.
9 Perferendis inventore voluptas distinctio. Aspernatur sit magnam mollitia doloribus eum. Temporibus aut sunt nihil perferendis quisquam quidem tempora. Magni quia nihil sequi.
10 Est rerum et illum. Repellendus cumque aut voluptate qui omnis rem. Ut optio amet eius. Nemo ex et voluptatem adipisci dolorem molestiae. Maxime sint sint dolorem ut reiciendis sed dolor modi. Ipsa perferendis recusandae laboriosam."
Layout.fillWidth: true
height: 0
states: [
State {
name: "HIDDEN"
PropertyChanges { target: resultsPageEditor; height: 0 }
},
State {
name: "VISIBLE"
PropertyChanges { target: resultsPageEditor; height: 250 }
}
]
state: "HIDDEN"
transitions: [
Transition {
from: "*"; to: "VISIBLE"
NumberAnimation { properties: "height"; easing.type: Easing.InBack; duration: 500 }
},
Transition {
from: "*"; to: "HIDDEN"
NumberAnimation { properties: "height"; easing.type: Easing.InBack; duration: 500 }
}
]
}
}
}
您应该让 ScrollView 管理内容大小。第二个问题是您将 Instance 放在布局中。您应该使用 implicitHeight 来处理项目的大小。
这应该会如您所愿：
Instance {
id: resultsPageEditor
myText: "1 Numquam ducimus facilis quo eum perspiciatis sint alias soluta. Sit cupiditate dolorem perspiciatis quia fugit. Voluptas molestiae eius molestiae. Dolorum ipsam ipsum corporis provident nobis.
2 In assumenda suscipit incidunt et quas vero dicta. Ut et dolorem aut. Odio quo eveniet aut soluta harum molestias cumque vel. Nisi quis sed quaerat sapiente eos quaerat qui et. Numquam delectus ad delectus.
3 Enim rem et nihil nobis omnis voluptatem odit sed. Nemo rerum autem ipsa quia non quia. Praesentium molestiae iusto modi sint. Qui laboriosam eum quaerat aut cum perspiciatis. Qui iusto quisquam aut assumenda velit excepturi fugit rerum.
4 Veritatis est ut inventore sed eos. Dolorem perferendis mollitia illum vel dignissimos est. Iste explicabo quidem est.
5 Qui ad qui omnis molestias occaecati dolorum. Corrupti fuga voluptatibus voluptas laboriosam libero et sit. Omnis sed ut quia animi rerum voluptatem. Totam et impedit consequatur excepturi minus. Optio voluptatibus cumque neque sit blanditiis.
6 Autem quam laborum aut illum non nam eius debitis. Dolorem nostrum et molestiae eos. Dolorum architecto praesentium dignissimos corporis dignissimos.
7 Repudiandae autem autem animi. Praesentium exercitationem voluptate fugit voluptas cum voluptas. Perferendis eos aut modi corporis ratione et rerum.
8 Exercitationem amet itaque hic voluptas sunt hic eaque asperiores. Rerum corporis iure placeat possimus dolorem. Aut esse tempora odio quo provident laboriosam ut aut. Quam natus vero iusto qui quia qui ad. Quas quos vitae adipisci consequatur.
9 Perferendis inventore voluptas distinctio. Aspernatur sit magnam mollitia doloribus eum. Temporibus aut sunt nihil perferendis quisquam quidem tempora. Magni quia nihil sequi.
10 Est rerum et illum. Repellendus cumque aut voluptate qui omnis rem. Ut optio amet eius. Nemo ex et voluptatem adipisci dolorem molestiae. Maxime sint sint dolorem ut reiciendis sed dolor modi. Ipsa perferendis recusandae laboriosam."
Layout.fillWidth: true
Layout.alignment: Qt.AlignBottom
states: [
State {
name: "HIDDEN"
PropertyChanges { target: resultsPageEditor; implicitHeight: 0; }
},
State {
name: "VISIBLE"
PropertyChanges { target: resultsPageEditor; implicitHeight: 250; }
}
]
state: "HIDDEN"
transitions: [
Transition {
from: "*"; to: "VISIBLE"
NumberAnimation { properties: "implicitHeight"; easing.type: Easing.InBack; duration: 500 }
},
Transition {
from: "*"; to: "HIDDEN"
NumberAnimation { properties: "implicitHeight"; easing.type: Easing.InBack; duration: 500 }
}
]
}
ScrollView {
property string myText
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
onImplicitHeightChanged: textArea.update()
TextArea {
id: textArea
text: myText
selectByMouse: true
wrapMode: "WrapAtWordBoundaryOrAnywhere"
renderType: Text.NativeRendering
background: Rectangle {
anchors.fill: parent
border.width: 1
border.color: "black"
color: "red"
}
}
}
在 MacOS 中，我看到当 ScrollView 调整大小时 TextArea 的内容显示不正确。这就是为什么我把行 onImplicitHeightChanged: textArea.update()。但是，在我的 Linux.