QML中mapToItem和mapFromItem的使用

在Qt帮助文档里

object mapToItem(Item item, real x, real y)
object mapToItem(Item item, real x, real y, real width, real height)

object mapFromItem(Item item, real x, real y)
object mapFromItem(Item item, real x, real y, real width, real height)

其实只要弄清楚

object mapToItem(Item item, real x, real y)
object mapFromItem(Item item, real x, real y)

就全部都弄清楚了。

If item is a null value, this maps the point or rect to the coordinate system of the root QML view.

如果函数参数中的item为null的话,那么坐标点的转换是基于QML view的根组件的。
在这里插入图片描述
其中rect1的原点(矩形左上角的点)在根view中的坐标为(5, 5),
rect2的原点(矩形左上角的点)在rect1中的坐标点为(20,20)。

rect2.mapToItem(rect1, 0, 0);

是将rect2中坐标点为(0, 0),转换成rect1中的坐标点。
助记方法: 坐标点(0, 0),rect2转换成 rect1中的坐标点。

rect2.mapFromItem(rect1, 0, 0);

是将rect1中坐标为(0, 0),转换成rect2中的坐标点。
助记方法: 坐标点(0, 0),rect1转换成 rect2中的坐标点。
main.qml

import QtQuick 2.9
import QtQuick.Controls 2.5

ApplicationWindow {
    id: root
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")

    color: "#C2C2C2"
    Rectangle {
        id: rect1
        x: 5
        y: 5
        width: parent.width-10
        height: 100
        color: "#87CEFF"

        Label {
            text: "rect1"
        }

        Rectangle {
            id: rect2
            x: 20
            y: 20
            width: rect1.width-30
            height: 60
            color: "#9AFF9A"

            Label {
                text: "rect2"
            }
        }//end rect2
    }//end rect1

    Text {
        id: labelShow
        text: qsTr("text")
        anchors.top: rect1.bottom
        anchors.left: rect1.left
        anchors.topMargin: 10

        font.pixelSize: 12

        Component.onCompleted: {
            var pos1 = rect2.mapToItem(null, 0, 0);
            var msg1 = "rect2.mapToItem(null, 0, 0) x is:" + pos1.x + " y:" + pos1.y + "\n\n";

            var pos2 = rect2.mapFromItem(null, 0, 0);
            var msg2 = "rect2.mapFromItem(null, 0, 0) x is:" +pos2.x + " y:" + pos2.y + "\n\n";

            var pos3 = rect2.mapToItem(rect1, 0, 0);
            var msg3 = "rect2.mapToItem(rect1, 0, 0) x is:" + pos3.x + " y:" + pos3.y + "\n\n";

            var pos4 = rect2.mapFromItem(rect1, 0, 0);
            var msg4 = "rect2.mapFromItem(rect1, 0, 0) x is:" +pos4.x + " y:" + pos4.y + "\n\n";

            var msg = msg1 + msg2 + msg3 + msg4;

            labelShow.text = msg.toString();
        }
    }
}

参考:https://blog.csdn.net/imtina/article/details/53670528

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在QML,可以使用TableView元素创建表格。使用model属性来指定表格的数据来源,其的属性要使用TableModel类型。可以使用表头的visible属性和表头项来设置表格的表头。可以使用delegate属性和属性代理来设置表格单元格的样式和内容。还可以使用resizeMode属性来设置表格的列宽自适应模式。最后,将TableView元素添加到适当的布局容器来将表格放置在应用程序。 ### 回答2: QML是一种基于Qt框架的声明式语言,用于快速开发并实现用户界面。其,TableView就是一种常见的控件,用于展示多行多列的数据。 TableView的用法与其他控件类似,可以在QML文件直接创建一个TableView: ``` TableView { // 设置表格的宽度和高度 width: 300 height: 200 // 设置表格的model(即数据),可以是Javascript的数组或者ListModel等数据结构 model: ListModel { ListElement { name: "Tom"; age: 20 } ListElement { name: "Lucy"; age: 18 } ListElement { name: "Kate"; age: 22 } } // 设置表格的行和列的数量、宽度 TableViewColumn { role: "name"; title: "Name"; width: 100 } TableViewColumn { role: "age"; title: "Age"; width: 100 } } ``` 上述代码,首先设置了TableView的宽度和高度,然后通过model属性设置了表格的数据。在这里,我们使用了ListModel,并将三个元素添加进去。接着,通过TableViewColumn设置了表格的列数以及每列进行展示的数据,例如第一列展示name,第二列展示age。 通过设置TableViewColumn还可以自定义每列的样式,例如: ``` TableViewColumn { role: "name" title: "Name" width: 100 delegate: Rectangle { color: "lightblue" border.color: "black" width: parent.width height: parent.height Text { text: styleData.value anchors.centerIn: parent } } } ``` 上述代码,我们添加了一个Rectangle作为每列的样式,并且使用了Text组件来实现每个单元格的内容展示。 当然,除了上述基本用法以外,TableView还支持各种事件响应、滚动条控制等功能,可根据不同的需求进一步定制。总之,QML的TableView控件在展示多行多列的数据时非常实用,方便快捷易用。 ### 回答3: QML的TableView有助于显示相对较大的表格数据。使用TableView时,您可以灵活地设置表格外观和排序规则。以下是如何使用TableView的一些示例。 首先,您需要导入QtQuick.Controls模块,以便可以使用TableView组件。 1. 基本用法 首先,在QML创建一个TableView组件。然后,将表格列数据添加到model使用delegate设置每个单元格的外观。例如: ``` import QtQuick.Controls 1.4 TableView { TableViewColumn { role: "name" title: "Name" } TableViewColumn { role: "age" title: "Age" } model: ListModel { ListElement { name: "John" age: 30 } ListElement { name: "Mary" age: 40 } } delegate: Text { text: styleData.value } } ``` 在上面的例子,我们定义一个表格,其包含两列数据:name和age。model包含两个元素,每个元素都包含名称和年龄。最后,我们将每个单元格的值设置为Text实例的文本属性。 2. SortDelegate和SortIndicator 可以使用SortDelegate和SortIndicator组件来为表格添加排序功能。SortDelegate将包含在表格的表头。SortIndicator将指示按列排序的方向。 ``` import QtQuick.Controls 1.4 TableView { TableViewColumn { role: "name" title: "Name" sortIndicator: SortIndicator { column: 0 ascending: true } sortDelegate: Item { width: 10 Rectangle { anchors.fill: parent color: styleData.sortIndicatorColor } } } TableViewColumn { role: "age" title: "Age" sortIndicator: SortIndicator { column: 1 ascending: true } sortDelegate: Item { width: 10 Rectangle { anchors.fill: parent color: styleData.sortIndicatorColor } } } model: ListModel { ListElement { name: "John" age: 30 } ListElement { name: "Mary" age: 40 } } delegate: Text { text: styleData.value } } ``` 在上面的例子,我们为每个列设置sortDelegate和sortIndicator,以便单击表头时实现升序和降序排序。 3. 带有扩展固定行的表格 也可以为表格添加一行或多行。 在这种情况下,表格将具有固定的标题行,而剩余的部分则可以滚动。 ``` import QtQuick.Controls 1.4 TableView { TableViewColumn { role: "name" title: "Name" } TableViewColumn { role: "age" title: "Age" } TableViewColumn { role: "email" title: "Email" } model: ListModel { ListElement { name: "John" age: 30 email: "[email protected]" } ListElement { name: "Mary" age: 40 email: "[email protected]" } ListElement { name: "David" age: 35 email: "[email protected]" } ListElement { name: "Alice" age: 25 email: "[email protected]" } } headerDelegate: Rectangle { height: 30 color: "gray" Text { text: model ? model.roleNames()[styleData.column] : "" font.bold: true anchors.centerIn: parent } } delegate: Text { text: styleData.value } } ``` 在此示例,我们添加了一个headerDelegate,以显示在表格顶部的标题行。 headerDelegate设置了一个高度为30的矩形,其包含TableColumn的标题。要添加固定行,我们将headerDelegate属性设置为Text,以便在表格顶部显示标题。 总结: 在QML使用TableView可以轻松地显示表格数据。基本的TableView用法可以帮助您使用未排序或未分组的数据,但如果您需要更高级的功能,例如排序、固定行或多列滚动等,则可以使用SortDelegate和SortIndicator组件。最后,您还可以使用headerDelegate属性来为表格添加一个固定的标题行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值