qml学习笔记(三)

opacity是一个继承属性,也就是说,父项目的透明度也会应用到子项目上,大多数情况下,这会产生想要的结果。

比如下面的代码会使红色和蓝色矩形块都透明,只想蓝色透明怎么办?把opacity:0.5属性挪到蓝色矩形框下即可。

import QtQuick 2.2
Item{
    Rectangle{
        opacity:0.5
        color:"red"
        width:100;height:100
        Rectangle{
            color:"blue"
            x:50;y:20;width:100;height:100
        }
    }
}
QtObject是一个非可视化的元素,它只包含objectName属性。QtObject一般用于封装一组自定一的属性方便用于参数设置。例如:

import QtQuick 2.0

QtObject {
    id: settings
    // These are used to scale fonts according to screen size
    property real _scaler: 300 + mainWindow.width * mainWindow.height * 0.00010
    property int fontXS: _scaler * 0.032
    property int fontS: _scaler * 0.045
    property int fontM: _scaler * 0.050
    property int fontMM: _scaler * 0.070
    property int fontL: _scaler * 0.100
}
一个项目可以通过设置其focus属性为true来使其获得焦点。一般情况下,使用focus属性就足够了。例如:

import QtQuick 2.2
Rectangle{
    color:"lightsteelblue";width:240;height:200
    Text{id:myText}
    Item{
        id:keyHandler
        focus:true
        Keys.onPressed:{
            if(event.key == Qt.Key_A)
                myText.text = 'Key A was pressed'
            else if(event.key == Qt.Key_B)
                myText.text = "Key B was pressed"
            else if(event.key == Qt.Key_C)
                myText.text = 'Key C was pressed'
        }
    }
}
Q_PROPERTY宏用来定义可通过元对象系统访问的属性,通过它定义的属性,可以在QML中访问,修改,也可以在属性变化时发射特定的信号。例子:

Q_PROPERTY(type name)
其中:

READ:如果你没有为属性指定MEMBER标记,则READ标记必不可少;声明一个读取属性的函数,该函数一般没有参数,返回定义的属性。

WRITE :可选配置。声明一个设定属性的函数。它指定的函数没有返回值,只能有一个与属性类型匹配的参数 。

NOTIFY :可选配置。给属性关联一个信号(该信号必须是已经在类中声明过的),当属性的值发生变化时就会触发该信号。信号的参数,一般就是你定义的属性。
 

实现可拖拽、编辑、选中的ListView可以提升用户交互体验,下面介绍一种实现方法。 1. 定义ListView 首先,我们需要定义一个ListView,用于显示列表项。在ListView中,我们需要指定model、delegate、highlight、onPressed、onPositionChanged等属性。 ``` ListView { id: listView model: ListModel { id: listModel } delegate: Component { id: delegate Rectangle { id: item width: listView.width height: 50 color: "white" border.width: 1 border.color: "black" Text { id: text anchors.centerIn: parent text: model.text } MouseArea { id: mouseArea anchors.fill: parent drag.target: item drag.axis: Drag.XAxis drag.minimumX: -listView.width drag.maximumX: listView.width drag.active: listView.currentIndex === index onPressed: { listView.currentIndex = index listView.positionViewAtIndex(index, ListView.Center) } } Rectangle { id: indicator width: 10 height: 10 color: "green" radius: width / 2 visible: listView.currentIndex === index anchors { right: parent.right verticalCenter: parent.verticalCenter margins: 10 } } } } highlight: Rectangle { color: "lightgray" width: listView.width height: 50 border.width: 1 border.color: "black" } onPositionChanged: { if (listView.moving) return; var index = listView.indexAt(listView.contentItem.x, listView.contentItem.y) if (index !== -1 && index !== listView.currentIndex) { listView.currentIndex = index } } } ``` 在上面的代码中,ListView中的delegate定义了每个列表项的展示方式。我们在delegate中定义了一个MouseArea,用于实现可拖拽的功能。在MouseArea的drag.target属性中,我们指定了可拖拽的目标为列表项item。设置drag.axis为Drag.XAxis,表示只能在水平方向上拖拽。设置drag.minimumX为-listView.width,drag.maximumX为listView.width,表示只能在ListView的宽度范围内拖拽。在onPressed事件中,我们设置了当前列表项为选中状态,并将其居中展示。 2. 定义编辑界面 为了实现编辑功能,我们需要定义一个编辑界面。在编辑界面中,用户可以修改列表项的文本内容。我们可以使用一个Dialog来实现编辑界面。 ``` Dialog { id: editDialog title: "Edit Item" modal: true width: 400 height: 200 visible: false TextField { id: textField anchors.centerIn: parent width: parent.width - 40 placeholderText: "Enter item text" } Button { text: "OK" onClicked: { var index = listView.currentIndex if (index !== -1) { listModel.setProperty(index, "text", textField.text) } editDialog.close() } enabled: textField.text !== "" anchors { right: parent.right bottom: parent.bottom margins: 10 } } Button { text: "Cancel" onClicked: editDialog.close() anchors { left: parent.left bottom: parent.bottom margins: 10 } } } ``` 在上面的代码中,我们定义了一个Dialog,其中包含一个TextField和两个Button。用户可以在TextField中输入新的文本内容,然后点击OK按钮保存修改,或点击Cancel按钮取消修改。 3. 实现选中效果 为了让用户能够明显地看到当前选中的列表项,我们可以在每个列表项上添加一个指示器。在ListView的delegate中,我们定义了一个Rectangle,用于显示当前选中的列表项。在Rectangle的visible属性中,我们使用listView.currentIndex === index来判断当前列表项是否被选中。 4. 实现编辑功能 在ListView中,我们可以通过双击或长按来触发编辑功能。在ListView的delegate中,我们为item和mouseArea分别定义了onDoubleClicked和onLongPressed事件。在onDoubleClicked事件中,我们弹出编辑界面,让用户可以修改当前选中的列表项的文本内容。在onLongPressed事件中,我们弹出上下文菜单,让用户可以选择删除当前选中的列表项。 ``` MouseArea { id: mouseArea anchors.fill: parent drag.target: item drag.axis: Drag.XAxis drag.minimumX: -listView.width drag.maximumX: listView.width drag.active: listView.currentIndex === index onPressed: { listView.currentIndex = index listView.positionViewAtIndex(index, ListView.Center) } onDoubleClicked: { editDialog.visible = true textField.text = model.text textField.selectAll() } onLongPressed: { var menu = Menu { MenuItem { text: "Delete" onTriggered: listModel.remove(index) } } menu.popup() } } ``` 在上面的代码中,我们为mouseArea分别定义了onDoubleClicked和onLongPressed事件。在onDoubleClicked事件中,我们弹出编辑界面editDialog,并将当前选中的列表项的文本内容显示在TextField中。在onLongPressed事件中,我们弹出上下文菜单Menu,其中包含一个MenuItem,用于删除当前选中的列表项。 5. 实现拖拽功能 在ListView中,我们可以通过拖拽来调整列表项的顺序。在ListView的delegate中,我们为item定义了onDropped事件。在onDropped事件中,我们交换拖拽的两个列表项的位置。 ``` Rectangle { id: item width: listView.width height: 50 color: "white" border.width: 1 border.color: "black" Text { id: text anchors.centerIn: parent text: model.text } MouseArea { id: mouseArea anchors.fill: parent drag.target: item drag.axis: Drag.XAxis drag.minimumX: -listView.width drag.maximumX: listView.width drag.active: listView.currentIndex === index onPressed: { listView.currentIndex = index listView.positionViewAtIndex(index, ListView.Center) } onDropped: { if (drag.source !== drag.target) { var fromIndex = drag.source.index var toIndex = drag.target.index listModel.move(fromIndex, toIndex, 1) } } } Rectangle { id: indicator width: 10 height: 10 color: "green" radius: width / 2 visible: listView.currentIndex === index anchors { right: parent.right verticalCenter: parent.verticalCenter margins: 10 } } } ``` 在上面的代码中,我们为mouseArea定义了onDropped事件。在onDropped事件中,我们使用ListModel的move方法来交换拖拽的两个列表项的位置。 至此,我们已经实现了可拖拽、编辑、选中的ListView。这个ListView可以让用户方便地调整列表项的顺序,同时也可以让用户快速修改列表项的文本内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值