qt - QML - 用于多点触控应用程序的自定义可滚动文本区域
问题描述
使用多个 ScrollView/Flickable 组件时,可拖动区域一次捕获在一个组件中。
我设法想出了一个解决方案:
Item {
Rectangle {
id: container
width:300
height:200
clip: true
anchors.left: parent.left;
anchors.topMargin: 5;
anchors.bottomMargin: 5;
anchors.rightMargin: 5;
anchors.leftMargin: 5;
Text {
id: contentText
width:parent.width-45
wrapMode: Text.Wrap
font.pointSize: 10
text: qsTr("Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br><br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br><br>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br><br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.")
}
DragHandler {
target: contentText
xAxis.maximum: 0
xAxis.enabled: false
yAxis.minimum: -contentText.height + container.height
yAxis.maximum: 0
}
}
ScrollIndicator {
active: true
orientation: Qt.Vertical
size: container.height / contentText.height
contentItem: Rectangle {
implicitWidth: 6
implicitHeight: 100
radius: width / 2
color: "#a9a9a9"
}
position: -contentText.y / contentText.height
anchors { top: container.top; right: container.right; bottom: container.bottom }
}
}
https://github.com/j04ntoh/QtMultitouchQml 您也可以从我的 github 下载示例。
解决方案
推荐阅读
- javascript - Mocha,在浏览器中测试时“未定义要求”
- node.js - 节点 acl 中间件在失败时不返回任何内容
- python - 替换 pandas.datetime 列中的年份
- php - 在wordpress中为每个页面存储大量数据的最佳方法?
- vuejs2 - 如何使用导航选项卡设置活动类
- node.js - Date.now() 返回服务器开始时间而不是当前时间?
- python - 正则表达式匹配和清除python中的引号
- ios - iOS Swift:如何将响应从服务器更改为特定格式?
- angular - 如何在 Angular 6 中使用下拉菜单过滤 json 数据?
- node.js - 使用 gcloud 部署 nodejs 应用程序错误